From 1da598da0c5def66f249926f95fea23dc869b456 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Sun, 26 Jan 2025 19:31:35 +0100 Subject: [PATCH 1/3] doc: improve accessibility of expandable lists MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR-URL: https://github.com/nodejs/node/pull/56749 Reviewed-By: James M Snell Reviewed-By: Ulises Gascón Reviewed-By: Claudio Wunder --- src/generators/legacy-html/assets/api.js | 6 +++++- src/generators/legacy-html/assets/style.css | 17 ++++++----------- src/generators/legacy-html/template.html | 6 +++--- .../legacy-html/utils/buildDropdowns.mjs | 12 ++++++------ 4 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/generators/legacy-html/assets/api.js b/src/generators/legacy-html/assets/api.js index 7bb67a21..611fa8c8 100644 --- a/src/generators/legacy-html/assets/api.js +++ b/src/generators/legacy-html/assets/api.js @@ -43,6 +43,7 @@ function closeAllPickers() { for (const picker of pickers) { picker.parentNode.classList.remove('expanded'); + picker.ariaExpanded = false; } window.removeEventListener('click', closeAllPickers); @@ -60,6 +61,7 @@ for (const picker of pickers) { const parentNode = picker.parentNode; + picker.ariaExpanded = parentNode.classList.contains('expanded'); picker.addEventListener('click', function (e) { e.preventDefault(); @@ -67,7 +69,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; } @@ -77,9 +79,11 @@ */ requestAnimationFrame(function () { + picker.ariaExpanded = true; parentNode.classList.add('expanded'); window.addEventListener('click', closeAllPickers); window.addEventListener('keydown', onKeyDown); + parentNode.querySelector('.picker a').focus(); }); }); } diff --git a/src/generators/legacy-html/assets/style.css b/src/generators/legacy-html/assets/style.css index a430b7b6..b69c7148 100644 --- a/src/generators/legacy-html/assets/style.css +++ b/src/generators/legacy-html/assets/style.css @@ -203,22 +203,15 @@ li.picker-header .picker-arrow { height: 0.6rem; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; - border-left: 0.6rem solid var(--color-links); + border-left: 0.6rem solid currentColor; border-right: none; margin: 0 0.2rem 0.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: 0.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: 0.6rem solid var(--white); + border-top: 0.6rem solid currentColor; border-bottom: none; border-left: 0.35rem solid transparent; border-right: 0.35rem solid transparent; @@ -226,11 +219,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; diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html index ffcbe9c0..5d0dbccf 100644 --- a/src/generators/legacy-html/template.html +++ b/src/generators/legacy-html/template.html @@ -100,12 +100,12 @@

Node.js __VERSION__ documentation

  • Node.js __VERSION__
    • __TOC_PICKER__ __GTOC_PICKER__ __ALTDOCS__
  • - + Options -
    -
      +
      +
      • View on single page
        • diff --git a/src/generators/legacy-html/utils/buildDropdowns.mjs b/src/generators/legacy-html/utils/buildDropdowns.mjs index 0ec0d879..22d9cb01 100644 --- a/src/generators/legacy-html/utils/buildDropdowns.mjs +++ b/src/generators/legacy-html/utils/buildDropdowns.mjs @@ -23,10 +23,10 @@ import { const buildToC = tableOfContents => { if (tableOfContents.length) { return ( - `
      • ` + + `
      • ` + `` + `Table of contents
        ` + - `
        ${tableOfContents}
        • ` + `
        ${tableOfContents.replace('
        ` ); } @@ -42,9 +42,9 @@ const buildToC = tableOfContents => { * @param {string} navigationContents The stringified Navigation */ const buildNavigation = navigationContents => - `
      • ` + + `
      • ` + `Index` + - `
        • Index` + + `
          ${navigationContents}
          • `; /** @@ -76,9 +76,9 @@ const buildVersions = (api, added, versions) => { }); return ( - `
        • ` + + `
        • ` + `Other versions` + - `
            ${versionsAsList.join('')}
          • ` + `
            ${versionsAsList.join('')}
          ` ); }; From a4ea425e979f08fd9e88d4ee44dd86c87e56ef9d Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Sun, 26 Jan 2025 19:41:45 +0100 Subject: [PATCH 2/3] doc: add "Skip to content" button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR-URL: https://github.com/nodejs/node/pull/56750 Reviewed-By: James M Snell Reviewed-By: Ulises Gascón Reviewed-By: Claudio Wunder --- src/generators/legacy-html/assets/style.css | 14 ++++++++++++++ src/generators/legacy-html/template.html | 1 + 2 files changed, 15 insertions(+) diff --git a/src/generators/legacy-html/assets/style.css b/src/generators/legacy-html/assets/style.css index b69c7148..e769362a 100644 --- a/src/generators/legacy-html/assets/style.css +++ b/src/generators/legacy-html/assets/style.css @@ -142,6 +142,20 @@ a.type { font-size: 0.9em; } +.skip-to-content { + position: fixed; + top: -300%; +} + +.skip-to-content:focus { + display: block; + top: 0; + left: 0; + background-color: var(--green1); + padding: 1rem; + z-index: 999999; +} + #content { position: relative; } diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html index 5d0dbccf..400fe835 100644 --- a/src/generators/legacy-html/template.html +++ b/src/generators/legacy-html/template.html @@ -39,6 +39,7 @@ +