ContextMenu -- Accessibility
Keyboard
| Key | Action |
|---|---|
| Right-click | Opens the context menu at the pointer position. |
ArrowDown / ArrowUp | Navigate through menu items. Focus wraps from last to first and vice versa. |
Enter / Space | Activate the focused item, or toggle a checkbox/radio item. |
Escape | Close the menu. If a sub-menu is open, closes only the sub-menu first. |
ArrowRight | Opens a sub-menu when the focused item is a sub-menu trigger. |
ArrowLeft | Closes the currently open sub-menu and returns focus to its trigger in the parent menu. |
Home / End | Jump to the first or last item in the current menu level. |
| Type-ahead | Typing a character moves focus to the next item whose label starts with that character. |
ARIA roles
role="menu"onContextMenuContentandContextMenuSubContent.role="menuitem"on standardContextMenuItemelements.role="menuitemcheckbox"onContextMenuCheckboxItem, witharia-checkedreflecting the current state.role="menuitemradio"onContextMenuRadioItem, witharia-checkedon the selected item.role="separator"onContextMenuSeparatorto divide groups of related items.role="group"onContextMenuGroupwith an optionalaria-labelto label a section.- Sub-menu triggers have
aria-haspopup="menu"andaria-expandedindicating whether the sub-menu is open.
Screen readers
- When the menu opens, focus moves to the first item and the screen reader announces it along with its role (e.g., "Back, menu item").
- Checkbox and radio items announce their checked state (e.g., "Show Bookmarks Bar, menu item checkbox, checked").
- Disabled items are announced as "dimmed" or "unavailable" depending on the screen reader.
- Keyboard shortcuts rendered with
ContextMenuShortcutare announced as part of the item label. - Sub-menu triggers are announced with an indication that they open a sub-menu (e.g., "Share, sub-menu").
Touch / pointer interaction
- On touch devices, the context menu is triggered by a long-press gesture (approximately 500ms).
- The component detects pointer type internally -- mouse uses right-click, touch uses long-press.
- Once open, items are activated by tapping. There is no hover state on touch.
- Tapping outside the menu dismisses it.
Native (React Native)
- Trigger activates on long-press (500ms).
- Uses
Modalfor the overlay to ensure the menu renders above all other content. accessibilityRole="menu"on the content container.- Each item has
accessibilityRole="menuitem". - Checkbox items announce their state via
accessibilityState={{ checked }}.
Best practices
- Ensure all important actions exposed in a context menu are also reachable through other visible UI controls. Context menus are a power-user shortcut, not the primary interface.
- Group related items with
ContextMenuSeparatorandContextMenuLabelto improve scannability. - Use the
destructivevariant for dangerous or irreversible actions so they are visually distinct. - Keep menus shallow -- avoid nesting sub-menus more than one level deep.
- Include keyboard shortcut hints via
ContextMenuShortcutso users can learn direct shortcuts over time. - Disabled items should remain visible (not removed) so users understand the full set of available actions.