A11y: various improvements

src/UI/BigComponents/Geosearch.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
+  import { UIEventSource } from "../../Logic/UIEventSource"
   import type { Feature } from "geojson"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import Svg from "../../Svg.js"
   import Translations from "../i18n/Translations"
   import Loading from "../Base/Loading.svelte"
   import Hotkeys from "../Base/Hotkeys"
@@ -23,7 +21,7 @@
   onDestroy(
     triggerSearch.addCallback((_) => {
       performSearch()
-    })
+    }),
   )
 
   let isRunning: boolean = false
@@ -31,15 +29,17 @@
   let inputElement: HTMLInputElement
 
   let feedback: string = undefined
-  
-  
-  
+
+  function focusOnSearch() {
+    requestAnimationFrame(() => {
+      inputElement?.focus()
+      inputElement?.select()
+    })
+  }
+
   Hotkeys.RegisterHotkey({ ctrl: "F" }, Translations.t.hotkeyDocumentation.selectSearch, () => {
     feedback = undefined
-    requestAnimationFrame(() => {
-    inputElement?.focus()
-    inputElement?.select()
-    })
+    focusOnSearch()
   })
 
   const dispatch = createEventDispatcher<{ searchCompleted; searchIsValid: boolean }>()
@@ -62,6 +62,7 @@
       const result = await Geocoding.Search(searchContents, bounds.data)
       if (result.length == 0) {
         feedback = Translations.t.general.search.nothing.txt
+        focusOnSearch()
         return
       }
       const poi = result[0]
@@ -70,7 +71,7 @@
         new BBox([
           [lon0, lat0],
           [lon1, lat1],
-        ]).pad(0.01)
+        ]).pad(0.01),
       )
       if (perLayer !== undefined) {
         const id = poi.osm_type + "/" + poi.osm_id
@@ -78,11 +79,11 @@
         for (const layer of layers) {
           const found = layer.features.data.find((f) => f.properties.id === id)
           if (found === undefined) {
-            continue;
+            continue
           }
-          selectedElement?.setData(found);
-          console.log("Found an element that probably matches:", selectedElement?.data);
-          break;
+          selectedElement?.setData(found)
+          console.log("Found an element that probably matches:", selectedElement?.data)
+          break
         }
       }
       if (clearAfterView) {
@@ -93,6 +94,7 @@
     } catch (e) {
       console.error(e)
       feedback = Translations.t.general.search.error.txt
+      focusOnSearch()
     } finally {
       isRunning = false
     }
@@ -100,23 +102,25 @@
 </script>
 
 <div class="normal-background flex justify-between rounded-full pl-2">
-  <form class="w-full">
+  <form class="w-full flex flex-wrap">
     {#if isRunning}
       <Loading>{Translations.t.general.search.searching}</Loading>
-    {:else if feedback !== undefined}
-      <div class="alert" on:click={() => (feedback = undefined)}>
-        {feedback}
-      </div>
     {:else}
       <input
         type="search"
         class="w-full"
         bind:this={inputElement}
-        on:keypress={(keypr) => (keypr.key === "Enter" ? performSearch() : undefined)}
+        on:keypress={(keypr) =>{  feedback = undefined; return (keypr.key === "Enter" ? performSearch() : undefined); }}
         bind:value={searchContents}
         use:placeholder={Translations.t.general.search.search}
       />
+      {#if feedback !== undefined}
+        <!-- The feedback is _always_ shown for screenreaders and to make sure that the searchfield can still be selected by tabbing-->
+        <div class="alert " role="alert" aria-live="assertive">
+          {feedback}
+        </div>
+      {/if}
     {/if}
   </form>
-  <SearchIcon class="h-6 w-6 self-end" aria-hidden="true" on:click={performSearch}/>
+  <SearchIcon aria-hidden="true" class="h-6 w-6 self-end" on:click={performSearch} />
 </div>