CloudToys/elk
1
0
Fork 0
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> </NuxtLink>
</template> </template>
<NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer> <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" flex items-center place-content-center h-full flex-1 class="select-none"
:class="show ? '!text-primary' : ''" :class="show ? '!text-primary' : ''"
aria-label="More menu"
@click="toggleVisible"
> >
<input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible"> <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
<span v-show="show" i-ri:close-fill /> </button>
<span v-show="!show" i-ri:more-fill />
</label>
</NavBottomMoreMenu> </NavBottomMoreMenu>
</nav> </nav>
</template> </template>