Menu

Contract

Accessibility

Anatomy

The label of a group, the divider and the hotkey are three different jobs, and confusing them is expensive.

<div class="inst-menu" role="menu">
  <span class="inst-menu-label">Run #4127</span>
  <button class="inst-menu-item" type="button" role="menuitem">Restart
    <span class="inst-menu-shortcut"><kbd>R</kbd></span></button>
  <span class="inst-menu-sep"></span>
  <button class="inst-menu-item" type="button" role="menuitem">Export</button>
</div>

A hotkey is pushed to the far edge and is quieter than the label: it is a hint rather than a second name of the item.

An item is a <button> or an <a>, by the work. An action is a button, a transition to an address a link: a button leading to an address breaks the middle click and "open in a new tab".

States

<div class="inst-popover" popover id="menu-kinds">
  <div class="inst-menu" role="menu">
    <span class="inst-menu-label">Kind</span>
    <button class="inst-menu-item" type="button" role="menuitem">Ordinary</button>
    <button class="inst-menu-item" type="button" role="menuitem" aria-checked="true">Checked</button>
    <a class="inst-menu-item" href="#menu" role="menuitem" aria-current="page">The current address</a>
    <span class="inst-menu-sep"></span>
    <button class="inst-menu-item" type="button" role="menuitem" data-tone="error">Destructive</button>
    <button class="inst-menu-item" type="button" role="menuitem" aria-disabled="true">Unavailable</button>
  </div>
</div>
<button class="inst-btn" type="button" popovertarget="menu-kinds">Kinds of item</button>

An item with an explanation. The .inst-menu-item-main wrapper makes the item two lines by itself — there is no modifier for that, because it is not a choice of the author of the markup but a consequence of what is inside. A menu of choice with no explanation turns into a list of code words.

<div class="inst-popover" popover id="menu-model">
  <div class="inst-menu" role="menu">
    <button class="inst-menu-item" type="button" role="menuitem">
      <span class="inst-menu-item-main">Fast
        <span class="inst-menu-item-sub">For short runs</span></span></button>
    <button class="inst-menu-item" type="button" role="menuitem" aria-checked="true">
      <span class="inst-menu-item-main">Full
        <span class="inst-menu-item-sub">For complex tasks</span></span></button>
    <button class="inst-menu-item" type="button" role="menuitem">
      <span class="inst-menu-item-main">Thrifty
        <span class="inst-menu-item-sub">Cheapest of all on everyday work</span></span></button>
  </div>
</div>
<button class="inst-btn" type="button" popovertarget="menu-model">Run mode</button>

JS

Include the module once per page — there is no need to initialise the components one by one, instrument.js works by delegation and sees nodes that arrived later.

<script type="module" src="instrument.js"></script>

What instrument.js does

The example in the header is live: open the menu and go through the items with the arrows.

Arrows between the items, Home, End, a traversal that wraps and a roving tabindex. An item has no selection and will have none: a menu item is an action rather than a choice, and an aria-selected on it would lie to assistive technology.

Opening, closing, returning the focus and closing on Escape are taken on by the Popover API — they call for no script.

Events

There are none of its own. An item is a <button>, and its click works the same way as everywhere.

menu.addEventListener('click', (e) => {
  const item = e.target.closest('[role="menuitem"]');
  if (!item) return;
  menu.hidePopover();
  run(item.dataset.action);
});

The menu is closed before the action: the action may open a modal, and the menu would be left hanging over it.

API

Related

ButtonButton groupSelectCascaderPopoverNavigationToolbar