static/frontend: fix for screen reader to announce dynamic updates.

https://screenshot.googleplex.com/3gZVYTGZuQak5nL.png https://screenshot.googleplex.com/4Y2UeBfvDJrMjn7.png https://screenshot.googleplex.com/9SypMfN8K47mJWu.png https://screenshot.googleplex.com/4N7ixFbXxVGPro5.png Change-Id: If80d909c5344de7964df19ec026e8d1224dbb909 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/520177 TryBot-Result: Gopher Robot <[email protected]> Reviewed-by: Suzy Mueller <[email protected]> Run-TryBot: Suzy Mueller <[email protected]> kokoro-CI: kokoro <[email protected]>
golang · Aug 22, 2023 · deea662 · deea662
1 parent ac6b0dd
commit deea662
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/static/frontend/unit/main/main.js b/static/frontend/unit/main/main.js
diff --git a/static/frontend/unit/main/main.js.map b/static/frontend/unit/main/main.js.map
diff --git a/static/frontend/unit/main/main.tmpl b/static/frontend/unit/main/main.tmpl
@@ -74,6 +74,8 @@
       {{end}}
     </div>
   </div>
+  <div id="showInternal-description" hidden> Click to show internal directories. </div>
+  <div id="hideInternal-description" hidden> Click to hide internal directories. </div>
 {{end}}
 
 {{define "main-scripts"}}

diff --git a/static/frontend/unit/main/main.ts b/static/frontend/unit/main/main.ts
@@ -20,14 +20,22 @@ if (directories) {
   if (internalToggle) {
     if (document.querySelector('.UnitDirectories-internal')) {
       internalToggle.style.display = 'block';
+      internalToggle.setAttribute('aria-label', 'Show Internal Directories');
+      internalToggle.setAttribute('aria-describedby', 'showInternal-description');
     }
     internalToggle.addEventListener('click', () => {
       if (directories.classList.contains('UnitDirectories-showInternal')) {
         directories.classList.remove('UnitDirectories-showInternal');
         internalToggle.innerText = 'Show internal';
+        internalToggle.setAttribute('aria-label', 'Show Internal Directories');
+        internalToggle.setAttribute('aria-live', 'polite');
+        internalToggle.setAttribute('aria-describedby', 'showInternal-description');
       } else {
         directories.classList.add('UnitDirectories-showInternal');
         internalToggle.innerText = 'Hide internal';
+        internalToggle.setAttribute('aria-label', 'Hide Internal Directories');
+        internalToggle.setAttribute('aria-live', 'polite');
+        internalToggle.setAttribute('aria-describedby', 'hideInternal-description');
       }
     });
   }

diff --git a/static/shared/table/table.ts b/static/shared/table/table.ts
@@ -118,9 +118,13 @@ export class ExpandableRowsTableController {
     if (someCollapsed) {
       this.toggleAll.innerText = 'Expand all';
       this.toggleAll.onclick = this.expandAllItems;
+      this.toggleAll.setAttribute('aria-label', 'Expand all directories');
+      this.toggleAll.setAttribute('aria-live', 'polite');
     } else {
       this.toggleAll.innerText = 'Collapse all';
       this.toggleAll.onclick = this.collapseAllItems;
+      this.toggleAll.setAttribute('aria-label', 'Collapse all directories');
+      this.toggleAll.setAttribute('aria-live', 'polite');
     }
   }
 }