MiHCM
overlay/@mihcm/ui·v0.21.0·stable

ContextMenu

Right-click context menu powered by Radix. Sub-menus, checkboxes, radio items, keyboard shortcuts.

ContextMenu -- Accessibility

Keyboard

KeyAction
Right-clickOpens the context menu at the pointer position.
ArrowDown / ArrowUpNavigate through menu items. Focus wraps from last to first and vice versa.
Enter / SpaceActivate the focused item, or toggle a checkbox/radio item.
EscapeClose the menu. If a sub-menu is open, closes only the sub-menu first.
ArrowRightOpens a sub-menu when the focused item is a sub-menu trigger.
ArrowLeftCloses the currently open sub-menu and returns focus to its trigger in the parent menu.
Home / EndJump to the first or last item in the current menu level.
Type-aheadTyping a character moves focus to the next item whose label starts with that character.

ARIA roles

  • role="menu" on ContextMenuContent and ContextMenuSubContent.
  • role="menuitem" on standard ContextMenuItem elements.
  • role="menuitemcheckbox" on ContextMenuCheckboxItem, with aria-checked reflecting the current state.
  • role="menuitemradio" on ContextMenuRadioItem, with aria-checked on the selected item.
  • role="separator" on ContextMenuSeparator to divide groups of related items.
  • role="group" on ContextMenuGroup with an optional aria-label to label a section.
  • Sub-menu triggers have aria-haspopup="menu" and aria-expanded indicating 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 ContextMenuShortcut are 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 Modal for 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 ContextMenuSeparator and ContextMenuLabel to improve scannability.
  • Use the destructive variant 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 ContextMenuShortcut so users can learn direct shortcuts over time.
  • Disabled items should remain visible (not removed) so users understand the full set of available actions.