teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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>