Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Context Menu
  5. Accessibility

Context menu

Accessibility

ContextMenu from @prepared911/ui/context-menu is a Radix Context Menu opened by secondary-click or the platform context-menu key. The primitive handles menu semantics, focus trap, and keyboard flow; your job is to ensure every action is also reachable through a visible, focusable path.
What the component handles
  • Menu semantics. Open surface exposes role="menu"; items expose role="menuitem", menuitemcheckbox, or menuitemradio.
  • Focus management. Focus moves to the menu on open and returns to the trigger on close.
  • Keyboard flow. Arrow keys navigate items; Escape closes; type-ahead jumps to items by first letter.
  • Submenu handling. Submenus open on arrow-right and on hover with safe pointer tolerance.
What you must provide
  • A visible path to the same actions. Context menus are power-user shortcuts; every action inside must also live on a toolbar, button, or primary menu. Never gate actions behind context-menu-only access.
  • Discoverable keyboard entry. On macOS, pair the right-click target with Ctrl+click or a dedicated keyboard shortcut (Shift+F10); on Windows, rely on the context-menu key. Document the shortcut where relevant.
  • Accessible item names. Each item needs a readable name—avoid icon-only items unless the surrounding context is clear and aria-label is set.
Keyboard behavior
  • Shift+F10 (or the context-menu key) opens the menu for the focused element.
  • Arrow Up / Down move between items.
  • Arrow Right opens a submenu; Arrow Left returns to the parent menu.
  • Enter / Space activate; Escape closes.
  • Type-ahead jumps to items whose label starts with the typed character.
When sortable is enabled:
  • Space or Enter on the drag handle (or row): Grab for keyboard reorder; drop when finished
  • Arrow Up / Arrow Down: Move the grabbed item
  • Escape: Cancel reorder and restore the previous order
Live region announcements describe grab, move, drop, and cancel.
Semantics and roles
  • role="menu" on the content panel.
  • Items expose role="menuitem", menuitemcheckbox, or menuitemradio with aria-checked where applicable.
  • Separators use role="separator".
Known caveats
  • Touch discoverability. Long-press for context menu is not universal. Always provide a visible button or overflow menu on touch-dominant surfaces.
  • Destructive items. Guard destructive items with a clear label and tone (color and icon)—Radix does not enforce a confirm step.
Previous
Context Menu / API and Development
Next
Copy Button / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats