search

chakra-ui / zag

Finite state machines for building accessible design systems and UI components. Works with modern frameworks, and even just Vanilla JS
http://zagjs.com
MIT License
4.06k stars 167 forks source link

Aria validity in stepper #1791

Closed Jonas-C closed 2 months ago

Jonas-C commented 2 months ago

🐛 Bug report

Hi! According to MDN, elements with the tab role should be direct descendants of the tablist element. Alternatively, they can be referenced through aria-owns on the tablist element. In zag/ark, tab (trigger) elements are wrapped with a div (item). This is invalid.

💻 Link to reproduction

https://zagjs.com/components/react/steps

🧭 Possible Solution

Most component libraries "solve" this by only providing the list part of the stepper, leaving reactivity (tab switching) up to the user to implement. This allows you to skip adding aria roles in the first place.

If you intend to keep interactivity within the stepper component, I think the most flexible solution is to utilize aria-owns. Omitting the stepper item would remove too much flexibility.

segunadebayo commented 2 months ago

I pushed a fix for this using aria-owns. It felt like the best solution for this use case.