From 02c3806059fc3cbbe8d997b8d9e45481c01f3157 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 24 Jan 2025 19:14:24 +0100 Subject: [PATCH 1/5] doc: improve accessibility of expandable lists --- doc/api_assets/api.js | 1 + doc/template.html | 2 +- tools/doc/html.mjs | 6 +++--- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 394b5ba990946c..669cb73fe0b17e 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -78,6 +78,7 @@ parentNode.classList.add('expanded'); window.addEventListener('click', closeAllPickers); window.addEventListener('keydown', onKeyDown); + parentNode.querySelector('.picker a').focus(); }); }); } diff --git a/doc/template.html b/doc/template.html index ab8be0e747f492..991be2608ffbd8 100644 --- a/doc/template.html +++ b/doc/template.html @@ -64,7 +64,7 @@

Node.js __VERSION__ documentation

Options -
+
  • View on single page diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs index 68762d89e048ce..597fe1f971cdc2 100644 --- a/tools/doc/html.mjs +++ b/tools/doc/html.mjs @@ -531,7 +531,7 @@ function altDocs(filename, docCreated, versions) { Other versions -
      ${list}
    +
      ${list}
    • ` : ''; } @@ -562,7 +562,7 @@ function gtocPicker(id) { Index -
    ${gtoc}
    +
    ${gtoc}
    `; } @@ -579,7 +579,7 @@ function tocPicker(id, content) { Table of contents -
    ${content.tocPicker}
    +
    ${content.tocPicker}
    `; } From d819a1146213c3a509cc295e2ac8eb39e11ec3e8 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 24 Jan 2025 22:36:33 +0100 Subject: [PATCH 2/5] fixup! --- doc/api_assets/api.js | 7 +++++-- doc/template.html | 4 ++-- tools/doc/html.mjs | 10 +++++----- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 669cb73fe0b17e..24c735111c1246 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -41,6 +41,7 @@ function closeAllPickers() { for (const picker of pickers) { picker.parentNode.classList.remove('expanded'); + picker.ariaExpanded = false; } window.removeEventListener('click', closeAllPickers); @@ -57,7 +58,8 @@ for (const picker of pickers) { const parentNode = picker.parentNode; - + + picker.ariaExpanded = parentNode.classList.contains('expanded'); picker.addEventListener('click', function(e) { e.preventDefault(); @@ -65,7 +67,7 @@ closeAllPickers as window event trigger already closed all the pickers, if it already closed there is nothing else to do here */ - if (parentNode.classList.contains('expanded')) { + if (picker.ariaExpanded === 'true') { return; } @@ -75,6 +77,7 @@ */ requestAnimationFrame(function() { + picker.ariaExpanded = true; parentNode.classList.add('expanded'); window.addEventListener('click', closeAllPickers); window.addEventListener('keydown', onKeyDown); diff --git a/doc/template.html b/doc/template.html index 991be2608ffbd8..51e789b7e6168c 100644 --- a/doc/template.html +++ b/doc/template.html @@ -59,13 +59,13 @@

    Node.js __VERSION__ documentation

    __GTOC_PICKER__ __ALTDOCS__
  • - + Options
    -
      +
      • View on single page
        • diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs index 597fe1f971cdc2..26892acf784849 100644 --- a/tools/doc/html.mjs +++ b/tools/doc/html.mjs @@ -527,7 +527,7 @@ function altDocs(filename, docCreated, versions) { return list ? `
      • - + Other versions @@ -557,12 +557,12 @@ function gtocPicker(id) { return `
      • - + Index -
        ${gtoc}
        +
        ${gtoc}
        • `; } @@ -574,12 +574,12 @@ function tocPicker(id, content) { return `
      • - + Table of contents -
        ${content.tocPicker}
        +
        ${content.tocPicker.replace('
          ', '
            ')}
        • `; } From e434b1a2ced138b617156399e397e419d9f43873 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 24 Jan 2025 23:21:27 +0100 Subject: [PATCH 3/5] fixup! fixup! --- doc/api_assets/api.js | 2 +- tools/doc/html.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js index 24c735111c1246..e86f110e0346bf 100644 --- a/doc/api_assets/api.js +++ b/doc/api_assets/api.js @@ -58,7 +58,7 @@ for (const picker of pickers) { const parentNode = picker.parentNode; - + picker.ariaExpanded = parentNode.classList.contains('expanded'); picker.addEventListener('click', function(e) { e.preventDefault(); diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs index 26892acf784849..d61d335c7b8957 100644 --- a/tools/doc/html.mjs +++ b/tools/doc/html.mjs @@ -579,7 +579,7 @@ function tocPicker(id, content) { Table of contents -
        ${content.tocPicker.replace('
          ', '
            ')}
        +
        ${content.tocPicker.replace(' `; } From 59cec372664a55e4c5966303a5a6253597e5f0dc Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 24 Jan 2025 23:27:14 +0100 Subject: [PATCH 4/5] fixup! --- doc/api_assets/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 28a284e3b975b8..e6d158f3e63c9e 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -196,6 +196,7 @@ li.picker-header a:hover .picker-arrow { li.picker-header.expanded a:focus .picker-arrow, li.picker-header.expanded a:active .picker-arrow, li.picker-header.expanded a:hover .picker-arrow, +:root:not(.has-js) li.picker-header:focus-within .picker-arrow, :root:not(.has-js) li.picker-header:hover .picker-arrow { border-top: .6rem solid var(--white); border-bottom: none; @@ -205,11 +206,13 @@ li.picker-header.expanded a:hover .picker-arrow, } li.picker-header.expanded > a, +:root:not(.has-js) li.picker-header:focus-within > a, :root:not(.has-js) li.picker-header:hover > a { border-radius: 2px 2px 0 0; } li.picker-header.expanded > .picker, +:root:not(.has-js) li.picker-header:focus-within > .picker, :root:not(.has-js) li.picker-header:hover > .picker { display: block; z-index: 1; From 2c2b0327b899cc4ed232c9d99cb5724e056c5ec4 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 24 Jan 2025 23:53:33 +0100 Subject: [PATCH 5/5] fixup! --- doc/api_assets/style.css | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index e6d158f3e63c9e..a40990a39252a4 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -182,23 +182,15 @@ li.picker-header .picker-arrow { height: .6rem; border-top: .3rem solid transparent; border-bottom: .3rem solid transparent; - border-left: .6rem solid var(--color-links); + border-left: .6rem solid currentColor; border-right: none; margin: 0 .2rem .05rem 0; } -li.picker-header a:focus .picker-arrow, -li.picker-header a:active .picker-arrow, -li.picker-header a:hover .picker-arrow { - border-left: .6rem solid var(--white); -} - -li.picker-header.expanded a:focus .picker-arrow, -li.picker-header.expanded a:active .picker-arrow, -li.picker-header.expanded a:hover .picker-arrow, +li.picker-header.expanded .picker-arrow, :root:not(.has-js) li.picker-header:focus-within .picker-arrow, :root:not(.has-js) li.picker-header:hover .picker-arrow { - border-top: .6rem solid var(--white); + border-top: .6rem solid currentColor; border-bottom: none; border-left: .35rem solid transparent; border-right: .35rem solid transparent;