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
htmlangularvuesvelteastrojsx- WCAG 2.2
- 4.1.2, poziom A
- Uczy jej skill
fe-a11y-menusNavigation, disclosures and menus- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain a11y/popup-button-expanded