Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Sep 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2a991e
fix(a11y): add `aria-current="page"` attribute to links
paul-thebaud Sep 2, 2024
8aec105
refactor: reusable linkProps
KaelWD Sep 3, 2024
d028058
kebab-case
KaelWD Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VBtn/VBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }

Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VCard/VCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VChip/VChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }

Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VList/VListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }

Expand Down
27 changes: 18 additions & 9 deletions packages/vuetify/src/composables/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import {
computed,
nextTick,
onScopeDispose,
onScopeDispose, reactive,
resolveDynamicComponent,
toRef,
} from 'vue'
Expand Down Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -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,
ariaCurrent: computed(() => isActive.value ? 'page' : undefined),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-current should use kebab case name, because vue 3 won't concert it automatically.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot_20240903_171939

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it depends on the attribute, HTMLElement.ariaCurrent exists so it works but others might not: vuejs/core#5477

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Chrome automatically converts attributes, but Firefox doesn't. There is an open issue about it on vuetify and vue repos.

}),
href: computed(() => props.to ? link.value?.route.value.href : props.href),
}
}

Expand Down