improve the accessibility of the search form and the mobile navigation

markocupic · Jan 4, 2025 · 174fb9d · 174fb9d
1 parent ff223f5
commit 174fb9d
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 13 deletions.
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -88,15 +88,17 @@ document.addEventListener('DOMContentLoaded', (event) => {
     function openSearchForm() {
         searchContainer.classList.add('is-pre-active');
         window.setTimeout(() => {
-            searchContainer.setAttribute('aria-expanded', 'true');
+            document.getElementById('openWebsiteSearchButton').setAttribute('aria-expanded', 'true');
+            document.getElementById('closeWebsiteSearchButton').setAttribute('aria-expanded', 'true');
             searchContainer.classList.add('is-active');
             searchContainer.classList.remove('is-pre-active');
         }, 100);
     }
 
     // Close search form
     function closeSearchForm() {
-        searchContainer.setAttribute('aria-expanded', 'false');
+        document.getElementById('openWebsiteSearchButton').setAttribute('aria-expanded', 'false');
+        document.getElementById('closeWebsiteSearchButton').setAttribute('aria-expanded', 'false');
         searchContainer.classList.remove('is-active');
         searchContainer.classList.remove('is-pre-active');
     }

diff --git a/contao/templates/custom-section/mod_custom_section_header_sac_pilatus.html.twig b/contao/templates/custom-section/mod_custom_section_header_sac_pilatus.html.twig
@@ -65,13 +65,13 @@
                 <a href="{{ insert_tag('link_url::kurse') }}" class="d-none d-md-block btn btn-danger ms-2 me-2"><i style="width:20px;font-size:1rem !important;" class="fa-regular fa-signal"></i> Kurse</a>
 
                 <!-- Searchbar toggler -->
-                <button id="openWebsiteSearchButton" class="btn btn-lg btn-link ps-2 ps-sm-3 pe-2 pe-2 pe-sm-3 ms-3 search-toggler" data-action="search-bar-toggle" aria-controls="websiteSearch" aria-label="Suche öffnen">
+                <button id="openWebsiteSearchButton" class="btn btn-lg btn-link ps-2 ps-sm-3 pe-2 pe-2 pe-sm-3 ms-3 search-toggler" data-action="search-bar-toggle" aria-expanded="false" aria-controls="websiteSearch" aria-label="Suche öffnen">
                     <i class="fa-light fa-search" aria-label="Suche" title="Suche"></i>
                 </button>
                 <!-- End Searchbar toggler -->
 
                 <!-- Navbar toggler mobile -->
-                <button class="navigation-toggler d-xl-none btn btn-lg btn-link ps-2 ps-sm-3 pe-2 pe-2 pe-sm-3 ms-2" aria-controls="sidebar" aria-label="Navigation öffnen">
+                <button class="navigation-toggler d-xl-none btn btn-lg btn-link ps-2 ps-sm-3 pe-2 pe-2 pe-sm-3 ms-2" aria-expanded="false" aria-controls="sidebar" aria-label="Navigation öffnen">
                     <i class="fa-light fa-lg fa-bars"></i>
                 </button>
                 <!-- End Navbar toggler mobile -->

diff --git a/contao/templates/mod_search_overlay.html5 b/contao/templates/mod_search_overlay.html5
@@ -1,5 +1,5 @@
-<div id="websiteSearch" class="mod_search_overlay" aria-expanded="false" aria-labelledby="websiteSearchLabel" role="dialog">
-  <button id="closeWebsiteSearchButton" type="button" class="close-button" aria-controls="websiteSearch" aria-label="Suche Schliessen">
+<div id="websiteSearch" class="mod_search_overlay" aria-labelledby="websiteSearchLabel" role="dialog">
+  <button id="closeWebsiteSearchButton" type="button" class="close-button" aria-expanded="false" aria-controls="websiteSearch" aria-label="Suche Schliessen">
     <i class="fa-light fa-times" focusable="false" aria-hidden="true"></i>
   </button>
   <form<?php if ($this->action): ?> action="<?= $this->action ?>"<?php endif; ?> method="get">

diff --git a/contao/templates/nav/mod_navigation_sidebar.html.twig b/contao/templates/nav/mod_navigation_sidebar.html.twig
@@ -62,14 +62,18 @@
                 // Toggle the sidebar with the mobile navigation
                 document.addEventListener('sidebar::open', (e) => {
                     document.body.classList.add('sidebar-open');
-                    e.detail.sidebar.setAttribute('aria-expanded', 'true');
-                    e.detail.sidebar.querySelector('.navigation-toggler').focus();
+                    document.querySelector('#sidebar').classList.add('open');
+                    document.querySelector('#sidebar .navigation-toggler').setAttribute('aria-expanded', 'true');
+                    document.querySelector('#header .navigation-toggler').setAttribute('aria-expanded', 'true');
+                    document.querySelector('#sidebar navigation-toggler').focus();
                 });
 
                 // Toggle the sidebar with the mobile navigation
                 document.addEventListener('sidebar::close', (e) => {
-                    e.detail.sidebar.querySelector('.navigation-toggler').focus();
-                    e.detail.sidebar.setAttribute('aria-expanded', 'false');
+                    document.querySelector('#sidebar .navigation-toggler').focus();
+                    document.querySelector('#sidebar .navigation-toggler').setAttribute('aria-expanded', 'false');
+                    document.querySelector('#header .navigation-toggler').setAttribute('aria-expanded', 'false');
+                    document.querySelector('#sidebar').classList.remove('open');
                     document.body.classList.remove('sidebar-open');
                 });
 

diff --git a/public/js/theme.2c039f45.js b/public/js/theme.2c039f45.js
diff --git a/public/js/theme.efc72292.js b/public/js/theme.efc72292.js
diff --git a/public/manifest.json b/public/manifest.json
@@ -28,7 +28,7 @@
   "flatpickr/dist/flatpickr.css": "/bundles/markocupiccontaothemesacpilatus/flatpickr/dist/flatpickr.122272e5.css",
   "aos/aos.js": "/bundles/markocupiccontaothemesacpilatus/aos/aos.b3b7b3c9.js",
   "jquery-touchswipe/jquery.touchSwipe.js": "/bundles/markocupiccontaothemesacpilatus/jquery-touchswipe/jquery.touchSwipe.fdd62fa8.js",
-  "js/theme.js": "/bundles/markocupiccontaothemesacpilatus/js/theme.2c039f45.js",
+  "js/theme.js": "/bundles/markocupiccontaothemesacpilatus/js/theme.efc72292.js",
   "fonts/open-sans.css": "/bundles/markocupiccontaothemesacpilatus/fonts/open-sans.css",
   "fonts/roboto-slab.css": "/bundles/markocupiccontaothemesacpilatus/fonts/roboto-slab.css",
   "flatpickr/dist/l10n/de.js": "/bundles/markocupiccontaothemesacpilatus/flatpickr/dist/l10n/de.f6a08010.js",

diff --git a/symlink_stuff/files/theme-sac-pilatus/scss/components/_sidebar-and-navigation.scss b/symlink_stuff/files/theme-sac-pilatus/scss/components/_sidebar-and-navigation.scss
@@ -93,7 +93,7 @@ $nav-bg-color: #FFFFFF;
 }
 
 @include media-breakpoint-down(xl) {
-  #sidebar[aria-expanded="true"] {
+  #sidebar.open {
     left: 0 !important;
     display: block !important;
     visibility: visible !important;