fix: Allow closing the search via the search button (#424)

Especially on mobile devices, space is limited and users may not have
enough space to close the search if they want to. This PR changes the
"open search" behavior to a "toggle search" behavior (open if search is
closed, close if search is open).

In addition, two bugs are fixed:
- The overlay wasn't displayed when the user navigated to the search
field on the home page via tab.
- The overlay wasn't closed if the search was opened via click and then
moved out using the tab character (this will probably change when we
implement the focus trapping, but for now it's the best solution I
think).

---------

Co-authored-by: Robert Schuster <77234379+therobrob@users.noreply.github.com>

Author: MoritzWeber0

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