DropdownMenu accessibility

WCAG 2.1 AA — release blocker

Semantics

• Trigger renders as <button> with aria-haspopup="menu".
• aria-expanded reflects the open/closed state of the menu.
• Menu content uses role="menu".
• Each DropdownMenuItem uses role="menuitem".
• Disabled items set aria-disabled="true" and are skipped during keyboard navigation.

Keyboard navigation

• ArrowDown / ArrowUp on the trigger opens the menu.
• ArrowDown / ArrowUp moves focus between enabled items within the open menu.
• Enter / Space on a focused item activates it and closes the menu.
• Escape closes the menu and returns focus to the trigger.

Focus management

• Opening the menu moves focus to the first enabled item.
• Closing the menu returns focus to the trigger button.
• Disabled items are not focusable via keyboard.

Labelling

• The trigger button text serves as the accessible name.
• Add aria-label to the trigger if it only contains an icon.
• DropdownMenuLabel provides group headings for screen readers.

Disabled state

• Disabled items set aria-disabled and cannot be activated.
• Click-outside closes the menu without triggering any action.

Audit checklist

• Screen reader announces trigger label and expanded state.
• Arrow keys navigate enabled items; disabled items are skipped.
• Enter/Space activates the focused item.
• Escape closes the menu and returns focus to trigger.
• Focus ring is visible on the trigger and focused items (4.5:1 contrast).
• Destructive items are announced with their text, not their color.