From 0914acd0db98e7f36be02c1c469198dae2d8686d Mon Sep 17 00:00:00 2001 From: dmed256 Date: Sat, 19 May 2018 11:33:25 -0500 Subject: [PATCH 1/2] [Issue #494] New config option addSkipLink for accessibility --- docs/configuration.md | 11 +++++++++++ docs/de-de/configuration.md | 12 ++++++++++++ docs/zh-cn/configuration.md | 10 ++++++++++ index.html | 1 + package.json | 2 +- src/core/render/index.js | 9 +++++++++ src/themes/basic/_layout.styl | 21 ++++++++++++++++++++- 7 files changed, 64 insertions(+), 2 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 3194c1085..080218084 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -466,3 +466,14 @@ window.$docsify = { ``` > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. + +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/docs/de-de/configuration.md b/docs/de-de/configuration.md index 2f5ebdcb4..5e4c7e075 100644 --- a/docs/de-de/configuration.md +++ b/docs/de-de/configuration.md @@ -448,3 +448,15 @@ window.$docsify = { }; ``` > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. + + +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/docs/zh-cn/configuration.md b/docs/zh-cn/configuration.md index c72684001..c8c8b027d 100644 --- a/docs/zh-cn/configuration.md +++ b/docs/zh-cn/configuration.md @@ -449,3 +449,13 @@ window.$docsify = { > Note: The options with fallbackLanguages didn't work with the `notFoundPage` options. +## skipLink + +* type: `Boolean` + +Add a [skip link](https://webaim.org/techniques/skipnav) to help with screen reader accessibility +```js +window.$docsify = { + skipLink: true +}; +``` diff --git a/index.html b/index.html index 4d508f0f8..d61c83481 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,7 @@ subMaxLevel: 2, mergeNavbar: true, formatUpdated: '{MM}/{DD} {HH}:{mm}', + skipLink: true, plugins: [ function (hook, vm) { hook.beforeEach(function (html) { diff --git a/package.json b/package.json index 4b9f1189e..01ad26d1c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "marked": "^0.3.12", "medium-zoom": "^0.4.0", "opencollective": "^1.0.3", - "prismjs": "^1.9.0", + "prismjs": "^1.13.0", "tinydate": "^1.0.0", "tweezer.js": "^1.4.0" }, diff --git a/src/core/render/index.js b/src/core/render/index.js index 6ccb13669..78d670d86 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -251,6 +251,15 @@ export function initRender(vm) { dom.before(navAppendToTarget, navEl) } + if (config.skipLink + && !dom.find('skip-link')) { + const skipLinkDom = dom.create('a') + skipLinkDom.id = 'skip-link'; + skipLinkDom.href = '#/?id=main'; + skipLinkDom.innerHTML = 'Skip to main content'; + dom.before(dom.body, skipLinkDom); + } + if (config.themeColor) { dom.$.head.appendChild( dom.create('div', tpl.theme(config.themeColor)).firstElementChild diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl index 747c7e5fa..1d8479712 100644 --- a/src/themes/basic/_layout.styl +++ b/src/themes/basic/_layout.styl @@ -9,7 +9,7 @@ body:not(.ready) overflow hidden - [data-cloak], .app-nav, > nav + [data-cloak], .app-nav, > nav, #skip-link display none div#app @@ -178,6 +178,25 @@ li input[type='checkbox'] height 80px width 80px +#skip-link + position: absolute + top: -40px + left: 0px + outline: 0 + + transition: color .1s ease-in + transition: background-color .1s ease-in + + padding: 0.5em 1em + color: transparent + background-color: transparent + + &:focus + top: 0px + height: 40px + background-color: var(--theme-color, $color-primary) + color: $color-text + /* main */ main display block From 480241cf67e23f3962ee84e4f253de53d5da39ab Mon Sep 17 00:00:00 2001 From: dmed256 Date: Sat, 19 May 2018 14:02:37 -0500 Subject: [PATCH 2/2] Updated z-index for skip-link, added dynamic path --- src/core/render/index.js | 15 +++++++++++---- src/themes/basic/_layout.styl | 7 +++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/core/render/index.js b/src/core/render/index.js index 78d670d86..038cefab7 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -80,6 +80,11 @@ function renderNameLink(vm) { } } +function updateSkipLink(vm) { + const skipLink = dom.getNode('#skip-link') + skipLink.href = `/#${vm.route.path}?id=main` +} + export function renderMixin(proto) { proto._renderTo = function (el, content, replace) { const node = dom.getNode(el) @@ -202,6 +207,8 @@ export function renderMixin(proto) { proto._updateRender = function () { // Render name link renderNameLink(this) + // Update skip-link link + updateSkipLink(this) } } @@ -254,10 +261,10 @@ export function initRender(vm) { if (config.skipLink && !dom.find('skip-link')) { const skipLinkDom = dom.create('a') - skipLinkDom.id = 'skip-link'; - skipLinkDom.href = '#/?id=main'; - skipLinkDom.innerHTML = 'Skip to main content'; - dom.before(dom.body, skipLinkDom); + skipLinkDom.id = 'skip-link' + skipLinkDom.href = '#/?id=main' + skipLinkDom.innerHTML = 'Skip to main content' + dom.before(dom.body, skipLinkDom) } if (config.themeColor) { diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl index 1d8479712..c63576321 100644 --- a/src/themes/basic/_layout.styl +++ b/src/themes/basic/_layout.styl @@ -183,13 +183,12 @@ li input[type='checkbox'] top: -40px left: 0px outline: 0 - - transition: color .1s ease-in - transition: background-color .1s ease-in - padding: 0.5em 1em color: transparent background-color: transparent + z-index 30 + transition: color .1s ease-in + transition: background-color .1s ease-in &:focus top: 0px