fixup!

nodejs · Jan 24, 2025 · d819a11 · d819a11
1 parent 02c3806
commit d819a11
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git 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,15 +58,16 @@
 
     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;
         }
 
@@ -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
@@ -59,13 +59,13 @@ <h1>Node.js __VERSION__ documentation</h1>
             __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" tabindex="-1">
-                <ul>
+                <ul id="options-picker">
                   <li>
                     <a href="all.html">View on single page</a>
                   </li>

diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
@@ -527,7 +527,7 @@ function altDocs(filename, docCreated, versions) {
 
   return list ? `
     <li class="picker-header">
-      <a href="#">
+      <a href="#alt-docs" aria-controls="alt-docs">
         <span class="picker-arrow"></span>
         Other versions
       </a>
@@ -557,12 +557,12 @@ function gtocPicker(id) {
 
   return `
     <li class="picker-header">
-      <a href="#">
+      <a href="#gtoc-picker" aria-controls="gtoc-picker">
         <span class="picker-arrow"></span>
         Index
       </a>
 
-      <div class="picker" tabindex="-1">${gtoc}</div>
+      <div class="picker" tabindex="-1" id="gtoc-picker">${gtoc}</div>
     </li>
   `;
 }
@@ -574,12 +574,12 @@ function tocPicker(id, content) {
 
   return `
     <li class="picker-header">
-      <a href="#">
+      <a href="#toc-picker" aria-controls="toc-picker">
         <span class="picker-arrow"></span>
         Table of contents
       </a>
 
-      <div class="picker" tabindex="-1">${content.tocPicker}</div>
+      <div class="picker" tabindex="-1">${content.tocPicker.replace('<ul>', '<ul id="toc-picker">')}</div>
     </li>
   `;
 }