Context menu

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-context" tabindex="0" role="group"
     data-menu-context="file-menu" aria-haspopup="menu" aria-keyshortcuts="Shift+F10"
     aria-label="Score.wav, 3.4 MB. Context menu: Shift F10.">
  Score.wav
</div>

<!-- The card is the menu part's own -->
<div class="tui-menu" id="file-menu" popover role="menu" aria-label="Score.wav">
  <button role="menuitem" type="button" tabindex="-1">Open<kbd>Enter</kbd></button>
  <button role="menuitem" type="button" tabindex="-1">Rename<kbd>F2</kbd></button>
  <div role="separator"></div>
  <button class="tui-menu__item--danger" role="menuitem" type="button" tabindex="-1">Delete<kbd>Del</kbd></button>
</div>

import '/kit/kit.mjs';   // right-click, Shift+F10, the Menu key and the long press

// The lines act as any menu's do: aria-checked is already updated when this runs.
document.getElementById('file-menu').addEventListener('click', (e) => {
  const line = e.target.closest('[role^="menuitem"]');
  if (line) run(line.textContent.trim());
});

Needs kit.css and kit.mjs. How to install the kit.

• The same actions must be reachable without the gesture: a context menu is a shortcut, never the only door. Put them in a visible key or a toolbar too.
• The target is focusable and its label says how to open the menu; aria-keyshortcuts and aria-haspopup="menu" say it to assistive technology.
• Shift F10 and the Menu key open the card at the target with its first line focused. Escape, or choosing a line, puts focus back on the target.
• The long press is for touch only; it is cancelled by a scroll, so it never fights the page, and it does not also fire the target’s click.
• The card is the menu part’s, so it has the same roles, arrow keys, type-ahead and states, and disabled lines stay in place.
• The sunk look while the card is out is a second cue for which target the menu belongs to.

The card and the whole keyboard are the menu’s: menu.mjs already opens any data-menu-context target from right-click, Shift F10 and the Menu key, and returns focus to it. context-menu.mjs adds the gesture a touch screen lacks. A pointer that is not a mouse starts a half-second timer on the target, which sinks into its recess as time passes; a move past 10px, a lift or a scroll clears it; if it runs out, the menu opens at the finger and the lift that follows is not taken as a click. Android reports the same press as a contextmenu event, which the module quietly absorbs so the card opens once.