CODEWITHSUNDEEP
focusaccessibilitysubmenu
pjk_ok
pjk_ok

Reputation: 947

Show Focus on Submenu When Using The Tab Key To Tab Though Menu Items

I have a submenu that I would like to have keyboard focus when I tab through it.

When you hover over the 'Design' item in the nav menu below a submenu appears, but how do I get the submenu to appear when I tab through the items using the keyboard tab key? The 'Design' list item doesn't seem to accept focus?

From what I understand this is done with focus:within pseudo class, but I can't get it to work?

Any assistance would be awesome.

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>

Upvotes: 0

Views: 3131

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7741

For menu items to receive keyboard focus the tabindex attribute must be set of the element if it is not a form control or link element. https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

Add tabindex="0" to "Design" item ==> Done :)

The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). 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 not related specifically to Keyboard control accessibility (This is CSS pseudo-class). https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

ARIA menu: https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

Upvotes: 1

Related Questions