improve reliability and accessibility

Stadt-Geschichte-Basel · Nov 1, 2024 · b578934 · b578934
1 parent bfc2763
commit b578934
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/_data/translations.yml b/_data/translations.yml
@@ -521,6 +521,15 @@ _includes:
       en: "Last Updated"
       es: "Última Actualización"
       de: "Zuletzt aktualisiert"
+  nav-search.html:
+    search:
+      en: "Search"
+      es: "Buscar"
+      de: "Suche"
+    submit:
+      en: "Submit search"
+      es: "Enviar busqueda"
+      de: "Suche ausführen"
   nav-search-lunr.html:
     search:
       en: "Search"

diff --git a/_includes/nav-search.html b/_includes/nav-search.html
@@ -1,22 +1,26 @@
 <script>
   function site_search() {
-    var query = document.getElementById('site-search').value;
-    window.open("{{ '/browse.html' | relative_url }}#" + encodeURIComponent(query), '_self');
-    document.getElementById('site-search').value = '';
+    var searchInput = document.getElementById('site-search');
+    var query = searchInput.value.trim();
+    var searchUrl = "{{ '/browse.html' | relative_url }}#" + encodeURIComponent(query);
+    window.location.href = searchUrl;
+    searchInput.value = '';
   }
 </script>
-<form class="form-inline my-2 my-lg-0" role="search" id="search" onsubmit="site_search(); return false;">
+<form class="form-inline my-2 my-lg-0" role="search" id="search" onsubmit="site_search(); return false;" aria-label="{{ site.data.translations['_includes']['nav-search.html']['search'][site.lang] | default: 'Search' }}">
   <div class="input-group">
     <input
       id="site-search"
       class="form-control"
       type="text"
-      placeholder="{{ site.data.translations['_includes']['nav-search-lunr.html']['search'][site.lang] | default: 'Search' }}"
-      aria-label="Suchfeld"
+      autocomplete="off"
+      spellcheck="false"
+      placeholder="{{ site.data.translations['_includes']['nav-search.html']['search'][site.lang] | default: 'Search' }}"
+      aria-label="{{ site.data.translations['_includes']['nav-search.html']['search'][site.lang] | default: 'Search' }}"
     >
-    <button class="btn btn-dark" type="submit">
+    <button class="btn btn-dark" type="submit" aria-label="{{ site.data.translations['_includes']['nav-search.html']['submit'][site.lang] | default: 'Submit search' }}">
       <span id="search-icon">
-        <svg viewBox="0 0 1024 974" fill="white" height="16px" width="20px">
+        <svg viewBox="0 0 1024 974" fill="white" height="16px" width="20px" aria-hidden="true" focusable="false">
           <path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"/>
         </svg>
       </span>