From df253d0a3345ade5565c4c3cc02257c6cc7409f3 Mon Sep 17 00:00:00 2001
From: Jake Mason <dev.jakemason@gmail.com>
Date: Mon, 16 Jan 2023 23:02:36 -0500
Subject: [PATCH] Some more basic dropdown a11y considerations

---
 src/templates/src/include/header.html | 34 +++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html
index be269900..a88bb25c 100644
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@@ -71,8 +71,10 @@
                         <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
                     </div>
                     <div class="root-item">
-                        <a>Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a>
-                        <div class="submenu b--theme-dark">
+                        <a aria-expanded="false" aria-controls="media-submenu" class="menu-dropdown-js" href="#">
+                          Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
+                        </a>
+                        <div class="submenu b--theme-dark" id="media-submenu">
                             <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
                             <a href="{{ .Header.PodcastUrl }}">Podcast</a>
                             <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
@@ -83,8 +85,10 @@
                         <a href="{{ .Header.ForumsUrl }}">Forums</a>
                     </div>
                     <div class="root-item">
-                        <a>Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a>
-                        <div class="submenu b--theme-dark">
+                        <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
+                          Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
+                        </a>
+                        <div class="submenu b--theme-dark" id="resource-submenu">
                             <a href="{{ .Header.EducationUrl }}">Education</a>
                         </div>
                     </div>
@@ -133,6 +137,28 @@
             }
         }
 
+        // dropdown accessiblity 
+        { 
+          const dropdowns = document.querySelectorAll('.menu-dropdown-js');
+          
+          for(let i = 0; i < dropdowns.length; i++) {
+                let dropdown = dropdowns[i];
+                dropdown.addEventListener('click', e => {
+                e.preventDefault();
+                for(let j = 0; j < dropdowns.length; j++){
+                  let each = dropdowns[j];
+                  if(each != dropdown){
+                    each.setAttribute("aria-expanded", false);
+                  }
+                }
+                // getAttribute returns a string so we have to do it this way
+                var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false"; 
+                dropdown.setAttribute("aria-expanded", toSetTo);
+                console.log(dropdown);
+            }); 
+          }
+        }
+
         // set up login form
         {
             const loginPopup = document.getElementById("login-popup");