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

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

* feat(core): update aria-current to exact active route

* feat(core): add ariaCurrentValue prop and add test

* feat(core): type modification

* feat(core): update aria-current typing to string

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,10 @@ export default {
     replace: Boolean,
     activeClass: String,
     exactActiveClass: String,
+    ariaCurrentValue: {
+      type: String,
+      default: 'page'
+    },
     event: {
       type: eventTypes,
       default: 'click'
@@ -67,6 +71,8 @@ export default {
       ? classes[exactActiveClass]
       : isIncludedRoute(current, compareTarget)
 
+    const ariaCurrentValue = classes[exactActiveClass] ? this.ariaCurrentValue : null
+
     const handler = e => {
       if (guardEvent(e)) {
         if (this.replace) {
@@ -117,7 +123,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 +151,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

@@ -31,6 +31,7 @@ module.exports = {
       .assert.attributeContains('li:nth-child(18) a', 'href', '/active-links/redirect-image')
       .assert.attributeContains('li:nth-child(19) a', 'href', '/active-links/redirect-image')
       .assert.containsText('.view', 'Home')
+      .assert.not.attributeEquals(`li:nth-child(3) a`, 'aria-current', 'page')
 
     assertActiveLinks(1, [1, 2], null, [1, 2])
     assertActiveLinks(2, [1, 2], null, [1, 2])
@@ -70,12 +71,14 @@ 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')
       })
       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')
         })
     }
   }