An “li” element that is a descendant of a “role=listbox” element or “role=list” element must not have any “role” value other than “group” or “option”.

An <li> element inside an element with role="listbox" may only carry a role value of option or group.

The listbox role turns a list into a select-like widget, so assistive technologies expect every item in it to be a selectable option, optionally organized under a group. Any other role on the items, such as menuitem, button, or tab, contradicts the structure announced by the container, and screen readers can no longer present the widget coherently. This often happens in hand-rolled dropdowns built on <ul> and <li>, where the container got role="listbox" but the items kept a role from an earlier design.

If the items really are selectable choices, give them role="option". If they are something else entirely, change the container role instead of forcing the items. And when the widget is a plain single or multiple choice, a native <select> needs no ARIA at all.

Invalid example

The items use menuitem, which is not allowed inside a listbox:

<ul role="listbox" aria-label="Sort order">
  <li role="menuitem">Newest first</li>
  <li role="menuitem">Oldest first</li>
</ul>

Valid example

Each item becomes an option:

<ul role="listbox" aria-label="Sort order">
  <li role="option" aria-selected="true">Newest first</li>
  <li role="option" aria-selected="false">Oldest first</li>
</ul>

Or use a native control and drop the ARIA roles entirely:

<label>Sort order
  <select>
    <option selected>Newest first</option>
    <option>Oldest first</option>
  </select>
</label>

Learn more:

MDN Reference

ARIA: listbox role - MDN

→

MDN Reference

ARIA: option role - MDN

→

MDN Reference

HTML li element - MDN

→