A11y: fix tab flow of RasterLayerPicker; see #1181

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} />

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={() => {
+      tabindex="-1"
-        mapproperties.rasterLayer.setData(rasterLayer.data)
+      on:click={() => apply()}
-        dispatch("appliedLayer")
+      class="m-0 h-full w-full p-1 cursor-pointer"
-      }}
-      class="m-0 h-full w-full p-0"
     >
+      <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}