From 23e6e9c10b4f9cb9f074ebb4f56d2d99acac9097 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 5 Aug 2020 10:25:52 +0200 Subject: [PATCH] feat(router-link): add ariaCurrentValue prop --- src/RouterLink.ts | 38 ++++++++++++++++++++++++++++++++++++-- vetur/attributes.json | 4 ++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/RouterLink.ts b/src/RouterLink.ts index c5d3d411..03ba7170 100644 --- a/src/RouterLink.ts +++ b/src/RouterLink.ts @@ -15,13 +15,41 @@ import { RouteRecord } from './matcher/types' import { assign } from './utils' export interface RouterLinkOptions { + /** + * Location the link should navigate to when clicked on. + */ to: RouteLocationRaw - // TODO: refactor using extra options allowed in router.push. Needs RFC + /** + * Calls `router.replace` instead of `router.push`. + */ replace?: boolean + // TODO: refactor using extra options allowed in router.push. Needs RFC } export interface RouterLinkProps extends RouterLinkOptions { + /** + * Whether RouterLink should not wrap its content in an `a` tag. + */ custom?: boolean + /** + * Class to apply when the link is active + */ + activeClass?: string + /** + * Class to apply when the link is exact active + */ + exactActiveClass?: string + /** + * Value passed to the attribute `aria-current` when the link is exact active. Defaults to "page" + */ + ariaCurrentValue?: + | 'page' + | 'step' + | 'location' + | 'date' + | 'time' + | 'true' + | 'false' } type UseLinkOptions = VueUseOptions @@ -101,6 +129,10 @@ export const RouterLinkImpl = defineComponent({ // inactiveClass: String, exactActiveClass: String, custom: Boolean, + ariaCurrentValue: { + type: String as PropType, + default: 'page', + }, }, setup(props, { slots, attrs }) { @@ -133,7 +165,9 @@ export const RouterLinkImpl = defineComponent({ 'a', assign( { - 'aria-current': link.isExactActive ? 'page' : null, + 'aria-current': link.isExactActive + ? props.ariaCurrentValue + : null, onClick: link.navigate, href: link.href, }, diff --git a/vetur/attributes.json b/vetur/attributes.json index 355b93f2..c2a5eb1f 100644 --- a/vetur/attributes.json +++ b/vetur/attributes.json @@ -20,5 +20,9 @@ "exact-active-class": { "type": "string", "description": "Configure the active CSS class applied when the link is exactly active. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option." + }, + "aria-current-value": { + "options": ["page", "step", "location", "date", "time", "true", "false"], + "description": "Configure the value of `aria-current` when the link is active with exact match. It must be one of the [allowed values for `aria-current`](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the default of `page` should be the best fit." } } -- 2.47.2