feat(core): add aria-current to active links (close #2116)

docs/api/README.md

@@ -163,6 +163,13 @@ If you add a `target="_blank"` to your `a` element, you must omit the `@click="n
 
   Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option.
 
+### aria-current-value
+
+- type: `'page' | 'step' | 'location' | 'date' | 'time'`
+- default: `"page"`
+
+  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.
+
 ## `<router-view>`
 
 The `<router-view>` component is a functional component that renders the matched component for the given path. Components rendered in `<router-view>` can also contain their own `<router-view>`, which will render components for nested paths.

src/components/link.js

@@ -27,6 +27,7 @@ export default {
     replace: Boolean,
     activeClass: String,
     exactActiveClass: String,
+    ariaCurrentValue: 'page' | 'step' | 'location' | 'date' | 'time',
     event: {
       type: eventTypes,
       default: 'click'
@@ -67,6 +68,9 @@ export default {
       ? classes[exactActiveClass]
       : isIncludedRoute(current, compareTarget)
 
+    const ariaCurrentType = this.ariaCurrentValue || 'page'
+    const ariaCurrentValue = classes[exactActiveClass] ? ariaCurrentType : null
+
     const handler = e => {
       if (guardEvent(e)) {
         if (this.replace) {
@@ -117,7 +121,7 @@ export default {
 
     if (this.tag === 'a') {
       data.on = on
-      data.attrs = { href }
+      data.attrs = { href, 'aria-current': ariaCurrentValue }
     } else {
       // find the first <a> child and apply listener and href
       const a = findAnchor(this.$slots.default)
@@ -145,6 +149,7 @@ export default {
 
         const aAttrs = (a.data.attrs = extend({}, a.data.attrs))
         aAttrs.href = href
+        aAttrs['aria-current'] = ariaCurrentValue
       } else {
         // doesn't have <a> child, apply listener to self
         data.on = on

test/e2e/specs/active-links.js

@@ -70,12 +70,17 @@ module.exports = {
         browser.assert
           .cssClassPresent(`li:nth-child(${i}) a`, 'router-link-exact-active')
           .assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
+          .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page')
+        if (i < 19) {
+          browser.assert.not.attributeEquals(`li:nth-child(${i + 1}) a`, 'aria-current', 'page')
+        }
       })
       exactActiveLI &&
         exactActiveLI.forEach(i => {
           browser.assert
             .cssClassPresent(`li:nth-child(${i})`, 'router-link-exact-active')
             .assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active')
+            .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page')
         })
     }
   }