Доступное меню ящика с помощью вкладок

Question

Как разрешить пользователю переходить через панель приложений сразу после открытия меню. В меню, похожем на следующий пример (но с ящиком справа):

Теперь я хочу, чтобы пользователь мог переходить через приложение и сразу после его открытия фокусируется на меню.

Желаемый результат:

• Пользователь нажимает вкладку
• [Фокус на кнопке «открыть меню»]
• Пользователь нажимает клавишу пробела
• [Меню открывается]
• Пользователь снова нажимает вкладку
• [Фокус на «закрыть» значок меню]
• Пользователь снова нажимает вкладку
• [Фокус на первом элементе меню] ( ура! )

Фактический результат:

• Пользователь нажимает вкладку
• [Фокус находится на кнопке «открыть меню»]
• Пользователь нажимает клавишу пробела
• [Открывается меню]
• Пользователь снова нажимает вкладку
• [Фокус находится на первой кнопке («это какая-то кнопка») на странице] ( О нет :(. вместо этого следует перейти к навигации в ящике ) * 10 51 *

Пример кода

Для этого примера кода я выполняю шаги, описанные в «Пример кнопки меню навигации» от w3.org.

/* this JS code is arbitrary and for demonstration purpose. */
/* It is most likely a HTML solution */
const buttonOpenMenu = document.getElementById('open-menu');
const buttonCloseMenu = document.getElementById('close-menu');
const drawer = document.getElementById('drawer');

buttonOpenMenu.onclick = function () {
	drawer.classList.add('open');
    drawer.setAttribute("aria-expanded", true);
}

buttonCloseMenu.onclick = function () {
	drawer.classList.remove('open');
    drawer.setAttribute("aria-expanded", false);
}

/* CSS also arbitrary */
main {
  flex-grow: 1;
  width: 100%;
}

#drawer {
  width: 240px;
  flex: 0 0 auto;
  top: 0;
  height: 100%;
  position: fixed;
  left: auto;
  right: -240px;
}

#drawer.open {
  right: 0;
}

<main>
  <header>
    <button
      id="open-menu"
      aria-haspopup="true"
      aria-controls="drawer"
    >
      open menu
    </button>
  </header>
  <h1>
    Title
  </h1>
  <section>
    <button>
      this is some button
    </button>
    <p>Some body content</p>
    <button>
      another button
    </button>
  </section>
</main>
<div id="drawer" aria-expanded="false">
   <button id="close-menu">
     close menu
  </button>
  <nav aria-labelledby="open-menu" role="menu">
    <ul>
      <li><a href="/" role="menuitem">Menu item 1</a></li>
      <li><a href="/" role="menuitem">Menu item 2</a></li>
    </ul>
  </nav>
</div>

Answer 1

Причина, по которой ваш порядок табуляции не работает так, как вы хотите, заключается в том, что он не отражает порядок DOM. Элементы будут получать фокус в том порядке, в котором они появляются в разметке, если вы не установите фокус.

Это можно исправить, установив фокус при открытии меню с помощью HTMLElement.focus () .

HTML:

Добавьте атрибуты id и tabindex к элементу nav.

<nav id="nav" aria-labelledby="open-menu" role="menu" tabindex="0">

JAVASCRIPT:

Установите фокус на элемент nav, используя document.getElementById.

buttonOpenMenu.onclick = function () {
    drawer.classList.add('open');
    drawer.setAttribute("aria-expanded", true);
    document.getElementById("nav").focus();
}

См. Рабочий пример здесь: https://jsfiddle.net/25nzpo76/