search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.47k stars 782 forks source link

[ToggleGroup] Doesn't communicate group to screen readers #754

Open jjenzz opened 3 years ago

jjenzz commented 3 years ago

When you reach the toggle group with VoiceOver (haven't tested NVDA but should be checked too) it will tell you that you are on a toggle button but it isn't clear it is a group with others in the list. Because of this, as an SR user it's not obvious I can use my arrow keys to navigate the list. I end up hitting tab and completely bypassing the other items.

benoitgrelard commented 3 years ago

Interesting, where are you trying that? Perhaps that example doesn't have a label? We have role="group" on it, and our stories have aria-label on the group too.

jjenzz commented 3 years ago

We have role=group but focus never lands there because of the RovingFocusGroup proxying. It moves me to the button so VoiceOver just reads that I'm on a button.

jjenzz commented 3 years ago

and our stories have aria-label on the group too.

Ah, I'm testing in the Radix docs and there is no aria-label on the group. That's the issue. Perhaps we need to make the aria-label or aria-labelledby stuff required somehow so people don't accidentally make it inaccessible.

With the label it just reads "Toggle button, Test, Group". It doesn't communicate how many items there are but dunno if that matters.

benoitgrelard commented 3 years ago

Yeah, it's difficult to make this stuff required though that's the problem, because there are multiple ways of labelling.

benoitgrelard commented 3 years ago

Maybe it's a matter of generalising warnings like we do in Dialog and AlertDialog?

jjenzz commented 3 years ago

Yeah, that's probably the best solution :+1: