VACMS-28709 In This Section a11y fix

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>

src/site/navigation/sidebar_nav.drupal.liquid

@@ -1,9 +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" role="dialog" aria-labelledby="sidebar_header">
+<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');
@@ -115,5 +123,5 @@
 
         {% endfor %}
 
-    </div>
+    </dialog>
 </nav>