From cc89692d80be9be011852122d184e35adbc386e8 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Fri, 21 Jul 2023 19:17:32 +0900
Subject: [PATCH] fix(a11y): make the bottom menu button focusable and
 navigable with a11y label (#2247)

---
 components/nav/NavBottom.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index 4b663fbd..c26cf348 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -43,14 +43,14 @@ const { notifications } = useNotifications()
       </NuxtLink>
     </template>
     <NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
-      <label
+      <button
         flex items-center place-content-center h-full flex-1 class="select-none"
         :class="show ? '!text-primary' : ''"
+        aria-label="More menu"
+        @click="toggleVisible"
       >
-        <input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible">
-        <span v-show="show" i-ri:close-fill />
-        <span v-show="!show" i-ri:more-fill />
-      </label>
+        <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
+      </button>
     </NavBottomMoreMenu>
   </nav>
 </template>