arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-03 05:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(VerticalNavigation): improve accessibility (#948)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Neil Mispelaar
2023-12-26 07:00:33 -05:00
committed by GitHub
parent 556ee0d9c4
commit 29e64ca963
1 changed files with 41 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -1,39 +1,46 @@
<template> <template>
<nav :class="ui.wrapper" v-bind="attrs"> <nav :class="ui.wrapper" v-bind="attrs">
<ULink <ul>
v-for="(link, index) of links" <li v-for="(link, index) of links" :key="index">
v-slot="{ isActive }" <ULink
:key="index" v-slot="{ isActive }"
v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])" v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
:class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]" :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
:active-class="ui.active" :active-class="ui.active"
:inactive-class="ui.inactive" :inactive-class="ui.inactive"
@click="link.click" @click="link.click"
@keyup.enter="$event.target.blur()" @keyup.enter="$event.target.blur()"
> >
<slot name="avatar" :link="link" :is-active="isActive"> <slot name="avatar" :link="link" :is-active="isActive">
<UAvatar <UAvatar
v-if="link.avatar" v-if="link.avatar"
v-bind="{ size: ui.avatar.size, ...link.avatar }" v-bind="{ size: ui.avatar.size, ...link.avatar }"
:class="[ui.avatar.base]" :class="[ui.avatar.base]"
/> />
</slot> </slot>
<slot name="icon" :link="link" :is-active="isActive"> <slot name="icon" :link="link" :is-active="isActive">
<UIcon <UIcon
v-if="link.icon" v-if="link.icon"
:name="link.icon" :name="link.icon"
:class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)" :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
/> />
</slot> </slot>
<slot :link="link" :is-active="isActive"> <slot :link="link" :is-active="isActive">
<span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span> <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
</slot> <span v-if="isActive" class="sr-only">
<slot name="badge" :link="link" :is-active="isActive"> Current page:
<span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]"> </span>
{{ link.badge }} {{ link.label }}
</span> </span>
</slot> </slot>
</ULink> <slot name="badge" :link="link" :is-active="isActive">
<span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
{{ link.badge }}
</span>
</slot>
</ULink>
</li>
</ul>
</nav> </nav>
</template> </template>