diff --git a/docs/api/README.md b/docs/api/README.md index 71aada72b..fc30b9e6f 100644 --- a/docs/api/README.md +++ b/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. + ## `` The `` component is a functional component that renders the matched component for the given path. Components rendered in `` can also contain their own ``, which will render components for nested paths. diff --git a/src/components/link.js b/src/components/link.js index 3df19b3eb..c0f22503b 100644 --- a/src/components/link.js +++ b/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 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 child, apply listener to self data.on = on diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js index 686e94af2..9969b0d7e 100644 --- a/test/e2e/specs/active-links.js +++ b/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') }) } }