mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-28 13:28:52 +03:00
fix(a11y): make the bottom menu button focusable and navigable with a11y label (#2247)
This commit is contained in:
parent
5782c326b2
commit
cc89692d80
1 changed files with 5 additions and 5 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue