feat(router-link): add ariaCurrentValue prop

diff --git a/src/RouterLink.ts b/src/RouterLink.ts
index c5d3d411be90d625ea5bb8829cce098f1881dfda..03ba7170b1d1966bc920d452573af9663e4144f5 100644 (file)
--- 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<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,
               },

diff --git a/vetur/attributes.json b/vetur/attributes.json
index 355b93f250f3dba0398c7edd74a8cc0ff0ab8aed..c2a5eb1f9147a79edb3088027e918d6f0af16e22 100644 (file)
--- 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."
   }
 }