New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility test fails for SelectSeparator #3315
Comments
Thanks for reporting. Here's a related issue: dequelabs/axe-core#3938 For now, you can either remove the component from your code and use borders around groups instead, or you can pass We should probably deprecate the |
It seems that the Also, the SelectGroup example still uses it. https://ariakit.org/examples/select-group |
We refer to this as "soft deprecation" to draw attention to it. However, it can still be reverted, and the change log entry will be added when it is finally deprecated with a console warning. |
So the recommended replacement is meant to be a bottom border on each SelectGroup that emulates a separator? Definitely would be great to see an example in the docs by the time this is "hard deprecated" |
Absolutely! Maybe an easier migration path is to just render a div or an aria-hidden hr instead, which will produce similar results to what you currently have with the separator component (but with a valid accessibility tree). However, wrapping the items in a group is the ideal alternative because it better communicates to screen reader the separation of those items. |
Safari 17.4 will support |
Current behavior
I ran a test on SelectGroup example with axe-core DevTools and it reports that "Certain ARIA roles must contain particular children" for listbox.
It seems the following DOM structure violates a11y guidelines?
Steps to reproduce the bug
Expected behavior
Usage of SelectSeparator should not violate accessibility
Workaround
#3315 (comment)
Possible solutions
No response
The text was updated successfully, but these errors were encountered: