# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`:

```html
<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`:

```html
<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:

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