feat(router-link): add ariaCurrentValue prop

Author: posva

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<RouterLinkOptions>
@@ -101,6 +129,10 @@ export const RouterLinkImpl = defineComponent({
     // inactiveClass: String,
     exactActiveClass: String,
     custom: Boolean,
+    ariaCurrentValue: {
+      type: String as PropType<RouterLinkProps['ariaCurrentValue']>,
+      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,
               },

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."
   }
 }