diff --git a/src/UI/Map/MaplibreMap.svelte b/src/UI/Map/MaplibreMap.svelte index 5a80025f90..b78d28f4b9 100644 --- a/src/UI/Map/MaplibreMap.svelte +++ b/src/UI/Map/MaplibreMap.svelte @@ -19,6 +19,8 @@ */ export let map: Writable + 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() - ariaLabel(canvas, Translations.t.general.visualFeedback.navigation) - canvas.role = "application" - canvas.tabIndex = 0 + const canvas = _map.getCanvas() + if (interactive) { + ariaLabel(canvas, Translations.t.general.visualFeedback.navigation) + canvas.role = "application" + canvas.tabIndex = 0 + }else{ + canvas.tabIndex = -1 + _map.getContainer().tabIndex = -1 + } }) map.set(_map) }) diff --git a/src/UI/Popup/MinimapViz.ts b/src/UI/Popup/MinimapViz.ts index b4782a48e4..fc0a1a61f2 100644 --- a/src/UI/Popup/MinimapViz.ts +++ b/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;") } diff --git a/src/UI/Reviews/ReviewForm.svelte b/src/UI/Reviews/ReviewForm.svelte index 45a9399f70..aa43f7fc12 100644 --- a/src/UI/Reviews/ReviewForm.svelte +++ b/src/UI/Reviews/ReviewForm.svelte @@ -71,6 +71,8 @@ { confirmedScore = e.detail.score + score=confirmedScore + console.log("Confirmed score is:", confirmedScore) }} on:hover={(e) => { score = e.detail.score diff --git a/src/UI/Reviews/StarElement.svelte b/src/UI/Reviews/StarElement.svelte index f91f21bfe2..216c7c8f7a 100644 --- a/src/UI/Reviews/StarElement.svelte +++ b/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:mousemove={(e) => dispatch("hover", { 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) } + )} > {#if score >= cutoff}