feat(VerticalNavigation): improve accessibility (#948)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
nuxt · Dec 26, 2023 · 29e64ca · 29e64ca · vercel · Dec 26, 2023
1 parent 556ee0d
commit 29e64ca
Showing 1 changed file with 41 additions and 34 deletions.
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -1,39 +1,46 @@
 <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', 'labelClass', '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="twMerge(twJoin(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="twMerge(ui.label, link.labelClass)">{{ 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', 'labelClass', '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="twMerge(twJoin(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="twMerge(ui.label, link.labelClass)">
+              <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>