メガメニューで下層ナビにフォーカス移動する時の注意点

メガメニューの実装をした際、フォーカス移動に対応しようとして詰まった点をメモ。

サンプルコード

例として、簡易的なメガメニューを実装してみます。

<header>
  <nav class="gnav">
    <ul class="gnav__list">
      <li class="gnav__item">
        <a href="#" class="gnav__link">ナビA</a>
        <ul class="subnav">
          <li class="subnav__item">
            <a href="#" class="subnav__link">下層ナビA1</a>
          </li>
          <li class="subnav__item">
            <a href="#" class="subnav__link">下層ナビA2</a>
          </li>
          <li class="subnav__item">
            <a href="#" class="subnav__link">下層ナビA3</a>
          </li>
          <li class="subnav__item">
            <a href="#" class="subnav__link">下層ナビA4</a>
          </li>
          <li class="subnav__item">
            <a href="#" class="subnav__link">下層ナビA5</a>
          </li>
        </ul>
      </li>
      ～ 略 ～
    </ul>
  </nav>
</header>

ホバーで下層ナビが開くようにします。

.gnav {
  position: relative;
}
.gnav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: gray;
}
.gnav__item {
  border-left: 1px solid lightgray;
}
.gnav__link {
  display: block;
  padding: 10px;
  text-align: center;
  color: white;
}
.subnav {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: pink;
}
.gnav__item:hover .subnav {
  display: flex;
}
.subnav__item {}
.subnav__link {
  display: block;
  padding: 5px;
}

これで簡易的なメガメニューが実装できました。
メガメニューのデモページ

次にフォーカス移動で下層ナビが開くようにしてみます。
最初にうまくいかなかった例です。

～ 略 ～
.gnav__item:hover .subnav,
.gnav__link:focus + .subnav,
.subnav:has(:focus) {
	display: flex;
}

.gnav__itemにフォーカスが当たったときと下層ナビ内にフォーカスがある場合に開くように設定したのですが、フォーカス移動時に閉じてしまいます。
フォーカス移動対応のうまくいかなかった場合のデモページ

原因としてはフォーカス移動のためにフォーカスが外れた時点で下層ナビが非表示になってしまい、下層ナビ内にフォーカスが移動できないためのようです。
対策として:focus-withinを使う形にすると、下層ナビにもフォーカスが移動できるようになりました。

.gnav__item:hover .subnav,
.gnav__item:focus-within .subnav {
	display: flex;
}

フォーカス移動対応のデモページ