Handle focusing better when opening/closing context menu

This commit is contained in:
James Lyne 2021-05-25 14:22:04 +01:00
parent 609b265951
commit 22102eae65
2 changed files with 27 additions and 2 deletions

View File

@ -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,

View File

@ -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;