From 6101ae5527833d45dbfd1eb1582c1e0b62740831 Mon Sep 17 00:00:00 2001
From: "A. Diamond" <diamond@sheprador.com>
Date: Mon, 18 Mar 2024 15:32:01 -0400
Subject: [PATCH] Removed extra opening bracket. Fixed initial display of
 subnav based on .openSubMenu.

---
 static/js/modules/sidebar.js | 15 +++++++++++++++
 views/shared/_side_nav.html  |  9 ++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/static/js/modules/sidebar.js b/static/js/modules/sidebar.js
index 5546ba92..45a1b6ac 100644
--- 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
index c3e4ac1f..7df3de18 100644
--- 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 }}