From 341dfa2bad9a1834b59ff3ff9e51ba375c3ccb1d Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Sat, 21 Dec 2019 18:37:41 +0800 Subject: [PATCH 1/5] feat(core): add aria-current to active links (close #2116) --- src/components/link.js | 5 ++++- test/e2e/specs/active-links.js | 8 ++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/link.js b/src/components/link.js index 817bf8e04..18659cc2a 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -67,6 +67,8 @@ export default { ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) + const ariaCurrentValue = classes[activeClass] ? 'page' : null + const handler = e => { if (guardEvent(e)) { if (this.replace) { @@ -117,7 +119,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 +147,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..e83795546 100644 --- a/test/e2e/specs/active-links.js +++ b/test/e2e/specs/active-links.js @@ -60,11 +60,15 @@ module.exports = { function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) { browser.click(`li:nth-child(${n}) a`) activeA.forEach(i => { - browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active') + browser + .assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active') + .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') }) activeLI && activeLI.forEach(i => { - browser.assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active') + browser + .assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active') + .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') }) exactActiveA.forEach(i => { browser.assert From f9167b0fea7dd6d39d21280ceeb3b516694d6805 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 13 Mar 2020 11:08:16 -0700 Subject: [PATCH 2/5] feat(core): update aria-current to exact active route --- src/components/link.js | 2 +- test/e2e/specs/active-links.js | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/link.js b/src/components/link.js index 18659cc2a..b7e6d4d9c 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -67,7 +67,7 @@ export default { ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) - const ariaCurrentValue = classes[activeClass] ? 'page' : null + const ariaCurrentValue = classes[exactActiveClass] ? 'page' : null const handler = e => { if (guardEvent(e)) { diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js index e83795546..58c64511d 100644 --- a/test/e2e/specs/active-links.js +++ b/test/e2e/specs/active-links.js @@ -60,26 +60,24 @@ module.exports = { function assertActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) { browser.click(`li:nth-child(${n}) a`) activeA.forEach(i => { - browser - .assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active') - .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') + browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active') }) activeLI && activeLI.forEach(i => { - browser - .assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active') - .assert.attributeEquals(`li:nth-child(${i}) a`, 'aria-current', 'page') + browser.assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active') }) exactActiveA.forEach(i => { 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') }) } } From 47290b964d109828d1ae10d9b4839ffdcdb4c4df Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 18 Mar 2020 19:21:18 -0700 Subject: [PATCH 3/5] feat(core): add ariaCurrentValue prop and add test --- docs/api/README.md | 7 +++++++ src/components/link.js | 4 +++- test/e2e/specs/active-links.js | 3 +++ 3 files changed, 13 insertions(+), 1 deletion(-) 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 b7e6d4d9c..35c2d4995 100644 --- a/src/components/link.js +++ b/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,7 +68,8 @@ export default { ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) - const ariaCurrentValue = classes[exactActiveClass] ? 'page' : null + const ariaCurrentType = this.ariaCurrentValue || 'page' + const ariaCurrentValue = classes[exactActiveClass] ? ariaCurrentType : null const handler = e => { if (guardEvent(e)) { diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js index 58c64511d..81d1e1170 100644 --- a/test/e2e/specs/active-links.js +++ b/test/e2e/specs/active-links.js @@ -71,6 +71,9 @@ module.exports = { .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 => { From fa6b42963e86808dcebe715c36a834ff24cc4d3f Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Thu, 19 Mar 2020 10:07:34 -0700 Subject: [PATCH 4/5] feat(core): type modification --- src/components/link.js | 9 ++++++--- test/e2e/specs/active-links.js | 4 +--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/link.js b/src/components/link.js index 35c2d4995..817b635ee 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -8,6 +8,7 @@ import { warn } from '../util/warn' // work around weird flow bug const toTypes: Array = [String, Object] const eventTypes: Array = [String, Array] +let ariaCurrentTypes: 'page' | 'step' | 'location' | 'date' | 'time' const noop = () => {} @@ -27,7 +28,10 @@ export default { replace: Boolean, activeClass: String, exactActiveClass: String, - ariaCurrentValue: 'page' | 'step' | 'location' | 'date' | 'time', + ariaCurrentValue: { + type: ariaCurrentTypes, + default: 'page' + }, event: { type: eventTypes, default: 'click' @@ -68,8 +72,7 @@ export default { ? classes[exactActiveClass] : isIncludedRoute(current, compareTarget) - const ariaCurrentType = this.ariaCurrentValue || 'page' - const ariaCurrentValue = classes[exactActiveClass] ? ariaCurrentType : null + const ariaCurrentValue = classes[exactActiveClass] ? this.ariaCurrentValue : null const handler = e => { if (guardEvent(e)) { diff --git a/test/e2e/specs/active-links.js b/test/e2e/specs/active-links.js index 81d1e1170..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]) @@ -71,9 +72,6 @@ module.exports = { .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 => { From 3a7aa107cbe67639d45b3bdfda4c474a4967e533 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 20 Mar 2020 12:16:47 -0700 Subject: [PATCH 5/5] feat(core): update aria-current typing to string --- src/components/link.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/link.js b/src/components/link.js index 817b635ee..6d7b262f5 100644 --- a/src/components/link.js +++ b/src/components/link.js @@ -8,7 +8,6 @@ import { warn } from '../util/warn' // work around weird flow bug const toTypes: Array = [String, Object] const eventTypes: Array = [String, Array] -let ariaCurrentTypes: 'page' | 'step' | 'location' | 'date' | 'time' const noop = () => {} @@ -29,7 +28,7 @@ export default { activeClass: String, exactActiveClass: String, ariaCurrentValue: { - type: ariaCurrentTypes, + type: String, default: 'page' }, event: {