Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ad012ca

Browse filesBrowse files
aduh95aduh95
committed
doc: improve accessibility of expandable lists
PR-URL: #56749 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Ulises Gascón <ulisesgascongonzalez@gmail.com> Reviewed-By: Claudio Wunder <cwunder@gnome.org>
1 parent e49f3e9 commit ad012ca
Copy full SHA for ad012ca

File tree

Expand file treeCollapse file tree

4 files changed

+20
-21
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

4 files changed

+20
-21
lines changed
Open diff view settings
Collapse file

‎doc/api_assets/api.js‎

Copy file name to clipboardExpand all lines: doc/api_assets/api.js
+5-1Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
function closeAllPickers() {
4242
for (const picker of pickers) {
4343
picker.parentNode.classList.remove('expanded');
44+
picker.ariaExpanded = false;
4445
}
4546

4647
window.removeEventListener('click', closeAllPickers);
@@ -58,14 +59,15 @@
5859
for (const picker of pickers) {
5960
const parentNode = picker.parentNode;
6061

62+
picker.ariaExpanded = parentNode.classList.contains('expanded');
6163
picker.addEventListener('click', function(e) {
6264
e.preventDefault();
6365

6466
/*
6567
closeAllPickers as window event trigger already closed all the pickers,
6668
if it already closed there is nothing else to do here
6769
*/
68-
if (parentNode.classList.contains('expanded')) {
70+
if (picker.ariaExpanded === 'true') {
6971
return;
7072
}
7173

@@ -75,9 +77,11 @@
7577
*/
7678

7779
requestAnimationFrame(function() {
80+
picker.ariaExpanded = true;
7881
parentNode.classList.add('expanded');
7982
window.addEventListener('click', closeAllPickers);
8083
window.addEventListener('keydown', onKeyDown);
84+
parentNode.querySelector('.picker a').focus();
8185
});
8286
});
8387
}
Collapse file

‎doc/api_assets/style.css‎

Copy file name to clipboardExpand all lines: doc/api_assets/style.css
+6-11Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -182,34 +182,29 @@ li.picker-header .picker-arrow {
182182
height: .6rem;
183183
border-top: .3rem solid transparent;
184184
border-bottom: .3rem solid transparent;
185-
border-left: .6rem solid var(--color-links);
185+
border-left: .6rem solid currentColor;
186186
border-right: none;
187187
margin: 0 .2rem .05rem 0;
188188
}
189189

190-
li.picker-header a:focus .picker-arrow,
191-
li.picker-header a:active .picker-arrow,
192-
li.picker-header a:hover .picker-arrow {
193-
border-left: .6rem solid var(--white);
194-
}
195-
196-
li.picker-header.expanded a:focus .picker-arrow,
197-
li.picker-header.expanded a:active .picker-arrow,
198-
li.picker-header.expanded a:hover .picker-arrow,
190+
li.picker-header.expanded .picker-arrow,
191+
:root:not(.has-js) li.picker-header:focus-within .picker-arrow,
199192
:root:not(.has-js) li.picker-header:hover .picker-arrow {
200-
border-top: .6rem solid var(--white);
193+
border-top: .6rem solid currentColor;
201194
border-bottom: none;
202195
border-left: .35rem solid transparent;
203196
border-right: .35rem solid transparent;
204197
margin-bottom: 0;
205198
}
206199

207200
li.picker-header.expanded > a,
201+
:root:not(.has-js) li.picker-header:focus-within > a,
208202
:root:not(.has-js) li.picker-header:hover > a {
209203
border-radius: 2px 2px 0 0;
210204
}
211205

212206
li.picker-header.expanded > .picker,
207+
:root:not(.has-js) li.picker-header:focus-within > .picker,
213208
:root:not(.has-js) li.picker-header:hover > .picker {
214209
display: block;
215210
z-index: 1;
Collapse file

‎doc/template.html‎

Copy file name to clipboardExpand all lines: doc/template.html
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,13 @@ <h1>Node.js __VERSION__ documentation</h1>
5959
__GTOC_PICKER__
6060
__ALTDOCS__
6161
<li class="picker-header">
62-
<a href="#">
62+
<a href="#options-picker" aria-controls="options-picker">
6363
<span class="picker-arrow"></span>
6464
Options
6565
</a>
6666

67-
<div class="picker">
68-
<ul>
67+
<div class="picker" tabindex="-1">
68+
<ul id="options-picker">
6969
<li>
7070
<a href="all.html">View on single page</a>
7171
</li>
Collapse file

‎tools/doc/html.mjs‎

Copy file name to clipboardExpand all lines: tools/doc/html.mjs
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -527,11 +527,11 @@ function altDocs(filename, docCreated, versions) {
527527

528528
return list ? `
529529
<li class="picker-header">
530-
<a href="#">
530+
<a href="#alt-docs" aria-controls="alt-docs">
531531
<span class="picker-arrow"></span>
532532
Other versions
533533
</a>
534-
<div class="picker"><ol id="alt-docs">${list}</ol></div>
534+
<div class="picker" tabindex="-1"><ol id="alt-docs">${list}</ol></div>
535535
</li>
536536
` : '';
537537
}
@@ -557,12 +557,12 @@ function gtocPicker(id) {
557557

558558
return `
559559
<li class="picker-header">
560-
<a href="#">
560+
<a href="#gtoc-picker" aria-controls="gtoc-picker">
561561
<span class="picker-arrow"></span>
562562
Index
563563
</a>
564564
565-
<div class="picker">${gtoc}</div>
565+
<div class="picker" tabindex="-1" id="gtoc-picker">${gtoc}</div>
566566
</li>
567567
`;
568568
}
@@ -574,12 +574,12 @@ function tocPicker(id, content) {
574574

575575
return `
576576
<li class="picker-header">
577-
<a href="#">
577+
<a href="#toc-picker" aria-controls="toc-picker">
578578
<span class="picker-arrow"></span>
579579
Table of contents
580580
</a>
581581
582-
<div class="picker">${content.tocPicker}</div>
582+
<div class="picker" tabindex="-1">${content.tocPicker.replace('<ul', '<ul id="toc-picker"')}</div>
583583
</li>
584584
`;
585585
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.