Skip to content

Fix known accessibility violations for searchable groups listbox

A listbox with searchable groups throws two accessibility violations, when tested in application's feature test (see #430165 (comment 1713042300)):

Certain ARIA roles must contain particular children

aria-required-children: Certain ARIA roles must contain particular children (critical) https://dequeuniversity.com/rules/axe/4.6/aria-required-children?application=axeAPI The following 1 node violate this rule:

                Selector: #listbox-36
                HTML: <div id="listbox-36" aria-labelledby="listbox-header-37" role="listbox" tabindex="-1" class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay gl-new-dropdown-contents" style="max-height: 430.609px;">
                Fix any of the following:
                - Element has children which are not allowed (see related nodes)
                - Element has no aria-busy="true" attribute
Scrollable region must have keyboard access scrollable-region-focusable: Scrollable region must have keyboard access (moderate) https://dequeuniversity.com/rules/axe/4.6/scrollable-region-focusable?application=axeAPI The following 1 node violate this rule:
                Selector: #listbox-36
                HTML: <div id="listbox-36" aria-labelledby="listbox-header-37" role="listbox" tabindex="-1" class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay gl-new-dropdown-contents" style="max-height: 430.609px;">
                Fix any of the following:
                - Element should have focusable content
                - Element should be focusable