[HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu will show up. In the post,  we will see how to achieve it by using JS+css, we will also see how to use 'nextElementSibling' to only focus the elemnt has menu popup.

 

HTML: Highlighted part is the submenue

    <nav>
      <ul class="menu">
        <li class="menu__item">
          <a href="/" class="menu__link">About</a>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">News</a>
          <ul class="submenu">
            <li class="submenu__item">
              <a href="/" class="submenu__link">Press Releases</a>
            </li>
            <li class="submenu__item">
              <a href="/" class="submenu__link">Blog</a>
            </li>
          </ul>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">Contact</a>
        </li>
      </ul>
    </nav>

 

JS: We want to add 'focus' class when element get focused, in the meanwhile, we only apply focus class to the element which has 'nextElementSibling' which is <ul class="submenu">

const topMenuLinks = document.querySelectorAll(".menu__link");

topMenuLinks.forEach(link => {
  if (link.nextElementSibling) {
    link.addEventListener("focus", function() {
      this.parentElement.classList.add("focus");
    });
  }
});

 

CSS:

.menu {
  display: flex;
  list-style: none;

  &__item {
    position: relative;

    &:hover .submenu,
    &.focus .submenu {
      transform: scaleY(1);
    }
  }