A11y: add option to disable or always enable a11y features

src/UI/BigComponents/Geosearch.svelte

@@ -10,6 +10,7 @@
   import { createEventDispatcher, onDestroy } from "svelte"
   import { placeholder } from "../../Utils/placeholder"
   import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { ariaLabel } from "../../Utils/ariaLabel"
 
   export let perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer> | undefined = undefined
   export let bounds: UIEventSource<BBox>
@@ -116,6 +117,7 @@
         }}
         bind:value={searchContents}
         use:placeholder={Translations.t.general.search.search}
+        use:ariaLabel={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-->

src/UI/Map/MapLibreAdaptor.ts

@@ -511,15 +511,25 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
             await Utils.waitFor(250)
         }
     }
-    public installCustomKeyboardHandler(viewport: Store<HTMLDivElement>) {
-        viewport.mapD(
+    public installCustomKeyboardHandler(viewportStore: UIEventSource<HTMLDivElement>) {
+        viewportStore.mapD(
             (viewport) => {
                 const map = this._maplibreMap.data
                 if (!map) {
                     return
                 }
                 const oldKeyboard = map.keyboard
-                oldKeyboard._panStep = viewport.getBoundingClientRect().width
+                const w = viewport.getBoundingClientRect().width
+                if (w < 10) {
+                    /// this is weird, but definitively wrong!
+                    console.log("Got a very small bound", w, viewport)
+                    // We try again later on
+                    window.requestAnimationFrame(() => {
+                        viewportStore.ping()
+                    })
+                    return
+                }
+                oldKeyboard._panStep = w
             },
             [this._maplibreMap]
         )

src/UI/Popup/TagRendering/TagRenderingAnswer.svelte

@@ -29,9 +29,9 @@
 </script>
 
 {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
-  <div {id} class={twMerge("link-underline inline-block w-full", config?.classes ?? "flex items-center", extraClasses)}>
+  <div {id} class={twMerge("link-underline inline-block w-full", config?.classes , extraClasses)}>
     {#if $trs.length === 1}
-      <TagRenderingMapping clss={extraClasses} mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
+      <TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
     {/if}
     {#if $trs.length > 1}
       <ul>

src/UI/ThemeViewGUI.svelte

@@ -79,7 +79,7 @@
   let layout = state.layout
   let maplibremap: UIEventSource<MlMap> = state.map
   let selectedElement: UIEventSource<Feature> = new UIEventSource<Feature>(undefined)
-
+  selectedElement.addCallbackAndRun(se => console.log("Selected element", se))
   let compass = Orientation.singleton.alpha
   let compassLoaded = Orientation.singleton.gotMeasurement
   Orientation.singleton.startMeasurements()
@@ -189,9 +189,11 @@
 
   <div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
     <If condition={state.visualFeedback}>
+    {#if $selectedElement === undefined}
       <div class="w-fit">
         <VisualFeedbackPanel {state} />
       </div>
+      {/if}
     </If>
     <If condition={state.featureSwitches.featureSwitchSearch}>
       <Geosearch