From 96dce21d9538a894ced9ddb4da7e88854a36c2f1 Mon Sep 17 00:00:00 2001
From: MoritzWeber0 <kontakt@moritz-weber.net>
Date: Sat, 18 Oct 2025 17:11:55 +0200
Subject: [PATCH 1/4] fix: Allow closing the search via the search button

---
 assets/js/search.js                 | 50 +++++++++++++++++++++--------
 i18n/de.yaml                        |  4 ++-
 i18n/en.yaml                        |  4 ++-
 i18n/fr.yaml                        |  4 ++-
 layouts/partials/search-button.html |  6 ++--
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/assets/js/search.js b/assets/js/search.js
index 82331109..5767cee2 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -38,10 +38,28 @@ const initSearch = () => {
 
   const searchElement = search.querySelector("input");
 
+  const updateSearchButtonLabels = (isOpen) => {
+    searchButtons.forEach((button) => {
+      const openLabel = button.dataset.labelOpen;
+      const closeLabel = button.dataset.labelClose;
+      const label = isOpen ? closeLabel : openLabel;
+      button.setAttribute("aria-label", label);
+      button.setAttribute("title", label);
+    });
+  };
+
   const closeSearch = () => {
     search.querySelector(".pagefind-ui__search-clear").click();
     overlay.classList.remove("overlay--show", "overlay--show-lv5");
     search.classList.remove("o-search--show");
+    updateSearchButtonLabels(false);
+  };
+
+  const openSearch = () => {
+    overlay.classList.add("overlay--show", "overlay--show-lv5");
+    searchElement.focus();
+    search.scrollIntoView({ behavior: "smooth", block: "start" });
+    updateSearchButtonLabels(true);
   };
 
   // Scroll to search on click
@@ -52,35 +70,41 @@ const initSearch = () => {
     });
   }
 
-  function showSearchOnContentPage() {
+  function toggleSearchOnContentPage() {
+    if (search.classList.contains("o-search--show")) {
+      closeSearch();
+      return;
+    }
+
     search.classList.add("o-search--show");
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
-    searchElement.focus();
-    search.scrollIntoView({ behavior: "smooth", block: "start" });
+    openSearch();
   }
 
-  function showSearchOnStartPage() {
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
-    searchElement.focus();
-    search.scrollIntoView({ behavior: "smooth", block: "start" });
+  function toggleSearchOnStartPage() {
+    if (overlay.classList.contains("overlay--show")) {
+      closeSearch();
+      return;
+    }
+
+    openSearch();
   }
 
   searchButtons.forEach((button) => {
     if (isHome) {
-      button.addEventListener("click", showSearchOnStartPage);
+      button.addEventListener("click", toggleSearchOnStartPage);
     } else {
-      button.addEventListener("click", showSearchOnContentPage);
+      button.addEventListener("click", toggleSearchOnContentPage);
     }
   });
 
-  // Open search on Ctrl + K or Cmd + K
+  // Toggle search on Ctrl + K or Cmd + K
   document.addEventListener("keydown", (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key === "k") {
       e.preventDefault();
       if (isHome) {
-        showSearchOnStartPage();
+        toggleSearchOnStartPage();
       } else {
-        showSearchOnContentPage();
+        toggleSearchOnContentPage();
       }
     }
   });
diff --git a/i18n/de.yaml b/i18n/de.yaml
index b8d97ce8..ea8efe6c 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -68,7 +68,9 @@ menu:
     dropdown-label: Verfügbare Betreiber
     label: Betreiber
     title: Betreiber-Dropdown öffnen
-  search: Suche öffnen
+  search:
+    close: Suche schließen
+    open: Suche öffnen
   theme:
     switch-to-auto: Zu automatischem Modus wechseln
     switch-to-dark: Zu dunklem Modus wechseln
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 9f6f1caf..c55f8f6e 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -67,7 +67,9 @@ menu:
     dropdown-label: Available operators
     label: Operators
     title: Open Operator-Dropdown
-  search: Open search
+  search:
+    close: Close search
+    open: Open search
   theme:
     switch-to-auto: Switch to auto mode
     switch-to-dark: Switch to dark mode
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index 73e25e2d..aa3fd665 100644
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -67,7 +67,9 @@ menu:
     dropdown-label: Opérateurs disponibles
     label: Opérateurs
     title: Ouvrir la liste déroulante de l'opérateur
-  search: Ouvrir la recherche
+  search:
+    close: Fermer la recherche
+    open: Ouvrir la recherche
   theme:
     switch-to-auto: Passer en mode automatique
     switch-to-dark: Passer en mode sombre
diff --git a/layouts/partials/search-button.html b/layouts/partials/search-button.html
index b3b5aa09..ed7038af 100644
--- a/layouts/partials/search-button.html
+++ b/layouts/partials/search-button.html
@@ -1,7 +1,9 @@
 <button
   class="o-header__button o-header__search"
-  title="{{ T "menu.search" }}"
-  aria-label="{{ T "menu.search" }}"
+  title="{{ T "menu.search.open" }}"
+  aria-label="{{ T "menu.search.open" }}"
+  data-label-open="{{ T "menu.search.open" }}"
+  data-label-close="{{ T "menu.search.close" }}"
   type="button"
 >
   {{ partial "icon" "search" }}

From b780bd70e25330f496e1a0a94b77672929a898d3 Mon Sep 17 00:00:00 2001
From: MoritzWeber0 <kontakt@moritz-weber.net>
Date: Mon, 20 Oct 2025 23:13:16 +0200
Subject: [PATCH 2/4] fix: Make implementation independent of overlay

---
 assets/js/search.js | 42 ++++++++++++++++--------------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/assets/js/search.js b/assets/js/search.js
index 5767cee2..b1dd2378 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -57,6 +57,7 @@ const initSearch = () => {
 
   const openSearch = () => {
     overlay.classList.add("overlay--show", "overlay--show-lv5");
+    search.classList.add("o-search--show");
     searchElement.focus();
     search.scrollIntoView({ behavior: "smooth", block: "start" });
     updateSearchButtonLabels(true);
@@ -64,48 +65,37 @@ const initSearch = () => {
 
   // Scroll to search on click
   if (search && isHome) {
-    search.addEventListener("click", function () {
-      overlay.classList.add("overlay--show", "overlay--show-lv5");
-      search.scrollIntoView({ behavior: "smooth", block: "start" });
+    searchElement.addEventListener("focus", () => {
+      openSearch();
     });
+    search.addEventListener(
+      "blur",
+      (e) => {
+        if (!search.contains(e.relatedTarget)) {
+          closeSearch();
+        }
+      },
+      true,
+    );
   }
 
-  function toggleSearchOnContentPage() {
+  const toggleSearch = () => {
     if (search.classList.contains("o-search--show")) {
       closeSearch();
       return;
     }
-
-    search.classList.add("o-search--show");
-    openSearch();
-  }
-
-  function toggleSearchOnStartPage() {
-    if (overlay.classList.contains("overlay--show")) {
-      closeSearch();
-      return;
-    }
-
     openSearch();
-  }
+  };
 
   searchButtons.forEach((button) => {
-    if (isHome) {
-      button.addEventListener("click", toggleSearchOnStartPage);
-    } else {
-      button.addEventListener("click", toggleSearchOnContentPage);
-    }
+    button.addEventListener("click", toggleSearch);
   });
 
   // Toggle search on Ctrl + K or Cmd + K
   document.addEventListener("keydown", (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key === "k") {
       e.preventDefault();
-      if (isHome) {
-        toggleSearchOnStartPage();
-      } else {
-        toggleSearchOnContentPage();
-      }
+      toggleSearch();
     }
   });
 

From 1a13ae2cfa5e544d1df8cbc9fd433353896612e8 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 21 Oct 2025 09:24:45 +0200
Subject: [PATCH 3/4] fix: Handle null target in blur events

---
 assets/js/search.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/search.js b/assets/js/search.js
index b1dd2378..a472811a 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -63,15 +63,15 @@ const initSearch = () => {
     updateSearchButtonLabels(true);
   };
 
-  // Scroll to search on click
   if (search && isHome) {
     searchElement.addEventListener("focus", () => {
       openSearch();
     });
+    // If focus moves outside the search, close it
     search.addEventListener(
       "blur",
       (e) => {
-        if (!search.contains(e.relatedTarget)) {
+        if (e.relatedTarget && !search.contains(e.relatedTarget)) {
           closeSearch();
         }
       },

From ccf6116b6bb020b9110fad9927d7e7fb4a6c8127 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 21 Oct 2025 10:43:45 +0200
Subject: [PATCH 4/4] fix: Prevent double-event on search button

---
 assets/js/search.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/search.js b/assets/js/search.js
index a472811a..d48bc262 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -71,7 +71,11 @@ const initSearch = () => {
     search.addEventListener(
       "blur",
       (e) => {
-        if (e.relatedTarget && !search.contains(e.relatedTarget)) {
+        if (
+          e.relatedTarget &&
+          !search.contains(e.relatedTarget) &&
+          !Array.from(searchButtons).includes(e.relatedTarget)
+        ) {
           closeSearch();
         }
       },