chore: port changes from node core

Author: ovflowd

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,14 +61,15 @@
     for (const picker of pickers) {
       const parentNode = picker.parentNode;
 
+      picker.ariaExpanded = parentNode.classList.contains('expanded');
       picker.addEventListener('click', function (e) {
         e.preventDefault();
 
         /*
           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();
         });
       });
     }

src/generators/legacy-html/assets/style.css

@@ -137,8 +137,8 @@ code,
 .pre,
 span.type,
 a.type {
-  font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
+  font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
   font-size: 0.9em;
 }
 
@@ -203,34 +203,29 @@ 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;
   margin-bottom: 0;
 }
 
 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;
@@ -592,35 +587,26 @@ hr {
   margin: 0;
 }
 
-.toc li a::before {
-  content: '■';
-  color: var(--color-text-primary);
-  padding-right: 1em;
-  font-size: 0.9em;
-}
-
-.toc li a:hover::before {
-  color: var(--white);
-}
-
-.toc ul ul a {
-  padding-left: 1rem;
+.toc > ul:first-child {
+  margin-left: 1rem;
 }
 
-.toc ul ul ul a {
-  padding-left: 2rem;
+.toc li {
+  display: list-item;
+  list-style: square;
 }
 
-.toc ul ul ul ul a {
-  padding-left: 3rem;
+.toc li a {
+  display: inline;
+  padding-left: 0;
 }
 
-.toc ul ul ul ul ul a {
-  padding-left: 4rem;
+.toc li a:hover::before {
+  color: var(--white);
 }
 
-.toc ul ul ul ul ul ul a {
-  padding-left: 5rem;
+.toc ul {
+  padding-left: 1rem;
 }
 
 #toc .stability_0::after,

src/generators/legacy-html/template.html

@@ -100,12 +100,12 @@ <h1>Node.js __VERSION__ documentation</h1>
               <li class="pinned-header">Node.js __VERSION__</li>
               __TOC_PICKER__ __GTOC_PICKER__ __ALTDOCS__
               <li class="picker-header">
-                <a href="#">
+                <a href="#options-picker" aria-controls="options-picker">
                   <span class="picker-arrow"></span>
                   Options
                 </a>
-                <div class="picker">
-                  <ul>
+                <div class="picker" tabindex="-1">
+                  <ul id="options-picker">
                     <li>
                       <a href="all.html">View on single page</a>
                     </li>

src/generators/legacy-html/utils/buildDropdowns.mjs

@@ -42,9 +42,9 @@ const buildToC = tableOfContents => {
  * @param {string} navigationContents The stringified Navigation
  */
 const buildNavigation = navigationContents =>
-  `<li class="picker-header"><a href="#">` +
+  `<li class="picker-header"><a href="#gtoc-picker" aria-controls="gtoc-picker">` +
   `<span class="picker-arrow"></span>Index</a>` +
-  `<div class="picker"><ul><li><a href="index.html">Index</a>` +
+  `<div class="picker" tabindex="-1"><ul id="gtoc-picker"><li><a href="index.html">Index</a>` +
   `</li></ul><hr class="line" />${navigationContents}</div></li>`;
 
 /**
@@ -76,9 +76,9 @@ const buildVersions = (api, added, versions) => {
   });
 
   return (
-    `<li class="picker-header"><a href="#">` +
+    `<li class="picker-header"><a href="#alt-docs" aria-controls="alt-docs">` +
     `<span class="picker-arrow"></span>Other versions</a>` +
-    `<div class="picker"><ol id="alt-docs">${versionsAsList.join('')}</ol></div></li>`
+    `<div class="picker" tabindex="-1"><ol id="alt-docs">${versionsAsList.join('')}</ol></div></li>`
   );
 };