From bb328d9724f52fafd0817fbc927bab0fffb04e4b Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 3 Nov 2023 02:24:33 +0100
Subject: [PATCH] UX+Accessibility: focus on map when appropriate

---
 src/Models/ThemeViewState.ts | 23 +++++++++++++++++++++++
 src/UI/Base/Hotkeys.ts       |  2 +-
 src/UI/ThemeViewGUI.svelte   |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts
index dfb57958a6..4be559d7ad 100644
--- a/src/Models/ThemeViewState.ts
+++ b/src/Models/ThemeViewState.ts
@@ -345,11 +345,25 @@ export default class ThemeViewState implements SpecialVisualizationState {
         this.drawSpecialLayers()
         this.initHotkeys()
         this.miscSetup()
+        this.focusOnMap()
         if (!Utils.runningFromConsole) {
             console.log("State setup completed", this)
         }
     }
 
+    /* By focussing on the map, the keyboard panning and zoom with '+' and '+' works */
+    public focusOnMap() {
+        if (this.map.data) {
+            this.map.data.getCanvas().focus()
+            return
+        }
+        this.map.addCallbackAndRunD((map) => {
+            map.on("load", () => {
+                map.getCanvas().focus()
+            })
+            return true
+        })
+    }
     public showNormalDataOn(map: Store<MlMap>): ReadonlyMap<string, FilteringFeatureSource> {
         const filteringFeatureSource = new Map<string, FilteringFeatureSource>()
         this.perLayer.forEach((fs, layerName) => {
@@ -417,6 +431,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             () => {
                 this.selectedElement.setData(undefined)
                 this.guistate.closeAll()
+                this.focusOnMap()
             }
         )
 
@@ -626,8 +641,16 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 // We did _unselect_ an item - we always remove the lastclick-object
                 this.lastClickObject.features.setData([])
                 this.selectedLayer.setData(undefined)
+                this.focusOnMap()
             }
         })
+        this.guistate.allToggles.forEach((toggle) => {
+            toggle.toggle.addCallbackD((isOpened) => {
+                if (!isOpened) {
+                    this.focusOnMap()
+                }
+            })
+        })
         new ThemeViewStateHashActor(this)
         new MetaTagging(this)
         new TitleHandler(this.selectedElement, this.selectedLayer, this.featureProperties, this)
diff --git a/src/UI/Base/Hotkeys.ts b/src/UI/Base/Hotkeys.ts
index c81b920a3c..379e97f688 100644
--- a/src/UI/Base/Hotkeys.ts
+++ b/src/UI/Base/Hotkeys.ts
@@ -93,7 +93,7 @@ export default class Hotkeys {
             })
         } else if (key["nomod"] !== undefined) {
             document.addEventListener(type, function (event) {
-                if (Hotkeys.textElementSelected(event)) {
+                if (Hotkeys.textElementSelected(event) && keycode !== "Escape") {
                     // A text element is selected, we don't do anything special
                     return
                 }
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 407ff3af99..1d42efb2bf 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -370,7 +370,7 @@
 
 <IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
   <!-- background layer selector -->
-  <FloatOver
+  <FloatOver  
     on:close={() => {
       state.guistate.backgroundLayerSelectionIsOpened.setData(false)
     }}