ホバー時に開くアクセシビリティに配慮したドロップダウンメニュー

dropdown.js

export default function initializeDropdown() {
  const dropdownTriggers = document.querySelectorAll(".js-dropdownTrigger")
  const dropdownLists = document.querySelectorAll(".js-dropdownList")

  dropdownTriggers.forEach((trigger, index) => {
    const dropdownList = dropdownLists[index]

    // ガード処理
    if (!trigger || !dropdownList) return

    const toggleAriaExpanded = (isExpanded) => {
      trigger.setAttribute("aria-expanded", isExpanded)
    }

    const toggleDropdown = (action) => {
      toggleAriaExpanded(action === "add")
    }

    const handleMouseEnter = () => {
      toggleDropdown("add")
    }

    const handleMouseLeave = () => {
      toggleDropdown("remove")
    }

    const handleFocusOut = (event) => {
      if (
        !dropdownList.contains(event.relatedTarget) &&
        !trigger.contains(event.relatedTarget)
      ) {
        toggleDropdown("remove")
      }
    }

    // ホバーした時の処理
    trigger.addEventListener("mouseenter", handleMouseEnter)
    trigger.addEventListener("mouseleave", handleMouseLeave)
    dropdownList.addEventListener("mouseenter", handleMouseEnter)
    dropdownList.addEventListener("mouseleave", handleMouseLeave)

    // フォーカスが当たった時と外れたときの処理
    trigger.addEventListener("focus", handleMouseEnter)
    dropdownList.addEventListener("focusout", handleFocusOut)

    // escキー押下時の処理
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        toggleDropdown("remove")
      }
    })
  })
}

index.html

    <nav class="headerNav" aria-label="グローバルナビゲーション">
      <a href="/" class="headerNav__link">Home</a>
      <div class="headerNav__dropdownWrapper">
        <button type="button" aria-controls="headerDropdown" aria-label="サービスを表示" class="headerNav__link headerNav__dropdown js-dropdownTrigger">
          Services
        </button>
        <ul id="headerDropdown" class="headerDropdown js-dropdownList">
          <li class="headerDropdown__item js-dropdownListItem">
            <a class="headerDropdown__link" href="" aria-current="">Websites</a>
          </li>
          <li class="headerDropdown__item js-dropdownListItem">
            <a class="headerDropdown__link" href="">UI/UX</a>
          </li>
          <li class="headerDropdown__item js-dropdownListItem">
            <a class="headerDropdown__link" href="">eCommerce</a>
          </li>
        </ul>
      </div>
    </nav>

• エンターおよびスペースキーでドロップダウンメニューが表示される。
• ドロップダウンメニューの表示／非表示にあわせ、aria-expanded属性の値が切り替わる。
• キーボードでフォーカスおよびフォーカスアウトした際も表示・非表示が切り替わる。
• escキー押下でドロップダウンメニューが閉じる。