(aria-required-children): does not allow separator in listbox

[EstebanG23]

Product

axe-core

Product Version

No response

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

Accessibility tests to pass.

An item with role=separator should be acceptable as a child of an element with role=listbox.

Actual

Accessibility test fails aria-required-children test.

Error:

Fix any of the following:

Element has children which are not allowed (see related nodes)
Element has no aria-busy="true" attribute

Related node:

li[role="separator"]

How to Reproduce

html sample:

<ul role="listbox">
  <li role="option">
    Home
  </li>
  <li role="separator"></li>
  <li role="option">
    Colors
  </li>
</ul>

[WilcoFiers]

This is an interesting question. I'm going to reach out to the ARIA working group. The ARIA spec doesn't allow separators between options, but I'm wondering if they should, since those are allowed for menuitems. I'm curious what the reasoning is for allowing separators between menuitems, but not anything else.

BTW the way to address this issue is to use groups. Those should get announced and counted correctly.

[WilcoFiers]

A related question came up today about using a separator in a tablist. It seems NVDA and VoiceOver ignore them in counting the number of options. I'm not sure whether that is because of the separator role, because the option had no accessible name, or something else. We'll need to test this.