A11y: screen navigation improvements, see #1181

src/UI/BigComponents/Geosearch.svelte

@@ -11,6 +11,7 @@
   import { GeoIndexedStoreForLayer } from "../../Logic/FeatureSource/Actors/GeoIndexedStore"
   import { createEventDispatcher, onDestroy } from "svelte"
   import { placeholder } from "../../Utils/placeholder"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   export let perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer> | undefined = undefined
   export let bounds: UIEventSource<BBox>
@@ -117,7 +118,5 @@
       />
     {/if}
   </form>
-  <div class="h-6 w-6 self-end" on:click={performSearch}>
-    <ToSvelte construct={Svg.search_svg} />
-  </div>
+  <SearchIcon class="h-6 w-6 self-end" aria-hidden="true" on:click={performSearch}/>
 </div>

src/UI/BigComponents/SelectedElementView.svelte

@@ -37,7 +37,7 @@
     <Tr t={Translations.t.general.returnToTheMap} />
   </button>
 {:else}
-  <div class="flex h-full w-full flex-col gap-y-2 overflow-y-auto p-1 px-2 focusable" tabindex="-1">
+  <div class="flex h-full w-full flex-col gap-y-2 overflow-y-auto p-1 px-2" tabindex="-1">
     {#each $knownTagRenderings as config (config.id)}
       <TagRenderingEditable
         {tags}

src/UI/BigComponents/Summary.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
   import type { Feature } from "geojson"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import SelectedElementTitle from "./SelectedElementTitle.svelte"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
 
   export let state: SpecialVisualizationState
   export let feature: Feature
+  export let i: number = undefined
   let id = feature.properties.id
   let tags = state.featureProperties.getStore(id)
   let layer: LayerConfig = state.layout.getMatchingLayer(tags.data)
-  
-  function select(){
+
+  function select() {
     state.selectedElement.setData(undefined)
     state.selectedLayer.setData(layer)
     state.selectedElement.setData(feature)
   }
 </script>
 
-<div on:click={() => select()} class="cursor-pointer">
-<TagRenderingAnswer config={layer.title} selectedElement={feature} {state} {tags} {layer} />
-</div>
+<button class="cursor-pointer small" on:click={() => select()}>
+  {#if i !== undefined}
+    <span class="font-bold">{i + 1}.</span>
+  {/if}
+  <TagRenderingAnswer config={layer.title} {layer} selectedElement={feature} {state} {tags} />
+</button>

src/UI/BigComponents/VisualFeedbackPanel.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * The visual feedback panel gives visual (and auditive) feedback on the main map view
+   */
+
+  import Translations from "../i18n/Translations"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import Summary from "./Summary.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import type { KeyNavigationEvent } from "../../Models/MapProperties"
+
+  export let state: ThemeViewState
+  let centerFeatures = state.closestFeatures.features
+
+  let lastAction: UIEventSource<KeyNavigationEvent> = new UIEventSource<KeyNavigationEvent>(undefined)
+  state.mapProperties.onKeyNavigationEvent((event) => {
+    lastAction.setData(event)
+  })
+  lastAction.stabilized(750).addCallbackAndRunD(_ => lastAction.setData(undefined))
+</script>
+<div aria-live="assertive" class=" interactive p-1" role="alert">
+
+  {#if $lastAction !== undefined}
+    <Tr t={Translations.t.general.visualFeedback[$lastAction.key]} />
+  {:else if $centerFeatures.length === 0}
+    <Tr t={Translations.t.general.visualFeedback.noCloseFeatures} />
+  {:else}
+    <div class="pointer-events-auto">
+      <Tr t={Translations.t.general.visualFeedback.closestFeaturesAre} />
+      <ol class="list-none">
+        {#each $centerFeatures as feat, i (feat.properties.id)}
+          <li class="flex">
+            
+            <Summary {state} feature={feat} {i}/>
+          </li>
+        {/each}
+      </ol>
+    </div>
+  {/if}
+</div>