UX+Accessibility: focus on map when appropriate

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)

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
                 }

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