VACMS-28709 in this section a11y iOS fix (#2409)

department-of-veterans-affairs · Jan 9, 2025 · f4568b5 · f4568b5
1 parent b530f9f
commit f4568b5
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,15 +1,26 @@
 <nav data-template="navigation/sidebar_nav" aria-label="Secondary" id="va-detailpage-sidebar" data-drupal-sidebar="true" class="va-drupal-sidebarnav usa-width-one-fourth va-sidebarnav">
-    <div>
-
+<div aria-modal="true" role="dialog" aria-labelledby="sidebar_header">
         <button class="va-sidenav-btn-close va-sidebarnav-close" type="button" aria-label="Close this menu">
             <va-icon icon="close" size="3" class="vads-u-color--gray-dark"></va-icon>
         </button>
+        <script>
+            document.addEventListener('keydown', function(event) {
+                if (event.key === 'Escape') {
+                    const sidebar = document.getElementById('va-detailpage-sidebar');
+                    const closeButton = sidebar.querySelector('.va-sidenav-btn-close');
+
+                if (sidebar && closeButton) {
+                    closeButton.click();
+                }
+                }
+            });
+        </script>
 
         {% for link in sidebar.links %}
             {% if forloop.first == true %}
                 <div class="vads-u-display--flex vads-u-align-items--center left-side-nav-title">
                     {{ fieldTitleIcon | getHubIcon: '3', 'vads-u-margin-right--1' }}
-                    <h4>{{ link.label }}</h4>
+                    <h4 id="sidebar_header">{{ link.label }}</h4>
                 </div>
 
                 {% assign deepLinksString = link.links | findCurrentPathDepth: entityUrl.path %}
@@ -18,6 +29,7 @@
                 {% assign deepLinks = deepLinksObj.links %}
 
                 {% if depth <= 2 %}
+                    <nav aria-label="Secondary">
                     <ul class="usa-accordion">
                     {% for link in link.links %}
                         <li>
@@ -73,6 +85,7 @@
                         </li>
                     {% endfor %}
                 </ul>
+                </nav>
             {% else %}
                 <div class="sidenav-previous-page">
                     <a href="{{ deepLinks.url.path }}">{{ deepLinks.label }}</a>