Product
axe-core
Product Version
4.5.0
Latest Version
Issue Description
Expectation
Accessibility tests to pass.
An item with role=separator should be acceptable as a child of an element with role=menu and using aria-activedescendant to report actively focuses item.
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:
<span class="pds-menu-button">
<button id="menu-button-de4ce43c" aria-haspopup="true" aria-controls="menu-listbox-de4ce43c" aria-expanded="true" type="button" class="pds-button pds-button--secondary pds-menu-button__trigger">
Menu trigger label
<svg aria-hidden="true" class="trigger-indicator" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
</svg>
</button>
<div id="menu-listbox-de4ce43c" role="menu" tabindex="-1" aria-labelledby="menu-button-de4ce43c" data-fui-placement="bottom-start" style="display: block; position: absolute; transform: translate(16px, 54px);">
<ul role="group" aria-labelledby="menu-button-de4ce43c-group-f73ef62b-heading" aria-label="">
<li role="presentation" id="menu-button-de4ce43c-group-f73ef62b-heading" class="pds-menu-button__listbox-heading">Business options</li>
<li id="menu-button-de4ce43c-group-f73ef62b-item-2" class="" role="menuitem" tabindex="-1">Alpha item</li>
<li id="menu-button-de4ce43c-group-f73ef62b-item-3" class="" role="menuitem" tabindex="-1">Beta item</li>
</ul>
<ul role="group" aria-labelledby="" aria-label="Unlabeled group 2">
<li role="separator"></li>
<li id="menu-button-de4ce43c-group-eb5fe55c-item-2" class="" role="menuitem" tabindex="-1">Gamma item</li>
<li id="menu-button-de4ce43c-group-eb5fe55c-item-3" class="" role="menuitem" tabindex="-1">Epsilon item</li>
</ul>
<ul role="group" aria-labelledby="menu-button-de4ce43c-group-400c5101-heading" aria-label="">
<li role="presentation" id="menu-button-de4ce43c-group-400c5101-heading" class="pds-menu-button__listbox-heading">Corporate options</li>
<li id="menu-button-de4ce43c-group-400c5101-item-2" class="" role="menuitem" tabindex="-1">Alpha item</li>
<li id="menu-button-de4ce43c-group-400c5101-item-3" class="" role="menuitem" tabindex="-1">Beta item</li>
<li id="menu-button-de4ce43c-group-400c5101-item-4" class="" role="menuitem" tabindex="-1">Gamma item</li>
</ul>
</div>
</span>
Product
axe-core
Product Version
4.5.0
Latest Version
Issue Description
Expectation
Accessibility tests to pass.
An item with
role=separatorshould be acceptable as a child of an element withrole=menuand usingaria-activedescendantto report actively focuses item.Actual
Accessibility test fails
aria-required-childrentest.Error:
How to Reproduce
HTML sample: