a11y/option-no-interactive

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

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

Przeczytaj w terminalu

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