Dostępność

a11y/popup-button-expanded

A control that opens a popup (aria-haspopup or role="combobox") has aria-expanded that follows the open state.

poważnastatyczneWCAG 4.1.2 · Afe-a11y-menus

Dlaczego

aria-haspopup says a menu or list will appear; without aria-expanded a screen reader user cannot tell whether it is open now, so they do not know whether to look for it or press the button again. A combobox requires the attribute.

Poprawka

Add aria-expanded="false" to the trigger and switch it to true when the popup opens, from the same state that shows the popup. Close it on Escape and when focus leaves.

Przykłady

<!-- bad -->
<button type="button" aria-haspopup="menu">Actions</button>
<!-- good -->
<button type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="row-actions">Actions</button>

Źródła

Fakty

Identyfikator
a11y/popup-button-expanded
Waga
poważna
Sprawdzanie
statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików
html angular vue svelte astro jsx
WCAG 2.2
4.1.2, poziom A
Uczy jej skill
fe-a11y-menus Navigation, disclosures and menus
Od wersji
0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/popup-button-expanded