Handle focusing better when opening/closing context menu

src/components/map/MapContextMenu.vue

@@ -1,5 +1,6 @@
 <template>
 	<nav id="map-context-menu" v-show="menuVisible" ref="menuElement" :style="style">
+		<button type="button" ref="focusMover" class="focus-mover"></button>
 		<ul class="menu">
 			<li>
 				<button type="button"
@@ -31,6 +32,8 @@ import {useStore} from "@/store";
 import WorldListItem from "@/components/sidebar/WorldListItem.vue";
 import {ref} from "vue";
 import {getUrlForLocation} from "@/util";
+import {notify} from "@kyvg/vue3-notification";
+import {nextTick} from 'vue';
 
 export default defineComponent({
 	name: "MapContextMenu",
@@ -51,6 +54,7 @@ export default defineComponent({
 			messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere),
 
 			menuElement = ref<HTMLInputElement | null>(null),
+			focusMover = ref<HTMLInputElement | null>(null),
 			menuVisible = computed(() => !!event.value),
 
 			currentProjection = computed(() => store.state.currentProjection),
@@ -109,8 +113,9 @@ export default defineComponent({
 			});
 
 		const handleEsc = (e: KeyboardEvent) => {
-				if (e.key === "Escape") {
+				if (e.key === "Escape" && menuVisible.value) {
 					closeContextMenu();
+					props.leaflet.getContainer().focus();
 				}
 			},
 			closeContextMenu = () => {
@@ -119,6 +124,7 @@ export default defineComponent({
 			pan = () => {
 				if (event.value) {
 					props.leaflet.panTo(event.value.latlng);
+					props.leaflet.getContainer().focus();
 				}
 			},
 			copySuccess = () => notify('Copied to clipboard'),
@@ -127,6 +133,12 @@ export default defineComponent({
 				console.error('Error copying to clipboard', e);
 			};
 
+		watch(menuVisible, value => {
+			if(value) {
+				nextTick(() => focusMover.value && focusMover.value.focus());
+			}
+		})
+
 		onMounted(() => {
 			window.addEventListener('click', closeContextMenu);
 			window.addEventListener('keyup', handleEsc);
@@ -179,6 +191,7 @@ export default defineComponent({
 
 			menuVisible,
 			menuElement,
+			focusMover,
 			url,
 
 			locationLabel,

src/scss/style.scss

@@ -86,6 +86,18 @@ input {
 	}
 }
 
+.focus-mover {
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute;
+	height: 1px;
+	width: 1px;
+
+	@include focus {
+		outline: none;
+		border: none;
+	}
+}
+
 .checkbox {
 	display: flex;
 	position: relative;
@@ -363,4 +375,4 @@ input {
 	@page {
 		size: 297mm 210mm;
 	}
-}
+}