Improve accessibility and resolve website audit findings

js/hudra.js

@@ -2,17 +2,35 @@ const menuButton = document.querySelector('.menu-button');
 const siteNav = document.querySelector('.site-nav');
 
 if (menuButton && siteNav) {
-  menuButton.addEventListener('click', () => {
-    const isOpen = siteNav.classList.toggle('open');
+  const menuLabel = menuButton.querySelector('.sr-only');
+  const desktopViewport = window.matchMedia('(min-width: 761px)');
+
+  const setMenuState = (isOpen) => {
+    siteNav.classList.toggle('open', isOpen);
     menuButton.setAttribute('aria-expanded', String(isOpen));
+    if (menuLabel) menuLabel.textContent = isOpen ? 'Close navigation' : 'Open navigation';
+  };
+
+  menuButton.addEventListener('click', () => {
+    setMenuState(!siteNav.classList.contains('open'));
   });
 
   siteNav.querySelectorAll('a').forEach((link) => {
-    link.addEventListener('click', () => {
-      siteNav.classList.remove('open');
-      menuButton.setAttribute('aria-expanded', 'false');
-    });
+    link.addEventListener('click', () => setMenuState(false));
   });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && siteNav.classList.contains('open')) {
+      setMenuState(false);
+      menuButton.focus();
+    }
+  });
+
+  desktopViewport.addEventListener('change', (event) => {
+    if (event.matches) setMenuState(false);
+  });
+
+  setMenuState(false);
 }
 
 const year = document.getElementById('year');

js/napper.js

@@ -2,17 +2,35 @@ const menuButton = document.querySelector('.menu-button');
 const navigation = document.querySelector('#site-nav');
 
 if (menuButton && navigation) {
-  menuButton.addEventListener('click', () => {
-    const isOpen = navigation.classList.toggle('open');
+  const menuLabel = menuButton.querySelector('.sr-only');
+  const desktopViewport = window.matchMedia('(min-width: 761px)');
+
+  const setMenuState = (isOpen) => {
+    navigation.classList.toggle('open', isOpen);
     menuButton.setAttribute('aria-expanded', String(isOpen));
+    if (menuLabel) menuLabel.textContent = isOpen ? 'Close navigation' : 'Open navigation';
+  };
+
+  menuButton.addEventListener('click', () => {
+    setMenuState(!navigation.classList.contains('open'));
   });
 
   navigation.querySelectorAll('a').forEach((link) => {
-    link.addEventListener('click', () => {
-      navigation.classList.remove('open');
-      menuButton.setAttribute('aria-expanded', 'false');
-    });
+    link.addEventListener('click', () => setMenuState(false));
   });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && navigation.classList.contains('open')) {
+      setMenuState(false);
+      menuButton.focus();
+    }
+  });
+
+  desktopViewport.addEventListener('change', (event) => {
+    if (event.matches) setMenuState(false);
+  });
+
+  setMenuState(false);
 }
 
 const year = document.querySelector('#year');