Role and semantics
Section titled “Role and semantics”DropdownMenu implements the APG Menu Button pattern through Base UI Menu. The trigger carries aria-haspopup="menu" and aria-expanded; the menu has role="menu" and items have the menuitem, menuitemcheckbox or menuitemradio role with aria-checked. Groups are named by their labels. Shortcuts are exposed with aria-keyshortcuts; the visible Kbd is not read. The second line and the disabled reason join the item’s name after the label, so the name matches the visible text (WCAG 2.5.3).
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter / Space / Down arrow | Opens the menu from the trigger and highlights the first item. |
| Up / Down arrow | Moves between items, wrapping at the ends. |
| Home / End | First or last item. |
| Letter | Jumps to an item starting with that letter. |
| Enter / Space | Chooses the item. |
| Right arrow (right-to-left: Left arrow) | Opens a submenu. |
| Left arrow (right-to-left: Right arrow) | Closes a submenu. |
| Escape | Closes the menu; focus returns to the trigger. |
| Tab | Closes the menu and moves on. |
While the menu is open, focus is on the highlighted item. On close, focus returns to the trigger. Disabled items can be highlighted, so their reasons are read.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Trigger | “Actions, menu button, collapsed” |
| Item with a shortcut | “Edit, menu item” and the shortcut (depending on the screen reader) |
| Disabled item | “Export, dimmed, menu item, Export is turned off for this item.” |
| Checkbox item | “First item, menu checkbox, checked” |
Contrast
Section titled “Contrast”Item text on the highlighted background reaches at least 4.5:1, and danger text in color-text-danger at least 4.5:1. Danger is also stated by the verb in the label, not only by colour.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How DropdownMenu meets it | What product teams do |
|---|---|---|
| 2.1.1 Keyboard | All items and submenus work with the keyboard. | Nothing. |
| 2.4.3 Focus order | Focus returns to the trigger on close. | Nothing. |
| 1.4.1 Use of colour | Danger is also stated in the label. | Write labels as verbs. |
| 2.5.8 Target size | Items are at least 32 px. | Nothing. |
| 4.1.2 Name, role, value | Roles, aria-checked, aria-keyshortcuts. |
Really bind the shortcut. |