mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-30 15:58:06 +09:00
Code

fix(a11y): make the bottom menu button focusable and navigable with a11y label (#2247)

Browse Source
This commit is contained in:
TAKAHASHI Shuuji 2023-07-21 19:17:32 +09:00 committed by GitHub
parent 5782c326b2
commit cc89692d80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/nav/NavBottom.vue
View File

@ -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>