Autocomplete: Use of invalid role when no results found

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Home – GOV.UK Design System
• WCAG reference: 1.3.1 Info and Relationships (Level A)
• Issue ID: DAC_Autocomplete_No_Results_01

The options within the autocomplete were contained within a ul with the role="listbox" applied to it. Typically the results will be contained within <li> items with the role="option" applied to it which makes it valid.
However, when there are no results found the information is contained within an <li> item without a role. As there is no valid role present, the implementation of the <li> is not valid as the parent listbox should only contain option elements.

Current code

<ul id="app-site-search__input__listbox" role="listbox" class="app-site-search__menu app-site-search__menu--overlay app-site-search__menu--visible">
  <li class="app-site-search__option app-site-search__option--no-results">No results found</li>
</ul>

DAC's proposed solution

As <li> items are specific child elements to unordered/ordered list they cannot be used in place of an option within a listbox. In this instance when there are no results present, in order for the content to behave in the expected way it will need to be marked-up differently.
We suggest adding a role="option" to the <li> as this is a valid child element of the listbox.
We then suggest applying the aria-disabled="true" attribute to convey that the option cannot be selected to screen reader users.

Additional instances

This component appears on every page but is a single component, therefore only needs to be fixed once.
It uses the accessible autocomplete component.

Needed roles

Frontend developer