Skip to content

Commit

Permalink
chore(VerticalNavigation): improve accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
neilmispelaar committed Nov 11, 2023
1 parent 0eb8d8f commit 0b0f11c
Showing 1 changed file with 44 additions and 34 deletions.
78 changes: 44 additions & 34 deletions src/runtime/components/navigation/VerticalNavigation.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,49 @@
<template>
<nav :class="ui.wrapper" v-bind="attrs">
<ULink
v-for="(link, index) of links"
v-slot="{ isActive }"
:key="index"
v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
:class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
:active-class="ui.active"
:inactive-class="ui.inactive"
@click="link.click"
@keyup.enter="$event.target.blur()"
>
<slot name="avatar" :link="link" :is-active="isActive">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.avatar.size, ...link.avatar }"
:class="[ui.avatar.base]"
/>
</slot>
<slot name="icon" :link="link" :is-active="isActive">
<UIcon
v-if="link.icon"
:name="link.icon"
:class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
/>
</slot>
<slot :link="link" :is-active="isActive">
<span v-if="link.label" :class="ui.label">{{ link.label }}</span>
</slot>
<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>
<ul>
<li
v-for="(link, index) of links"
:key="index"
>
<ULink
v-slot="{ isActive }"
v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
:class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
:active-class="ui.active"
:inactive-class="ui.inactive"
@click="link.click"
@keyup.enter="$event.target.blur()"
>
<slot name="avatar" :link="link" :is-active="isActive">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.avatar.size, ...link.avatar }"
:class="[ui.avatar.base]"
/>
</slot>
<slot name="icon" :link="link" :is-active="isActive">
<UIcon
v-if="link.icon"
:name="link.icon"
:class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
/>
</slot>
<slot :link="link" :is-active="isActive">
<span v-if="link.label" :class="ui.label">
<span v-if="isActive" class="sr-only">
Current page:
</span>
{{ link.label }}
</span>
</slot>
<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>
</template>

Expand Down

0 comments on commit 0b0f11c

Please sign in to comment.