WCAG 2.1 AA — release blocker
Menubar must satisfy these on every render before it ships.
Semantics
- The root element renders
role="menubar". - Each trigger renders
role="menuitem"within the menubar. - Dropdown content renders
role="menu"withrole="menuitem"children. - Checkbox items use
role="menuitemcheckbox"witharia-checked. - Radio items use
role="menuitemradio"witharia-checked.
Keyboard navigation
| Key | Action |
|---|---|
Arrow Left / Right | Move focus between top-level menu triggers. |
Arrow Down | Open the focused menu and move to the first item. |
Arrow Up | Move to the previous item in an open menu. |
Enter / Space | Activate the focused menu item. |
Escape | Close the current menu and return focus to the trigger. |
| Type-ahead | Typing a character moves focus to the next matching item. |
Focus management
- Focus starts on the first trigger in the menubar.
- When a menu opens, focus moves to the first item inside it.
- When a menu closes, focus returns to the trigger that opened it.
- Focus wraps within a menu (last item arrows to first and vice versa).
Labelling
- Each
MenubarTriggerserves as the accessible name for its menu. MenubarShortcutis rendered witharia-hidden— it is a visual hint, not announced.
Disabled state
- Disabled items have
aria-disabled="true"and are skipped during keyboard navigation. - Disabled items are visually de-emphasized with reduced opacity.
Audit checklist
- Root has
role="menubar" - Menus have
role="menu"withrole="menuitem"children - Arrow keys navigate between menus and within items
- Escape closes the current menu
- Type-ahead moves focus to matching items
- Checkbox items toggle
aria-checked - Radio items reflect
aria-checkedwithin their group - Focus ring visible on all interactive elements
- 4.5:1 contrast on menu items