A11y: make review-form more accessible, disable minimap for screenreaders

src/UI/Map/MaplibreMap.svelte

@@ -19,6 +19,8 @@
    */
   export let map: Writable<Map>
 
+  export let interactive: boolean = true
+
   let container: HTMLElement
 
   export let center: { lng: number; lat: number } | Readable<{ lng: number; lat: number }> =
@@ -48,12 +50,17 @@
     window.requestAnimationFrame(() => {
       _map.resize()
     })
-    _map.on("load", function () {
+    _map.on("load", function() {
       _map.resize()
-      const canvas = _map.getCanvas()
+        const canvas = _map.getCanvas()
-      ariaLabel(canvas, Translations.t.general.visualFeedback.navigation)
+      if (interactive) {
-      canvas.role = "application"
+        ariaLabel(canvas, Translations.t.general.visualFeedback.navigation)
-      canvas.tabIndex = 0
+        canvas.role = "application"
+        canvas.tabIndex = 0
+      }else{
+        canvas.tabIndex = -1
+        _map.getContainer().tabIndex = -1
+      }
     })
     map.set(_map)
   })

src/UI/Popup/MinimapViz.ts

@@ -111,7 +111,7 @@ export class MinimapViz implements SpecialVisualization {
             state.layout.layers
         )
 
-        return new SvelteUIElement(MaplibreMap, { map: mlmap })
+        return new SvelteUIElement(MaplibreMap, { interactive: false, map: mlmap })
             .SetClass("h-40 rounded")
             .SetStyle("overflow: hidden; pointer-events: none;")
     }

src/UI/Reviews/ReviewForm.svelte

@@ -71,6 +71,8 @@
     <StarsBar
       on:click={(e) => {
         confirmedScore = e.detail.score
+        score=confirmedScore
+        console.log("Confirmed score is:", confirmedScore)
       }}
       on:hover={(e) => {
         score = e.detail.score

src/UI/Reviews/StarElement.svelte

@@ -17,6 +17,7 @@
 
   function getScore(e: MouseEvent): number {
     if (e.clientX === 0 && e.clientY === 0) {
+      console.log("Keyboard rated", cutoff)
       // Keyboard triggered 'click' -> return max value
       return cutoff
     }
@@ -41,8 +42,9 @@
     class="small soft rounded-full no-image-background"
     style="padding: 0; border: none;"
     bind:this={container}
-    on:click={(e) => dispatch("click", { score: getScore(e) })}
+    on:click={(e) =>{ console.log("Dispatching click", e); return dispatch("click", { score: getScore(e) }); }}
-    on:mousemove={(e) => dispatch("hover", { score: getScore(e) })}
+    on:mousemove={(e) => dispatch("hover", { score: getScore(e) }
+    )}
   >
     {#if score >= cutoff}
       <Star class={starSize} />