Final edits to drop

Author: lwasser

_includes/masthead.html

@@ -3,11 +3,11 @@
 <div class="masthead">
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
-      <nav id="site-nav" class="nav__topbar" aria-label="Main Navigation">
+      <nav id="site-nav" class="nav__topbar" aria-label="Top Bar">
         <!-- More accessible as a screen reader will group the title and image in the same link -->
         {% unless logo_path == empty %}
         <a class="site-logo" href="{{ '/' | relative_url }}">
-          <img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}">
+          <img src="{{ logo_path | relative_url }}" alt="Welcome to the pyOpenSci website. This is the pyOpenSci logo.">
           <span class="site-title">pyOpenSci</span>
         </a>
         {% endunless %}
@@ -17,7 +17,7 @@
               {% if alink.sub-nav %}
               <!-- If there is sub nav to display -->
              <li class="dropdown">
-                <button class="dropbtn" tabindex="0">{{ alink.title }} <i class="fas fa-caret-down"></i>
+                <button class="dropbtn" tabindex="0" aria-expanded="false">{{ alink.title }} <i class="fas fa-caret-down"></i>
                 </button>
                 <ul class="dropdown-content">
                   {% for subnav in alink.sub-nav %}
@@ -37,18 +37,20 @@
 
       </li>
       </ul> 
+      <!--
       {% if site.search == true %}
           <button class="search__toggle" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
           <i class="fas fa-search"></i>
         </button>
       {% endif %}
+      -->
 
 
       <ul class="hidden-links hidden"></ul>
         <!-- Burger button  - span class for screen readers-->
-        <button class="hamburger__btn-toggle" type="button" count="1">
-          <span class="visually-hidden">Toggle menu</span> <!--screen readers-->
+        <button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
+          <span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
           <div class="burger__icon"></div>
         </button>
       </nav>
@@ -58,27 +60,42 @@
 
 
 <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+
+<!-- This works now but when you open the menu its not saying aria expanded or 
+prompting the screen reader-->
 <script>
   $(document).ready(function () {
   $(".hamburger__btn-toggle").click(function (e) {
     $(this).toggleClass("close");
+    // toggle expanded to try on click
+    $(this).attr('aria-expanded', function (i, attr) {
+    return attr == 'true' ? 'false' : 'true'});
+
     e.preventDefault();
     $(".nav__links").toggleClass("vertical");
   });
 
   $(".dropdown").click(function (e) {
-    //e.stopPropagation();
-    //e.preventDefault();
-    // close when click outside
+    // close when user clicks nav
     $(this).find(".dropdown-content").toggleClass("open");
+    // Handle making sure other drop menus are "closed" when another is open
     $(this).siblings(".dropdown").find(".dropdown-content").removeClass("open");
+    $(this).siblings(".dropdown").find(".dropbtn").attr("aria-expanded", "false");
+
+    // this works but if user clicks on another drop down it should also return to closed
+    // with this code it just toggles the next thing that the user clicks so both 
+    // dropdowns are set to expanded:true
+    $(this).find(".dropbtn").attr('aria-expanded', function (i, attr) {
+    return attr == 'true' ? 'false' : 'true' });
   });
 
   // Close dropdown when u click outside of the nav ul
   $(document).click(function (e) {
     if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
       $(".dropdown-content").removeClass("open");
     }
+
+    
   });
 });
 

assets/css/main.scss

@@ -223,8 +223,9 @@ parent text width  */
   align-items: flex-start;
   padding-top: 2em;
   top: 70%;
-  left: 60%;
-  width: 40%;
+  left: 40%;
+  width: 60%;
+  font-size: 1.2em;
   background-color: #fff;
   z-index: 1;
   border: 1px solid #f2f3f3;