a11y/popup-button-expanded

Why

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.

Fix

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.

Examples

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

Sources

• WAI-ARIA Authoring Practices, Menu Button pattern
• W3C, WAI-ARIA 1.2, aria-expanded
• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value

Read it in the terminal

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