test/docsify
1
0
Fork 0
mirror of https://gitee.com/docsifyjs/docsify.git synced 2024-11-29 18:48:14 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix: Accessibility roles and aria labels (#2304)

Browse Source 
* Fix “main” role

* Fix primary navigation role and aria label

* Fix secondary navigation aria label

* Fix progress bar role and aria labels

* Fix cover page role and aria label

* Fix search role

* Fix search results aria labels

* Add search results status element

* Update snapshots with new roles and aria labels
This commit is contained in:
John Hildenbiddle 2023-11-29 12:33:17 -06:00 committed by GitHub
parent dac8e59bb7
commit da43bd7937
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/render/index.js
View File

@ -416,6 +416,8 @@ export function Render(Base) {
let navAppendToTarget = dom.body; let navAppendToTarget = dom.body;
if (el) { if (el) {
navEl.setAttribute('aria-label', 'secondary');
if (config.repo) { if (config.repo) {
html += tpl.corner(config.repo, config.cornerExternalLinkTarget); html += tpl.corner(config.repo, config.cornerExternalLinkTarget);
} }

6
src/core/render/progressbar.js
View File

@ -10,6 +10,10 @@ function init() {
const div = dom.create('div'); const div = dom.create('div');
div.classList.add('progress'); div.classList.add('progress');
div.setAttribute('role', 'progressbar');
div.setAttribute('aria-valuemin', '0');
div.setAttribute('aria-valuemax', '100');
div.setAttribute('aria-label', 'Loading...');
dom.appendTo(dom.body, div); dom.appendTo(dom.body, div);
barEl = div; barEl = div;
} }
@ -33,6 +37,7 @@ export default function (info) {
barEl.style.opacity = 1; barEl.style.opacity = 1;
barEl.style.width = num >= 95 ? '100%' : num + '%'; barEl.style.width = num >= 95 ? '100%' : num + '%';
barEl.setAttribute('aria-valuenow', num >= 95 ? 100 : num);
if (num >= 95) { if (num >= 95) {
clearTimeout(timeId); clearTimeout(timeId);
@ -40,6 +45,7 @@ export default function (info) {
timeId = setTimeout(_ => { timeId = setTimeout(_ => {
barEl.style.opacity = 0; barEl.style.opacity = 0;
barEl.style.width = '0%'; barEl.style.width = '0%';
barEl.removeAttribute('aria-valuenow');
}, 200); }, 200);
} }
} }

10
src/core/render/tpl.js
View File

@ -42,7 +42,7 @@ export function main(config) {
<span></span><span></span><span></span> <span></span><span></span><span></span>
</div> </div>
</button> </button>
<aside class="sidebar"> <aside class="sidebar" role="none">
${ ${
config.name config.name
? /* html */ ` ? /* html */ `
@ -52,14 +52,14 @@ export function main(config) {
` `
: '' : ''
} }
<div class="sidebar-nav"><!--sidebar--></div> <div class="sidebar-nav" role="navigation" aria-label="primary"><!--sidebar--></div>
</aside> </aside>
`; `;
return /* html */ ` return /* html */ `
<main>${aside} <main role="presentation">${aside}
<section class="content"> <section class="content">
<article class="markdown-section" id="main"><!--main--></article> <article class="markdown-section" id="main" role="main"><!--main--></article>
</section> </section>
</main> </main>
`; `;
@ -80,7 +80,7 @@ export function cover() {
`; `;
return /* html */ ` return /* html */ `
<section class="cover show" style="background: ${bgc}"> <section class="cover show" role="complementary" aria-label="cover" style="background: ${bgc}">
<div class="mask"></div> <div class="mask"></div>
<div class="cover-main"><!--cover--></div> <div class="cover-main"><!--cover--></div>
</section> </section>

17
src/plugins/search/component.js
View File

@ -21,6 +21,11 @@ function style() {
align-items: center; align-items: center;
} }
.search .results-status:not(:empty) {
margin-top: 10px;
font-size: smaller;
}
.search .results-panel { .search .results-panel {
display: none; display: none;
} }
@ -122,12 +127,14 @@ function tpl(defaultValue = '') {
</svg> </svg>
</div> </div>
</div> </div>
<div class="results-status" aria-live="polite"></div>
<div class="results-panel"></div> <div class="results-panel"></div>
`; `;
const el = Docsify.dom.create('div', html); const el = Docsify.dom.create('div', html);
const aside = Docsify.dom.find('aside'); const aside = Docsify.dom.find('aside');
Docsify.dom.toggleClass(el, 'search'); Docsify.dom.toggleClass(el, 'search');
el.setAttribute('role', 'search');
Docsify.dom.before(aside, el); Docsify.dom.before(aside, el);
} }
@ -136,12 +143,14 @@ function doSearch(value) {
const $panel = Docsify.dom.find($search, '.results-panel'); const $panel = Docsify.dom.find($search, '.results-panel');
const $clearBtn = Docsify.dom.find($search, '.clear-button'); const $clearBtn = Docsify.dom.find($search, '.clear-button');
const $sidebarNav = Docsify.dom.find('.sidebar-nav'); const $sidebarNav = Docsify.dom.find('.sidebar-nav');
const $status = Docsify.dom.find('div.search .results-status');
const $appName = Docsify.dom.find('.app-name'); const $appName = Docsify.dom.find('.app-name');
if (!value) { if (!value) {
$panel.classList.remove('show'); $panel.classList.remove('show');
$clearBtn.classList.remove('show'); $clearBtn.classList.remove('show');
$panel.innerHTML = ''; $panel.innerHTML = '';
$status.textContent = '';
if (options.hideOtherSidebarContent) { if (options.hideOtherSidebarContent) {
$sidebarNav && $sidebarNav.classList.remove('hide'); $sidebarNav && $sidebarNav.classList.remove('hide');
@ -151,12 +160,12 @@ function doSearch(value) {
return; return;
} }
const matchs = search(value); const matches = search(value);
let html = ''; let html = '';
matchs.forEach(post => { matches.forEach((post, i) => {
html += /* html */ ` html += /* html */ `
<div class="matching-post"> <div class="matching-post" aria-label="search result ${i + 1}">
<a href="${post.url}"> <a href="${post.url}">
<h2>${post.title}</h2> <h2>${post.title}</h2>
<p>${post.content}</p> <p>${post.content}</p>
@ -168,6 +177,8 @@ function doSearch(value) {
$panel.classList.add('show'); $panel.classList.add('show');
$clearBtn.classList.add('show'); $clearBtn.classList.add('show');
$panel.innerHTML = html || /* html */ `<p class="empty">${NO_DATA_TEXT}</p>`; $panel.innerHTML = html || /* html */ `<p class="empty">${NO_DATA_TEXT}</p>`;
$status.textContent = `Found ${matches.length} results`;
if (options.hideOtherSidebarContent) { if (options.hideOtherSidebarContent) {
$sidebarNav && $sidebarNav.classList.add('hide'); $sidebarNav && $sidebarNav.classList.add('hide');
$appName && $appName.classList.add('hide'); $appName && $appName.classList.add('hide');

8
test/integration/__snapshots__/docs.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Docs Site coverpage renders and is unchanged 1`] = ` exports[`Docs Site coverpage renders and is unchanged 1`] = `
"<section class=\\"cover show\\" style=\\"background: "<section class=\\"cover show\\" role=\\"complementary\\" aria-label=\\"cover\\" style=\\"background:
linear-gradient( linear-gradient(
to left bottom, to left bottom,
hsl(127, 100%, 85%) 0%, hsl(127, 100%, 85%) 0%,
@ -16,11 +16,11 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = `
</section>" </section>"
`; `;
exports[`Docs Site navbar renders and is unchanged 1`] = `"<nav class=\\"app-nav no-badge\\"><ul><li>Translations<ul><li><a href=\\"#/\\" title=\\"undefined\\" class=\\"active\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1e7.png?v8.png\\" alt=\\"uk\\" class=\\"emoji\\" loading=\\"lazy\\"> English</a></li><li><a href=\\"#/zh-cn/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e8-1f1f3.png?v8.png\\" alt=\\"cn\\" class=\\"emoji\\" loading=\\"lazy\\"> 简体中文</a></li><li><a href=\\"#/de-de/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e9-1f1ea.png?v8.png\\" alt=\\"de\\" class=\\"emoji\\" loading=\\"lazy\\"> Deutsch</a></li><li><a href=\\"#/es/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ea-1f1f8.png?v8.png\\" alt=\\"es\\" class=\\"emoji\\" loading=\\"lazy\\"> Español</a></li><li><a href=\\"#/ru-ru/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1f7-1f1fa.png?v8.png\\" alt=\\"ru\\" class=\\"emoji\\" loading=\\"lazy\\"> Русский</a></li></ul></li></ul></nav>"`; exports[`Docs Site navbar renders and is unchanged 1`] = `"<nav aria-label=\\"secondary\\" class=\\"app-nav no-badge\\"><ul><li>Translations<ul><li><a href=\\"#/\\" title=\\"undefined\\" class=\\"active\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1e7.png?v8.png\\" alt=\\"uk\\" class=\\"emoji\\" loading=\\"lazy\\"> English</a></li><li><a href=\\"#/zh-cn/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e8-1f1f3.png?v8.png\\" alt=\\"cn\\" class=\\"emoji\\" loading=\\"lazy\\"> 简体中文</a></li><li><a href=\\"#/de-de/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e9-1f1ea.png?v8.png\\" alt=\\"de\\" class=\\"emoji\\" loading=\\"lazy\\"> Deutsch</a></li><li><a href=\\"#/es/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ea-1f1f8.png?v8.png\\" alt=\\"es\\" class=\\"emoji\\" loading=\\"lazy\\"> Español</a></li><li><a href=\\"#/ru-ru/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1f7-1f1fa.png?v8.png\\" alt=\\"ru\\" class=\\"emoji\\" loading=\\"lazy\\"> Русский</a></li></ul></li></ul></nav>"`;
exports[`Docs Site sidebar renders and is unchanged 1`] = ` exports[`Docs Site sidebar renders and is unchanged 1`] = `
"<aside class=\\"sidebar\\"> "<aside class=\\"sidebar\\" role=\\"none\\">
<div class=\\"sidebar-nav\\"><ul><li><p>Getting started</p><ul><li><a href=\\"#/quickstart\\" title=\\"undefined\\">Quick start</a></li><li><a href=\\"#/more-pages\\" title=\\"undefined\\">Writing more pages</a></li><li><a href=\\"#/custom-navbar\\" title=\\"undefined\\">Custom navbar</a></li><li><a href=\\"#/cover\\" title=\\"undefined\\">Cover page</a></li></ul></li><li><p>Customization</p><ul><li><a href=\\"#/configuration\\" title=\\"undefined\\">Configuration</a></li><li><a href=\\"#/themes\\" title=\\"undefined\\">Themes</a></li><li><a href=\\"#/plugins\\" title=\\"undefined\\">List of Plugins</a></li><li><a href=\\"#/write-a-plugin\\" title=\\"undefined\\">Write a Plugin</a></li><li><a href=\\"#/markdown\\" title=\\"undefined\\">Markdown configuration</a></li><li><a href=\\"#/language-highlight\\" title=\\"undefined\\">Language highlighting</a></li><li><a href=\\"#/emoji\\" title=\\"undefined\\">Emoji</a></li></ul></li><li><p>Guide</p><ul><li><a href=\\"#/deploy\\" title=\\"undefined\\">Deploy</a></li><li><a href=\\"#/helpers\\" title=\\"undefined\\">Helpers</a></li><li><a href=\\"#/vue\\" title=\\"undefined\\">Vue compatibility</a></li><li><a href=\\"#/cdn\\" title=\\"undefined\\">CDN</a></li><li><a href=\\"#/pwa\\" title=\\"undefined\\">Offline Mode (PWA)</a></li><li><a href=\\"#/embed-files\\" title=\\"undefined\\">Embed Files</a></li></ul></li><li><p><a href=\\"#/awesome\\" title=\\"undefined\\">Awesome docsify</a></p></li><li><p><a href=\\"#/changelog\\" title=\\"undefined\\">Changelog</a></p></li></ul></div> <div class=\\"sidebar-nav\\" role=\\"navigation\\" aria-label=\\"primary\\"><ul><li><p>Getting started</p><ul><li><a href=\\"#/quickstart\\" title=\\"undefined\\">Quick start</a></li><li><a href=\\"#/more-pages\\" title=\\"undefined\\">Writing more pages</a></li><li><a href=\\"#/custom-navbar\\" title=\\"undefined\\">Custom navbar</a></li><li><a href=\\"#/cover\\" title=\\"undefined\\">Cover page</a></li></ul></li><li><p>Customization</p><ul><li><a href=\\"#/configuration\\" title=\\"undefined\\">Configuration</a></li><li><a href=\\"#/themes\\" title=\\"undefined\\">Themes</a></li><li><a href=\\"#/plugins\\" title=\\"undefined\\">List of Plugins</a></li><li><a href=\\"#/write-a-plugin\\" title=\\"undefined\\">Write a Plugin</a></li><li><a href=\\"#/markdown\\" title=\\"undefined\\">Markdown configuration</a></li><li><a href=\\"#/language-highlight\\" title=\\"undefined\\">Language highlighting</a></li><li><a href=\\"#/emoji\\" title=\\"undefined\\">Emoji</a></li></ul></li><li><p>Guide</p><ul><li><a href=\\"#/deploy\\" title=\\"undefined\\">Deploy</a></li><li><a href=\\"#/helpers\\" title=\\"undefined\\">Helpers</a></li><li><a href=\\"#/vue\\" title=\\"undefined\\">Vue compatibility</a></li><li><a href=\\"#/cdn\\" title=\\"undefined\\">CDN</a></li><li><a href=\\"#/pwa\\" title=\\"undefined\\">Offline Mode (PWA)</a></li><li><a href=\\"#/embed-files\\" title=\\"undefined\\">Embed Files</a></li></ul></li><li><p><a href=\\"#/awesome\\" title=\\"undefined\\">Awesome docsify</a></p></li><li><p><a href=\\"#/changelog\\" title=\\"undefined\\">Changelog</a></p></li></ul></div>
</aside>" </aside>"
`; `;