[Wizard] HTML structure concerns

[GomezIvann]

The current component structure is made up of divs and buttons, which doesn't fit the accessibility concerns expected from the component. Some proposals to consider about the external containers:

1. Make the outer <div> a <nav> with an inner <ol>, as the steps are ordered.
2. Make the external <div> a role="group", which is the last implementation. Keep the inner list of steps as a <div>.

Other topics to discuss:

• Should we use the <heading> tag for each step label?
• Should each step be a <link> instead of a <button>?

[aweell]

Should we use the tag for each step label?

At least we need to specify in the documentation that every step needs to be represented as a heading either in the wizard component or a header added between the stepper and the content. If we decide to change the label of each step as a heading we should consider the property as since we don't know the hierarchy level the component has in the UI.

[marcialfps]

Should each step be a instead of a ?

I think this question is very similar to the discussion we have about client-side navigation with Link and Tabs (#757 and #878), there may be cases where the step triggers an action when clicking or just reload part of the page.

[marcialfps]

1. Make the outer <div> a <nav> with an inner <ol>, as the steps are ordered.

Braid uses exactly this approach in Stepper component. But other design systems don't use <nav>, they use a <div> with an internal <ol> (Spark) or <ul> (Carbon and Atlassian).

2. Make the external <div> a role="group", which is the last implementation. Keep the inner list of steps as a <div>.

Atlassian has the same implementation, but inside the external <div> with role="group" it has a <ul> directly.

Other topics to discuss:

• Should we use the <heading> tag for each step label?

Other design systems such as Ant and Carbon supports a node element in the label prop. A very similar solution provides Atlassian, which uses prop render where we can go through each step by providing a custom node. I think this is a good solution if the user wants to use a custom heading.

• Should each step be a <link> instead of a <button>?

Carbon and Braid use a <button> for each step. I have not found any design system that uses <link>.