From f5ba4bc3e4176ed06c9eb1106f9cd4c5dec216fc Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 10 Jan 2024 02:25:24 +0100
Subject: [PATCH] A11y: fix tab flow of RasterLayerPicker; see #1181

---
 src/UI/Map/OverlayMap.svelte        |  6 ++++--
 src/UI/Map/RasterLayerPicker.svelte | 28 ++++++++++++++++++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/UI/Map/OverlayMap.svelte b/src/UI/Map/OverlayMap.svelte
index 73526bd9cd..12b17c6ddf 100644
--- a/src/UI/Map/OverlayMap.svelte
+++ b/src/UI/Map/OverlayMap.svelte
@@ -13,7 +13,9 @@
   import type { RasterLayerPolygon } from "../../Models/RasterLayers"
 
   export let placedOverMapProperties: MapProperties
-  export let placedOverMap: UIEventSource<MlMap>
+  export let placedOverMap: Store<MlMap>
+  
+  export let interactive: boolean = undefined
 
   export let rasterLayer: UIEventSource<RasterLayerPolygon>
 
@@ -65,4 +67,4 @@
   }
 </script>
 
-<MaplibreMap map={altmap} />
+<MaplibreMap {interactive} map={altmap} />
diff --git a/src/UI/Map/RasterLayerPicker.svelte b/src/UI/Map/RasterLayerPicker.svelte
index 826d9b6f03..a26568e909 100644
--- a/src/UI/Map/RasterLayerPicker.svelte
+++ b/src/UI/Map/RasterLayerPicker.svelte
@@ -63,30 +63,42 @@
       })
     )
   }
+  function apply() {
+    mapproperties.rasterLayer.setData(rasterLayer.data)
+    dispatch("appliedLayer")
+  }
+  
+  function handleKeyPress(e: KeyboardEvent){
+    if(e.key === "Enter"){
+      apply()
+    }
+  }
 </script>
 
 {#if hasLayers}
-  <div class="flex h-full w-full flex-col">
+  <form class="flex h-full w-full flex-col">
     <button
-      on:click={() => {
-        mapproperties.rasterLayer.setData(rasterLayer.data)
-        dispatch("appliedLayer")
-      }}
-      class="m-0 h-full w-full p-0"
+      tabindex="-1"
+      on:click={() => apply()}
+      class="m-0 h-full w-full p-1 cursor-pointer"
     >
+      <div class="pointer-events-none w-full h-full">
+        
       <OverlayMap
+        interactive={false}
         rasterLayer={rasterLayerOnMap}
         placedOverMap={map}
         placedOverMapProperties={mapproperties}
         {visible}
       />
+      </div>
     </button>
-    <select bind:value={$rasterLayer} class="w-full">
+    <select bind:value={$rasterLayer} class="w-full" on:keydown={handleKeyPress}>
       {#each $availableLayers as availableLayer}
         <option value={availableLayer}>
           {availableLayer.properties.name}
         </option>
       {/each}
     </select>
-  </div>
+  </form>
 {/if}