Меню

Использование

<div class="inst-popover inst-popover--anchored" id="menu-1" popover>
  <div class="inst-menu" role="menu">
    <button class="inst-menu-item" type="button" role="menuitem">Перезапустить</button>
  </div>
</div>

Когда использовать

Устройство

Подпись группы, разделитель и горячая клавиша — три разные работы, и путать их дорого.

<div class="inst-menu" role="menu">
  <span class="inst-menu-label">Прогон #4127</span>
  <button class="inst-menu-item" type="button" role="menuitem">Перезапустить
    <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">Экспорт</button>
</div>

Горячая клавиша прижимается к дальнему краю и тише подписи: она подсказка, а не второе название пункта.

Пункт — это <button> или <a>, смотря по работе. Действие — кнопка, переход по адресу — ссылка: кнопка, ведущая на адрес, ломает средний клик и «открыть в новой вкладке».

Состояния

<div class="inst-popover" popover id="menu-kinds">
  <div class="inst-menu" role="menu">
    <span class="inst-menu-label">Вид</span>
    <button class="inst-menu-item" type="button" role="menuitem">Обычный</button>
    <button class="inst-menu-item" type="button" role="menuitem" aria-checked="true">Отмеченный</button>
    <a class="inst-menu-item" href="#menu" role="menuitem" aria-current="page">Текущий адрес</a>
    <span class="inst-menu-sep"></span>
    <button class="inst-menu-item" type="button" role="menuitem" data-tone="error">Разрушительный</button>
    <button class="inst-menu-item" type="button" role="menuitem" aria-disabled="true">Недоступный</button>
  </div>
</div>
<button class="inst-btn" type="button" popovertarget="menu-kinds">Виды пунктов</button>

JS

Подключите модуль один раз на страницу — инициализировать компоненты по отдельности не нужно, кит работает делегированием и видит узлы, пришедшие позже.

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

Что делает кит

Пример в шапке живой: откройте меню и пройдите по пунктам стрелками.

Стрелки между пунктами, Home, End, перебор по кругу и бегущий tabindex. Выделения у пункта нет и не будет: пункт меню — действие, а не выбор, и aria-selected на нём соврал бы вспомогательной технологии.

Открытие, закрытие, возврат фокуса и закрытие по Escape берёт на себя Popover API — скрипта они не требуют.

События

Своих нет. Пункт — это <button>, и его click работает так же, как везде.

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

Меню закрывается до действия: действие может открыть модалку, и меню осталось бы висеть поверх неё.

Правила

Доступность

API

Связанное

Поповер Кнопка Селект Тулбар Иконка