Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Handle focusing better when opening/closing context menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/map/MapContextMenu.vue
View File

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

14
src/scss/style.scss
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 { .checkbox {
display: flex; display: flex;
position: relative; position: relative;
@ -363,4 +375,4 @@ input {
@page { @page {
size: 297mm 210mm; size: 297mm 210mm;
} }
} }