fix: Allow closing the search via the search button

assets/js/search.js

@@ -38,50 +38,68 @@ 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);
   };
 
-  // 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" });
-    });
-  }
-
-  function showSearchOnContentPage() {
-    search.classList.add("o-search--show");
+  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);
+  };
 
-  function showSearchOnStartPage() {
-    overlay.classList.add("overlay--show", "overlay--show-lv5");
-    searchElement.focus();
-    search.scrollIntoView({ behavior: "smooth", block: "start" });
+  if (search && isHome) {
+    searchElement.addEventListener("focus", () => {
+      openSearch();
+    });
+    // If focus moves outside the search, close it
+    search.addEventListener(
+      "blur",
+      (e) => {
+        if (
+          e.relatedTarget &&
+          !search.contains(e.relatedTarget) &&
+          !Array.from(searchButtons).includes(e.relatedTarget)
+        ) {
+          closeSearch();
+        }
+      },
+      true,
+    );
   }
 
-  searchButtons.forEach((button) => {
-    if (isHome) {
-      button.addEventListener("click", showSearchOnStartPage);
-    } else {
-      button.addEventListener("click", showSearchOnContentPage);
+  const toggleSearch = () => {
+    if (search.classList.contains("o-search--show")) {
+      closeSearch();
+      return;
     }
+    openSearch();
+  };
+
+  searchButtons.forEach((button) => {
+    button.addEventListener("click", toggleSearch);
   });
 
-  // 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();
-      } else {
-        showSearchOnContentPage();
-      }
+      toggleSearch();
     }
   });
 

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

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

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

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" }}