fix(a11y): add aria-current="page" attribute to links (#20413)

closes #20399 Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Sep 3, 2024 · bc647f6 · bc647f6
1 parent 45e0c8a
commit bc647f6
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 15 deletions.
diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
@@ -55,9 +55,8 @@ export const VBreadcrumbsItem = genericComponent()({
           { !link.isLink.value ? slots.default?.() ?? props.title : (
             <a
               class="v-breadcrumbs-item--link"
-              href={ link.href.value }
-              aria-current={ isActive.value ? 'page' : undefined }
               onClick={ link.navigate }
+              { ...link.linkProps }
             >
               { slots.default?.() ?? props.title }
             </a>

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -212,10 +212,10 @@ export const VBtn = genericComponent<VBtnSlots>()({
           ]}
           aria-busy={ props.loading ? true : undefined }
           disabled={ isDisabled.value || undefined }
-          href={ link.href.value }
           tabindex={ props.loading || props.readonly ? -1 : undefined }
           onClick={ onClick }
           value={ valueAttr.value }
+          { ...link.linkProps }
         >
           { genOverlays(true, 'v-btn') }
 

diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -149,10 +149,10 @@ export const VCard = genericComponent<VCardSlots>()({
             locationStyles.value,
             props.style,
           ]}
-          href={ link.href.value }
           onClick={ isClickable.value && link.navigate }
           v-ripple={ isClickable.value && props.ripple }
           tabindex={ props.disabled ? -1 : undefined }
+          { ...link.linkProps }
         >
           { hasImage && (
             <div key="image" class="v-card__image">

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -204,11 +204,11 @@ export const VChip = genericComponent<VChipSlots>()({
           ]}
           disabled={ props.disabled || undefined }
           draggable={ props.draggable }
-          href={ link.href.value }
           tabindex={ isClickable.value ? 0 : undefined }
           onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={[isClickable.value && props.ripple, null]}
+          { ...link.linkProps }
         >
           { genOverlays(isClickable.value, 'v-chip') }
 

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -243,11 +243,11 @@ export const VListItem = genericComponent<VListItemSlots>()({
             dimensionStyles.value,
             props.style,
           ]}
-          href={ link.href.value }
           tabindex={ isClickable.value ? (list ? -2 : 0) : undefined }
           onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
           v-ripple={ isClickable.value && props.ripple }
+          { ...link.linkProps }
         >
           { genOverlays(isClickable.value || isActive.value, 'v-list-item') }
 

diff --git a/packages/vuetify/src/composables/router.tsx b/packages/vuetify/src/composables/router.tsx
@@ -2,7 +2,7 @@
 import {
   computed,
   nextTick,
-  onScopeDispose,
+  onScopeDispose, reactive,
   resolveDynamicComponent,
   toRef,
 } from 'vue'
@@ -47,6 +47,7 @@ export interface UseLink extends Omit<Partial<ReturnType<typeof _useLink>>, 'hre
   isLink: ComputedRef<boolean>
   isClickable: ComputedRef<boolean>
   href: Ref<string | undefined>
+  linkProps: Record<string, string | undefined>
 }
 
 export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['attrs']): UseLink {
@@ -58,10 +59,12 @@ export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['
   })
 
   if (typeof RouterLink === 'string' || !('useLink' in RouterLink)) {
+    const href = toRef(props, 'href')
     return {
       isLink,
       isClickable,
-      href: toRef(props, 'href'),
+      href,
+      linkProps: reactive({ href }),
     }
   }
   // vue-router useLink `to` prop needs to be reactive and useLink will crash if undefined
@@ -74,20 +77,26 @@ export function useLink (props: LinkProps & LinkListeners, attrs: SetupContext['
   // Actual link needs to be undefined when to prop is not used
   const link = computed(() => props.to ? routerLink : undefined)
   const route = useRoute()
+  const isActive = computed(() => {
+    if (!link.value) return false
+    if (!props.exact) return link.value.isActive?.value ?? false
+    if (!route.value) return link.value.isExactActive?.value ?? false
+
+    return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query)
+  })
+  const href = computed(() => props.to ? link.value?.route.value.href : props.href)
 
   return {
     isLink,
     isClickable,
+    isActive,
     route: link.value?.route,
     navigate: link.value?.navigate,
-    isActive: computed(() => {
-      if (!link.value) return false
-      if (!props.exact) return link.value.isActive?.value ?? false
-      if (!route.value) return link.value.isExactActive?.value ?? false
-
-      return link.value.isExactActive?.value && deepEqual(link.value.route.value.query, route.value.query)
+    href,
+    linkProps: reactive({
+      href,
+      'aria-current': computed(() => isActive.value ? 'page' : undefined),
     }),
-    href: computed(() => props.to ? link.value?.route.value.href : props.href),
   }
 }