ContextMenu from @prepared911/ui-core 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.
- 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.
- 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.
role="menu" on the content panel.- Items expose
role="menuitem", menuitemcheckbox, or menuitemradio with aria-checked where applicable.
- Separators use
role="separator".
- 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.
