Context Menu

Installation

npx @yolkui/cli add context-menu

Usage

Wrap the area in ContextMenuTrigger: a right click opens the menu at the pointer, a long press (half a second) opens it on a phone or tablet, and Shift+F10 or the Menu key opens it from a focused element inside the area. The menu is Dropdown Menu's, with the same parts under ContextMenu names: icons, ContextMenuShortcut, checkbox and radio items, ContextMenuSub, variant="destructive", inset. The trigger is a div with no style of its own; nothing changes on it while the menu is open, and data-popup-open is there if you want the row lit.

• A long press never selects the text under the finger; on a desktop the text stays selectable.

In a list

Wrap each row in its own ContextMenu, so the menu acts on the row that was clicked. Put the same actions behind a visible button too (a DropdownMenu on an icon button): a context menu is a shortcut, and nothing on a phone says it is there.

Accessibility

The popup is a menu of menuitems, menuitemcheckboxes and menuitemradios, with Dropdown Menu's keys: the arrows move, Home and End go to the ends, typing jumps to an item, ArrowRight opens a submenu and ArrowLeft closes it, Escape closes it and returns focus to where it was.

• Never put an action only in a context menu. Keyboard and touch users rarely find it; keep it reachable another way, as Apple's Human Interface Guidelines ask.
• A keyboard opens it with Shift+F10 or the Menu key, which reach only a focused element: put the trigger around rows that hold a link or button, or give the area tabIndex={0} and a focus style.
• A Mac has no such key: without VoiceOver (which opens it with VO+Shift+M) a keyboard user there cannot open a context menu at all, one more reason to keep its actions in a visible control.
• The shortcut text is hidden from screen readers; the item carries the keys as aria-keyshortcuts instead.