feat: Stepper

[epr3]

Closes #805.

Stepper implementation composed of: Root, List, Item, Indicator, Title, Description.

Item has local context for supplying data to underlying components.

Main features:

• Navigate and select steps using keyboard
• linear property ensures linear navigation of stepper
• steps must have a Title for accessibility (like the Dialog)
• handles both vertical and horizontal steppers using the orientation property
• support for both LTR/RTL contexts

The component is fully documented and tested.

More context here: #987 (comment)

Any feedback is appreciated. 🚀

[zernonia]

@epr3 Thanks for working on this. However I'm not sure if this component is really needed. From what I can see it's closely resembles the Tab component, and can be easily build with Tab.

[epr3]

@zernonia Yes, I agree. I've seen most implementations follow a Tab-like structure.

I was thinking of making this component different than the Tabs component so:

• adding state data attributes to permit a more granular styling (e.g. for inactive, active and completed states)
• a linear property to limit navigation and focus and a Title and Description component following the implementation of the Dialog component for accessibility (aka describing the current step)
• this component would not have had a Content component

I referenced this and this for the features.

I would have used a nav element and marked it with aria-label="progress" which in turn would have wrapped an ul if linear: false or an ol tag if true.

Let me know your thoughts! Feel free to close the PR if the component is overlapping the Tabs component in usage.
Thank you! 👍🏻

[Celibioux]

@epr3 Thanks for your amazing work ☺️
@zernonia I Think that the approche of @epr3 is great for steps than hack Tabs to look like Steps ? Even Nuxt UI 3 wait for steppers to Land in Radix-vue
Thank you all for your great work

[zernonia]

Thanks for the explanation @epr3 ! If that's the case let's continue on with this component! 🚀
Thanks @Celibioux for the input, yeah I can see some demands for this component 🤩

[cloudflare-workers-and-pages]

Deploying radix-vue with    Cloudflare Pages

Latest commit:	cbae586
Status:	✅  Deploy successful!
Preview URL:	https://f23c3130.radix-vue.pages.dev
Branch Preview URL:	https://805-feature-stepper.radix-vue.pages.dev

View logs

[zernonia]

Thanks for create working on this component @epr3 !! Just suggestion regarding some implementation.

Also, as there's no WAI-ARIA spec for Stepper, I think we need to think about how to inform user properly (Screen reader/Voiceover mode). Currently the a11y is not well covered yet, especially informing how many steps there were.

[epr3]

Thanks for create working on this component @epr3 !! Just suggestion regarding some implementation.

Also, as there's no WAI-ARIA spec for Stepper, I think we need to think about how to inform user properly (Screen reader/Voiceover mode). Currently the a11y is not well covered yet, especially informing how many steps there were.

@zernonia Thank you very much for the feedback! I can think of adding a visibility hidden div with aria-live="polite" to the root with the text of Step 1 of 5 or something like that for announcing the total number of steps and the current step. Could you let me know if there are any other elements that should be added?

[zernonia]

Thanks for create working on this component @epr3 !! Just suggestion regarding some implementation.
Also, as there's no WAI-ARIA spec for Stepper, I think we need to think about how to inform user properly (Screen reader/Voiceover mode). Currently the a11y is not well covered yet, especially informing how many steps there were.

@zernonia Thank you very much for the feedback! I can think of adding a visibility hidden div with aria-live="polite" to the root with the text of Step 1 of 5 or something like that for announcing the total number of steps and the current step. Could you let me know if there are any other elements that should be added?

This is not a bad suggestion! I was looking into the having role tablist, tab, but afraid that without proper tabpanel it would causes bad a11y. Let's go with aria-live announcer 😁