adjusted subnav to hover

app/assets/javascripts/subNav.js

@@ -1,29 +0,0 @@
-(function(window) {
-    "use strict";
-
-    document.addEventListener('DOMContentLoaded', function() {
-        const sideNavLinks = document.querySelectorAll('.usa-sidenav__item');
-        const currentURL = window.location.pathname;
-
-        sideNavLinks.forEach(link => {
-            const sublist = link.querySelector('.usa-sidenav__sublist');
-            const parentLink = link.querySelector('a');
-
-            const isMatch = parentLink && sublist && currentURL === parentLink.getAttribute('href');
-            if (isMatch) {
-                sublist.classList.replace('display-none', 'display-block');
-            }
-
-            link.addEventListener('click', function(event) {
-                if (sublist && event.target === parentLink) {
-                    event.preventDefault();
-
-                    sublist.classList.toggle('display-none');
-                    sublist.classList.toggle('display-block');
-
-                    setTimeout(() => window.location.href = parentLink.href, 50);
-                }
-            });
-        });
-    });
-})(window);

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -884,3 +884,16 @@ li.linked-card:hover svg,
    -webkit-mask-size: 1.75ex 1.75ex;
    mask-size: 1.75ex 1.75ex;
 }
+
+.usa-sidenav__sublist {
+   display: none;
+}
+
+.usa-sidenav__item:hover .usa-sidenav__sublist,
+.usa-sidenav__item:focus-within .usa-sidenav__sublist {
+   display: block;
+}
+
+.usa-sidenav__item a {
+   display: block;
+}

app/templates/base.html

@@ -57,11 +57,15 @@
                       <ul class="usa-sidenav">
                         {% for item in navigation_links %}
                           <li class="usa-sidenav__item">
-                            <a class="{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item.link) }}">{{ item.name }}</a>
+                            <a href="{{ url_for(item.link) }}"
+                              class="parent-link {% if item['link'] == request.endpoint %} usa-current {% endif %}"
+                              aria-haspopup="true" aria-expanded="false">
+                              {{ item.name }}
+                            </a>
                             {% if item.sub_navigation_items %}
-                              <ul class="usa-sidenav__sublist display-none">
+                              <ul class="usa-sidenav__sublist" role="menu">
                                 {% for sub_item in item.sub_navigation_items %}
-                                  <li>
+                                  <li role="menuitem">
                                     <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>
                                   </li>
                                 {% endfor %}