Merge pull request #673 from openstad/fix/mobileMenu-keyboardFocus

added keyboard focus trap to mobile menu

apps/cms-server/modules/asset/ui/src/index.js

@@ -66,13 +66,44 @@ function adjustMenu() {
     closeButtonSpan.textContent = 'Menu tonen';
   }
 
+  function trapFocus(element) {
+    const focusableElements = element.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+    element.addEventListener('keydown', (event) => {
+      const isTabPressed = (event.key === 'Tab' || event.keyCode === 9);
+
+      if (!isTabPressed) {
+        return;
+      }
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          lastFocusableElement.focus();
+          event.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          event.preventDefault();
+        }
+      }
+    });
+  }
+
+
   closeButton.addEventListener('click', () => {
     const isExpanded = closeButton.getAttribute('aria-expanded') === 'true';
     closeButton.setAttribute('aria-expanded', !isExpanded);
     mainMenuContainer.setAttribute('aria-hidden', isExpanded);
 
     navContainer.classList.toggle('--show');
     closeButtonSpan.textContent = isExpanded ? 'Menu tonen' : 'Menu verbergen';
+
+    if (!isExpanded) {
+      trapFocus(navContainer);
+    }
   });
 
   navbar.addEventListener('focusout', (event) => {

packages/resource-overview/src/resource-overview.css

@@ -55,12 +55,12 @@
   }
 
   .osc-resource-overview-content .osc-resource-overview-resource-collection {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
   }
 
   .osc-resource-overview-content.full
     .osc-resource-overview-resource-collection {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
   }
   #stem-begroot-filter {
     grid-column: 1 / -1;