Merge pull request #306 from maniflames/282-a11y-navigation-fixes

Merge navigation open and close triggers

src/_assets/js/page-navigation.js

@@ -1,22 +1,23 @@
 document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('load-on-javascript').removeAttribute('hidden');
 
-
   if (!document.getElementById('load-on-javascript').hasAttribute('hidden')) {
-    const openToggle = document.getElementById('navigation-open');
-    const closeToggle = document.getElementById('navigation-close');
-
+    const navToggle = document.getElementById('navigation-toggle');
+
     function handleInteraction() {
-      if (document.body.classList.contains('navigation-opened')) {
+      const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
+
+      if (isExpanded) {
+        navToggle.setAttribute('aria-expanded', 'false');
         document.body.classList.remove('navigation-opened');
         document.body.classList.add('navigation-closed');
       } else {
-        document.body.classList.add('navigation-opened');
+        navToggle.setAttribute('aria-expanded', 'true');
         document.body.classList.remove('navigation-closed');
+        document.body.classList.add('navigation-opened');
       }
     }
 
-    openToggle.addEventListener('click', handleInteraction);
-    closeToggle.addEventListener('click', handleInteraction);
+    navToggle.addEventListener('click', handleInteraction);
   }
 });

src/_includes/partials/page-header/navigation-triggers.css

@@ -43,24 +43,23 @@
   padding: 0;
   font: inherit;
   cursor: pointer;
-  outline: inherit;
   width: 26px;
   position: absolute;
   top: var(--spacing-half);
   right: var(--spacing);
   z-index: 10;
 }
 
-/* Make mobile navigation scrollable */
-
-#navigation-close,
-.navigation-opened #navigation-open {
+#navigation-toggle .navigation-close-icon,
+.navigation-opened #navigation-toggle .navigation-open-icon {
   display: none;
 }
 
-.navigation-opened #navigation-close {
+.navigation-opened #navigation-toggle .navigation-close-icon {
   display: block;
 }
+
+/* Make mobile navigation scrollable */
 .navigation-opened {
   overflow: hidden;
   height: 100vh;

src/_includes/partials/page-header/navigation-triggers.liquid

@@ -22,15 +22,20 @@
     </noscript>
 
     <div id="load-on-javascript" hidden>
-        <button id="navigation-open" class="navigation-open mobile-only">
-            {%- include svg/icon_menu.svg -%}
+        <button id="navigation-toggle" aria-expanded="false" class="navigation-open mobile-only">
+            <i class="navigation-open-icon">
+                {%- include svg/icon_menu.svg -%}
+            </i>
+            <i class="navigation-close-icon">
+                {%- include svg/icon_close_menu.svg -%}
+            </i>
             <span class="visually-hidden">Navigation</span>
         </button>
 
-        <button id="navigation-close" class="navigation-close mobile-only">
+        {% comment %} <button id="navigation-close" class="navigation-close mobile-only">
             {%- include svg/icon_close_menu.svg -%}
             <span class="visually-hidden">Navigation</span>
-        </button>
+        </button> {% endcomment %}
     </div>
 
 </div>