Merge pull request #379 from vuejs-jp/fix/hamburger-menu-a11y

Fix/ replace hamburger menu with dialog element

Author: genj11

apps/web/app/components/GlobalHeader.vue

@@ -17,6 +17,7 @@ const onSwitchLocale = () => {
 const { width } = useWindowSize()
 const { orientation } = useScreenOrientation()
 const shouldShowSpHeader = ref()
+const dialogRef = ref<HTMLDialogElement>()
 onMounted(() => {
   shouldShowSpHeader.value = width.value <= 1200
 })
@@ -27,6 +28,11 @@ watch([width, orientation], () => {
 const showMenu = ref(false)
 
 const toggleMenu = () => {
+  if (showMenu.value) {
+    dialogRef.value!.close()
+  } else {
+    dialogRef.value!.show()
+  }
   showMenu.value = !showMenu.value
 }
 
@@ -48,26 +54,31 @@ const getAnchorPath = computed(
         class="navigation-mobile-toggle"
         name="menu"
         :class="{ 'isOpened': showMenu }"
+        :aria-expanded="showMenu"
+        aria-controls="navigation-mobile-menu-trigger"
+        :aria-label="showMenu ? 'メニューを閉じる' : 'メニューを開く'"
         @click="toggleMenu"
       >
         <span /><span /><span />
       </button>
       <!-- <VFIcon name="menu" color="vue-blue" can-hover @click="toggleMenu" /> -->
     </div>
     <!-- hamburger-menu -->
-    <Transition name="slide-down">
-      <div v-show="showMenu" class="navigation-mobile-menu">
-        <div>
-          <ul>
-            <li v-for="link in navLinks" :key="link.anchor">
-              <nuxt-link :to="getAnchorPath(link.anchor)" @click="toggleMenu">
-                <VFTypography variant="heading/200" color="vue-blue">{{ link.text }}</VFTypography>
-              </nuxt-link>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </Transition>
+    <dialog id="navigation-mobile-menu-trigger" ref="dialogRef" class="navigation-mobile-menu">
+      <ul>
+        <li v-for="(link, index) in navLinks" :key="link.anchor">
+          <!-- eslint-disable vuejs-accessibility/no-autofocus -->
+          <nuxt-link
+            :to="getAnchorPath(link.anchor)"
+            :autofocus="index === 0 && true"
+            @click="toggleMenu"
+          >
+            <!-- eslint-enable vuejs-accessibility/no-autofocus -->
+            <VFTypography variant="heading/200" color="vue-blue">{{ link.text }}</VFTypography>
+          </nuxt-link>
+        </li>
+      </ul>
+    </dialog>
   </VFSpHeader>
   <VFHeader v-else>
     <div class="navigation-pc">
@@ -95,6 +106,7 @@ const getAnchorPath = computed(
   align-items: center;
   gap: calc(var(--unit) * 2);
   margin-right: 27px;
+  z-index: 10;
 }
 
 .navigation-mobile-menu {
@@ -104,9 +116,23 @@ const getAnchorPath = computed(
   width: 100vw;
   text-align: center;
   background-color: var(--color-white);
+  padding: calc(var(--unit) * 5) 0;
+  border: 0;
+  transition:
+    translate 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
+  z-index: 1;
+
+  &[open] {
+    translate: 0 0;
+
+    @starting-style {
+      translate: 0 -100dvh;
+    }
+  }
 
-  & > div {
-    padding: calc(var(--unit) * 5) 0;
+  &:not([open]) {
+    translate: 0 -100dvh;
   }
 
   ul {

packages/ui/components/common/SpHeader.vue

@@ -39,9 +39,20 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-white);
+    z-index: 5;
+  }
 }
 .link {
   line-height: 0;
+  z-index: 10;
 }
 .logo {
   height: 32px;