Accessibility test fails for SelectSeparator

[sidx1024]

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?

<div role="listbox">
  <hr role="separator" />
</div>

Steps to reproduce the bug

1. Open SelectGroup example: https://ariakit.org/examples/select-group
2. Keep the select dropdown open (This is required)
3. Run a scan with axe-core DevTools (Download from Chrome Web Store if not installed: https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)

Expected behavior

Usage of SelectSeparator should not violate accessibility

Workaround

#3315 (comment)

Possible solutions

No response

[diegohaz]

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 role={undefined} aria-hidden to it.

We should probably deprecate the SelectSeparator component (and probably ComboboxSeparator as well).

[IanVS]

It seems that the SelectSeparator is deprecated already, but I can't find mention of it in the changelog.

Also, the SelectGroup example still uses it. https://ariakit.org/examples/select-group

[diegohaz]

It seems that the SelectSeparator is deprecated already, but I can't find mention of it in the changelog.

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.

[jasikpark]

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"

[diegohaz]

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.

[diegohaz]

Safari 17.4 will support <hr> elements within <select>, which is technically a role="separator" element inside a role="listbox". I'm not sure about the implications this holds for the accessibility tree, or if it signals future spec support for this relationship. However, it's worth noting.