From 375932e0dcac2c0114958a642d49ff6f901ae719 Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Mon, 6 Jan 2025 13:23:26 -0800
Subject: [PATCH 1/6] changes

---
 src/site/navigation/sidebar_nav.drupal.liquid | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index a39db21753..ccf64201fe 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,6 +1,5 @@
 <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" aria-labelledby="Family and caaregiver benefits" role="dialog">
         <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>

From 2732179a4e3d590f2df857b2101e9e0029a09b12 Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:56:29 -0800
Subject: [PATCH 2/6] updates

---
 src/site/navigation/sidebar_nav.drupal.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index ccf64201fe..badea6d24c 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,5 +1,5 @@
 <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 aria-modal="true" aria-labelledby="Family and caaregiver benefits" role="dialog">
+<div aria-modal="true" role="dialog">
         <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>

From 660a1d2baafc2f6bc6dda095a861d23f8b680870 Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Wed, 8 Jan 2025 17:35:39 -0800
Subject: [PATCH 3/6] updates from comments

---
 src/site/navigation/sidebar_nav.drupal.liquid | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index badea6d24c..3c89c668b5 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,14 +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 aria-modal="true" role="dialog">
+<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 %}
@@ -17,6 +29,7 @@
                 {% assign deepLinks = deepLinksObj.links %}
 
                 {% if depth <= 2 %}
+                    <nav aria-label="Secondary">
                     <ul class="usa-accordion">
                     {% for link in link.links %}
                         <li>
@@ -72,6 +85,7 @@
                         </li>
                     {% endfor %}
                 </ul>
+                </nav>
             {% else %}
                 <div class="sidenav-previous-page">
                     <a href="{{ deepLinks.url.path }}">{{ deepLinks.label }}</a>

From 5fc09b3615a485c67ca2926b1faef3e6c148f705 Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:22:17 -0800
Subject: [PATCH 4/6] updates per testing in staging

---
 src/site/navigation/sidebar_nav.drupal.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index 3c89c668b5..f35a3ae0a3 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,5 +1,5 @@
 <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 aria-modal="true" role="dialog" aria-labelledby="sidebar_header">
+<dialog aria-modal="true" 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>
@@ -115,5 +115,5 @@
 
         {% endfor %}
 
-    </div>
+    </dialog>
 </nav>

From d0421378d8508519802609e66a31c1149760f1e2 Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Thu, 23 Jan 2025 09:53:21 -0800
Subject: [PATCH 5/6] updates per testing in staging

---
 src/site/navigation/sidebar_nav.drupal.liquid | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index f35a3ae0a3..b94eb45678 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,5 +1,6 @@
 <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">
-<dialog aria-modal="true" aria-labelledby="sidebar_header">
+<div aria-modal="true" aria-labelledby="sidebar_header">
+    <dialog>
         <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>
@@ -116,4 +117,5 @@
         {% endfor %}
 
     </dialog>
+    </div>
 </nav>

From 81f123e997b75888c0233453a8410ede7d2ff1ba Mon Sep 17 00:00:00 2001
From: Chris Kim <42885441+chriskim2311@users.noreply.github.com>
Date: Thu, 23 Jan 2025 11:20:51 -0800
Subject: [PATCH 6/6] add event listeners

---
 src/site/components/navigation-sidebar-trigger.html |  2 +-
 src/site/navigation/sidebar_nav.drupal.liquid       | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/site/components/navigation-sidebar-trigger.html b/src/site/components/navigation-sidebar-trigger.html
index 1267576999..c95deb8498 100644
--- a/src/site/components/navigation-sidebar-trigger.html
+++ b/src/site/components/navigation-sidebar-trigger.html
@@ -12,7 +12,7 @@
   <!-- The button background is to hide any content that is behind the trigger -->
   <div class="button-background"></div>
   <div class="button-wrapper">
-    <button aria-controls="va-detailpage-sidebar">
+    <button aria-controls="va-detailpage-sidebar" id="open-sidebar-dialog">
       <strong>In this section</strong>
       <va-icon icon="menu" size="3" class="vads-u-color--link-default"></va-icon>
     </button>
diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
index b94eb45678..665426b2ff 100644
--- a/src/site/navigation/sidebar_nav.drupal.liquid
+++ b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,10 +1,17 @@
 <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 aria-modal="true" aria-labelledby="sidebar_header">
-    <dialog>
+<dialog aria-modal="true" aria-labelledby="sidebar_header" id="sidebar-dialog">
         <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>
+            const dialog = document.getElementById('sidebar-dialog');
+            const openBtn = document.getElementById("open-sidebar-dialog")
+
+            openBtn.addEventListener('click', () => {
+                dialog.showModal();
+            });
+
+
             document.addEventListener('keydown', function(event) {
                 if (event.key === 'Escape') {
                     const sidebar = document.getElementById('va-detailpage-sidebar');
@@ -117,5 +124,4 @@
         {% endfor %}
 
     </dialog>
-    </div>
 </nav>