Removed extra opening bracket. Fixed initial display of subnav based …

…on .openSubMenu.
APTrust · Mar 18, 2024 · 6101ae5 · 6101ae5
1 parent c6909ce
commit 6101ae5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/static/js/modules/sidebar.js b/static/js/modules/sidebar.js
@@ -15,5 +15,20 @@ export function initSidebar() {
         sidebarSubnav.classList.toggle('is-sr-only');
         sidebarMore.classList.toggle('is-hidden');
         sidebarLess.classList.toggle('is-hidden');
+
+        // The following is for aria keyboard navigation. We don't want
+        // assistive technologies to tab into a hidden sub-menu. Setting
+        // both aria-expanded and display=block/hidden gives us the 
+        // correct behavior. Tabbing skips closed menu items but works
+        // on open ones. Part of the general accessibility card at
+        // https://trello.com/c/CEQ5jAe1
+        var subnavIsOpen = sidebarMore.classList.contains("is-hidden")
+        if (subnavIsOpen) {
+            sidebarToggle.setAttribute("aria-expanded", "true")
+            sidebarSubnav.style.display = "block"
+        } else {
+            sidebarToggle.setAttribute("aria-expanded", "false")
+            sidebarSubnav.style.display = "none"
+        }
     });
 }
diff --git a/views/shared/_side_nav.html b/views/shared/_side_nav.html
@@ -30,15 +30,14 @@
     <li><a href="/users"><span class="material-icons" aria-hidden="true">people</span> Users</a></li>
     {{ end }}
 
-    <li><a href="#sidebarSubnav" id="sidebarToggle">
+    <li><a href="#sidebarSubnav" id="sidebarToggle" aria-expanded="{{ if not .openSubMenu }}false{{ else }}true{{end}}" aria-controls="sidebarSubnav">
       <span class="material-icons" aria-hidden="true">list</span> 
       <span class="more-options {{ if .openSubMenu }} is-hidden {{ end }}">More </span>  
       <span class="less-options {{ if not .openSubMenu }} is-hidden {{ end }}">Fewer </span> 
       &nbsp;Options
-    </a></li>
-
-    <li>
-      <ul id="sidebarSubnav" class="{{ if not .openSubMenu }} is-sr-only {{ end }}">
+    </a>
+
+      <ul id="sidebarSubnav" class="{{ if not .openSubMenu }} is-sr-only {{ end }}" style="{{ if not .openSubMenu }}display:none{{ else }}display:block{{end}}">
         {{ if userCan .CurrentUser "FileRead" .CurrentUser.InstitutionID }}
         <li><a href="/files?state=A"><span class="material-icons" aria-hidden="true">insert_drive_file</span> Files</a></li>
         {{ end }}