Skip to content

Commit da43bd7

Browse files
jhildenbiddlejhildenbiddle
authored
Fix: Accessibility roles and aria labels (#2304)
* 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
1 parent dac8e59 commit da43bd7

File tree

5 files changed

+31
-12
lines changed

5 files changed

+31
-12
lines changed

‎src/core/render/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,8 @@ export function Render(Base) {
416416
let navAppendToTarget = dom.body;
417417

418418
if (el) {
419+
navEl.setAttribute('aria-label', 'secondary');
420+
419421
if (config.repo) {
420422
html += tpl.corner(config.repo, config.cornerExternalLinkTarget);
421423
}

‎src/core/render/progressbar.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ function init() {
1010
const div = dom.create('div');
1111

1212
div.classList.add('progress');
13+
div.setAttribute('role', 'progressbar');
14+
div.setAttribute('aria-valuemin', '0');
15+
div.setAttribute('aria-valuemax', '100');
16+
div.setAttribute('aria-label', 'Loading...');
1317
dom.appendTo(dom.body, div);
1418
barEl = div;
1519
}
@@ -33,13 +37,15 @@ export default function (info) {
3337

3438
barEl.style.opacity = 1;
3539
barEl.style.width = num >= 95 ? '100%' : num + '%';
40+
barEl.setAttribute('aria-valuenow', num >= 95 ? 100 : num);
3641

3742
if (num >= 95) {
3843
clearTimeout(timeId);
3944
// eslint-disable-next-line no-unused-vars
4045
timeId = setTimeout(_ => {
4146
barEl.style.opacity = 0;
4247
barEl.style.width = '0%';
48+
barEl.removeAttribute('aria-valuenow');
4349
}, 200);
4450
}
4551
}

‎src/core/render/tpl.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function main(config) {
4242
<span></span><span></span><span></span>
4343
</div>
4444
</button>
45-
<aside class="sidebar">
45+
<aside class="sidebar" role="none">
4646
${
4747
config.name
4848
? /* html */ `
@@ -52,14 +52,14 @@ export function main(config) {
5252
`
5353
: ''
5454
}
55-
<div class="sidebar-nav"><!--sidebar--></div>
55+
<div class="sidebar-nav" role="navigation" aria-label="primary"><!--sidebar--></div>
5656
</aside>
5757
`;
5858

5959
return /* html */ `
60-
<main>${aside}
60+
<main role="presentation">${aside}
6161
<section class="content">
62-
<article class="markdown-section" id="main"><!--main--></article>
62+
<article class="markdown-section" id="main" role="main"><!--main--></article>
6363
</section>
6464
</main>
6565
`;
@@ -80,7 +80,7 @@ export function cover() {
8080
`;
8181

8282
return /* html */ `
83-
<section class="cover show" style="background: ${bgc}">
83+
<section class="cover show" role="complementary" aria-label="cover" style="background: ${bgc}">
8484
<div class="mask"></div>
8585
<div class="cover-main"><!--cover--></div>
8686
</section>

‎src/plugins/search/component.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ function style() {
2121
align-items: center;
2222
}
2323
24+
.search .results-status:not(:empty) {
25+
margin-top: 10px;
26+
font-size: smaller;
27+
}
28+
2429
.search .results-panel {
2530
display: none;
2631
}
@@ -122,12 +127,14 @@ function tpl(defaultValue = '') {
122127
</svg>
123128
</div>
124129
</div>
130+
<div class="results-status" aria-live="polite"></div>
125131
<div class="results-panel"></div>
126132
`;
127133
const el = Docsify.dom.create('div', html);
128134
const aside = Docsify.dom.find('aside');
129135

130136
Docsify.dom.toggleClass(el, 'search');
137+
el.setAttribute('role', 'search');
131138
Docsify.dom.before(aside, el);
132139
}
133140

@@ -136,12 +143,14 @@ function doSearch(value) {
136143
const $panel = Docsify.dom.find($search, '.results-panel');
137144
const $clearBtn = Docsify.dom.find($search, '.clear-button');
138145
const $sidebarNav = Docsify.dom.find('.sidebar-nav');
146+
const $status = Docsify.dom.find('div.search .results-status');
139147
const $appName = Docsify.dom.find('.app-name');
140148

141149
if (!value) {
142150
$panel.classList.remove('show');
143151
$clearBtn.classList.remove('show');
144152
$panel.innerHTML = '';
153+
$status.textContent = '';
145154

146155
if (options.hideOtherSidebarContent) {
147156
$sidebarNav && $sidebarNav.classList.remove('hide');
@@ -151,12 +160,12 @@ function doSearch(value) {
151160
return;
152161
}
153162

154-
const matchs = search(value);
163+
const matches = search(value);
155164

156165
let html = '';
157-
matchs.forEach(post => {
166+
matches.forEach((post, i) => {
158167
html += /* html */ `
159-
<div class="matching-post">
168+
<div class="matching-post" aria-label="search result ${i + 1}">
160169
<a href="${post.url}">
161170
<h2>${post.title}</h2>
162171
<p>${post.content}</p>
@@ -168,6 +177,8 @@ function doSearch(value) {
168177
$panel.classList.add('show');
169178
$clearBtn.classList.add('show');
170179
$panel.innerHTML = html || /* html */ `<p class="empty">${NO_DATA_TEXT}</p>`;
180+
$status.textContent = `Found ${matches.length} results`;
181+
171182
if (options.hideOtherSidebarContent) {
172183
$sidebarNav && $sidebarNav.classList.add('hide');
173184
$appName && $appName.classList.add('hide');

‎test/integration/__snapshots__/docs.test.js.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Docs Site coverpage renders and is unchanged 1`] = `
4-
"<section class=\\"cover show\\" style=\\"background:
4+
"<section class=\\"cover show\\" role=\\"complementary\\" aria-label=\\"cover\\" style=\\"background:
55
linear-gradient(
66
to left bottom,
77
hsl(127, 100%, 85%) 0%,
@@ -16,11 +16,11 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = `
1616
</section>"
1717
`;
1818
19-
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>"`;
19+
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>"`;
2020
2121
exports[`Docs Site sidebar renders and is unchanged 1`] = `
22-
"<aside class=\\"sidebar\\">
22+
"<aside class=\\"sidebar\\" role=\\"none\\">
2323
24-
<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>
24+
<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>
2525
</aside>"
2626
`;

0 commit comments

Comments
 (0)