Показать фокус на подменю при использовании клавиши «Tab» для вкладки, хотя пункты меню - PullRequest
Новая
       32

Показать фокус на подменю при использовании клавиши «Tab» для вкладки, хотя пункты меню

0 голосов
/ 06 апреля 2020

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

Когда вы наводите курсор мыши на элемент 'Design' в навигационном меню под подменю, но как мне отобразить подменю при переходе по элементам с помощью клавиши на клавиатуре? Элемент списка «Дизайн», кажется, не принимает фокус?

Насколько я понимаю, это делается с focus:within псевдоклассом, но я не могу заставить его работать?

Любая помощь будет потрясающей.

CodePen: https://codepen.io/emilychews/pen/jOPRoqg

li {
  margin: 1rem 0;
}

.design-submenu {
  visibility: hidden;
  opacity: 0;
}

.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu 
{
  visibility: visible;
  opacity: 1;
}
<nav class="n">
  <ul class="nav-menu-items">
    <li class="menu-item menu-item-1"><a href="#" class="nav-link">Latest</a></li>
    <li class="menu-item menu-item-2">Design
      <ul class="submenu design-submenu">
        <li class="submenu-item"><a href="#" class="nav-link">Illustration</a></li>
        <li class="submenu-item"><a href="#" class="nav-link">Graphic Design</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-3"><a href="#" class="nav-link">Development</a></li>
    <li class="menu-item menu-item-4"><a href="#" class="nav-link">Marketing</a></li>
  </ul>
</nav>

1 Ответ

1 голос
/ 10 апреля 2020

Для пунктов меню, чтобы получить фокус клавиатуры, атрибут tabindex должен быть установлен элемента, если он не является элементом управления формы или элементом ссылки. https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

Добавить tabindex="0" к элементу «Дизайн» ==> Готово:)

Глобальный атрибут tabindex указывает, что его элемент может быть сфокусирован, и где он участвует в последовательной навигации по клавиатуре (обычно с клавишей Tab, отсюда и название). https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

li {
  margin: 1rem 0;
}

.design-submenu {
  visibility: hidden;
  opacity: 0;
}

.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu 
{
  visibility: visible;
  opacity: 1;
}
<nav class="n">
  <ul class="nav-menu-items">
    <li class="menu-item menu-item-1"><a href="#" class="nav-link">Latest</a></li>
    <li class="menu-item menu-item-2"><span tabindex="0">Design</span>
      <ul class="submenu design-submenu">
        <li class="submenu-item"><a href="#" class="nav-link">Illustration</a></li>
        <li class="submenu-item"><a href="#" class="nav-link">Graphic Design</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-3"><a href="#" class="nav-link">Development</a></li>
    <li class="menu-item menu-item-4"><a href="#" class="nav-link">Marketing</a></li>
  </ul>
</nav>

focus:within не относится конкретно к доступности управления с клавиатуры (это псевдокласс CSS). https://developer.mozilla.org/en-US/docs/Web/CSS/: фокусировка внутри

Меню ARIA: https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

...