FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

doc: improve accessibility of expandable lists · nodejs/node@33ee464 · GitHub

/ node Public

Commit 33ee464

Browse files
aduh95
authored and
marco-ippolito
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 f9d6e35 commit 33ee464

4 files changed

Lines changed: 20 additions & 21 deletions

File tree

‎doc/api_assets/api.js‎

Lines 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
}

‎doc/api_assets/style.css‎

Lines 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;

‎doc/template.html‎

Lines 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>

‎tools/doc/html.mjs‎

Lines 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)
Back | FazBrowse Home | New Git URL