a11y/option-no-interactive

Why

An option's content is presentational: assistive technology reads it as one piece of text. A "Remove" button inside cannot be reached with the listbox keys and may be read as part of the option's name.

Fix

Keep the option to text, icons and images. Put row actions outside the list (a toolbar that acts on the selected option), or switch to the grid pattern when each row needs its own controls.

Examples

<!-- bad -->
<li role="option">Anna <button>Remove</button></li>
<!-- good -->
<li role="option" aria-selected="true">Anna</li>
<button type="button">Remove selected recipient</button>

Sources

• WAI-ARIA Authoring Practices, Listbox pattern
• W3C, WAI-ARIA 1.2, option role (children presentational)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/option-no-interactive