GeezerVison is showing github.com — doc: improve accessibility of expandable lists · nodejs/node@ad012ca
File treeExpand file treeCollapse file tree Open diff view settings Expand file treeCollapse file tree Open diff view settings Collapse file Copy file name to clipboardExpand all lines: doc/api_assets/api.js +5-1Lines changed: 5 additions & 1 deletion | Original file line number | Diff line number | Diff line change |
|---|
| 41 | 41 | function closeAllPickers() { | 42 | 42 | for (const picker of pickers) { | 43 | 43 | picker.parentNode.classList.remove('expanded'); | | 44 | + picker.ariaExpanded = false; | 44 | 45 | } | 45 | 46 |
| 46 | 47 | window.removeEventListener('click', closeAllPickers); | | 58 | 59 | for (const picker of pickers) { | 59 | 60 | const parentNode = picker.parentNode; | 60 | 61 |
| | 62 | + picker.ariaExpanded = parentNode.classList.contains('expanded'); | 61 | 63 | picker.addEventListener('click', function(e) { | 62 | 64 | e.preventDefault(); | 63 | 65 |
| 64 | 66 | /* | 65 | 67 | closeAllPickers as window event trigger already closed all the pickers, | 66 | 68 | if it already closed there is nothing else to do here | 67 | 69 | */ | 68 | | - if (parentNode.classList.contains('expanded')) { | | 70 | + if (picker.ariaExpanded === 'true') { | 69 | 71 | return; | 70 | 72 | } | 71 | 73 |
| | 75 | 77 | */ | 76 | 78 |
| 77 | 79 | requestAnimationFrame(function() { | | 80 | + picker.ariaExpanded = true; | 78 | 81 | parentNode.classList.add('expanded'); | 79 | 82 | window.addEventListener('click', closeAllPickers); | 80 | 83 | window.addEventListener('keydown', onKeyDown); | | 84 | + parentNode.querySelector('.picker a').focus(); | 81 | 85 | }); | 82 | 86 | }); | 83 | 87 | } | |
Collapse file Copy file name to clipboardExpand all lines: doc/api_assets/style.css +6-11Lines changed: 6 additions & 11 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -182,34 +182,29 @@ li.picker-header .picker-arrow { | 182 | 182 | height: .6rem; | 183 | 183 | border-top: .3rem solid transparent; | 184 | 184 | border-bottom: .3rem solid transparent; | 185 | | - border-left: .6rem solid var(--color-links); | | 185 | + border-left: .6rem solid currentColor; | 186 | 186 | border-right: none; | 187 | 187 | margin: 0 .2rem .05rem 0; | 188 | 188 | } | 189 | 189 |
| 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, | 199 | 192 | :root:not(.has-js) li.picker-header:hover .picker-arrow { | 200 | | - border-top: .6rem solid var(--white); | | 193 | + border-top: .6rem solid currentColor; | 201 | 194 | border-bottom: none; | 202 | 195 | border-left: .35rem solid transparent; | 203 | 196 | border-right: .35rem solid transparent; | 204 | 197 | margin-bottom: 0; | 205 | 198 | } | 206 | 199 |
| 207 | 200 | li.picker-header.expanded > a, | | 201 | +:root:not(.has-js) li.picker-header:focus-within > a, | 208 | 202 | :root:not(.has-js) li.picker-header:hover > a { | 209 | 203 | border-radius: 2px 2px 0 0; | 210 | 204 | } | 211 | 205 |
| 212 | 206 | li.picker-header.expanded > .picker, | | 207 | +:root:not(.has-js) li.picker-header:focus-within > .picker, | 213 | 208 | :root:not(.has-js) li.picker-header:hover > .picker { | 214 | 209 | display: block; | 215 | 210 | z-index: 1; | |
Collapse file Copy file name to clipboardExpand all lines: doc/template.html +3-3Lines changed: 3 additions & 3 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -59,13 +59,13 @@ <h1>Node.js __VERSION__ documentation</h1> | 59 | 59 | __GTOC_PICKER__ | 60 | 60 | __ALTDOCS__ | 61 | 61 | <li class="picker-header"> | 62 | | - <a href="#"> | | 62 | + <a href="#options-picker" aria-controls="options-picker"> | 63 | 63 | <span class="picker-arrow"></span> | 64 | 64 | Options | 65 | 65 | </a> | 66 | 66 |
| 67 | | - <div class="picker"> | 68 | | - <ul> | | 67 | + <div class="picker" tabindex="-1"> | | 68 | + <ul id="options-picker"> | 69 | 69 | <li> | 70 | 70 | <a href="all.html">View on single page</a> | 71 | 71 | </li> | |
Collapse file Copy file name to clipboardExpand all lines: tools/doc/html.mjs +6-6Lines changed: 6 additions & 6 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -527,11 +527,11 @@ function altDocs(filename, docCreated, versions) { | 527 | 527 |
| 528 | 528 | return list ? ` | 529 | 529 | <li class="picker-header"> | 530 | | - <a href="#"> | | 530 | + <a href="#alt-docs" aria-controls="alt-docs"> | 531 | 531 | <span class="picker-arrow"></span> | 532 | 532 | Other versions | 533 | 533 | </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> | 535 | 535 | </li> | 536 | 536 | ` : ''; | 537 | 537 | } | @@ -557,12 +557,12 @@ function gtocPicker(id) { | 557 | 557 |
| 558 | 558 | return ` | 559 | 559 | <li class="picker-header"> | 560 | | - <a href="#"> | | 560 | + <a href="#gtoc-picker" aria-controls="gtoc-picker"> | 561 | 561 | <span class="picker-arrow"></span> | 562 | 562 | Index | 563 | 563 | </a> | 564 | 564 |
| 565 | | - <div class="picker">${gtoc}</div> | | 565 | + <div class="picker" tabindex="-1" id="gtoc-picker">${gtoc}</div> | 566 | 566 | </li> | 567 | 567 | `; | 568 | 568 | } | @@ -574,12 +574,12 @@ function tocPicker(id, content) { | 574 | 574 |
| 575 | 575 | return ` | 576 | 576 | <li class="picker-header"> | 577 | | - <a href="#"> | | 577 | + <a href="#toc-picker" aria-controls="toc-picker"> | 578 | 578 | <span class="picker-arrow"></span> | 579 | 579 | Table of contents | 580 | 580 | </a> | 581 | 581 |
| 582 | | - <div class="picker">${content.tocPicker}</div> | | 582 | + <div class="picker" tabindex="-1">${content.tocPicker.replace('<ul', '<ul id="toc-picker"')}</div> | 583 | 583 | </li> | 584 | 584 | `; | 585 | 585 | } |
|