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

Focus login button when closing modal

Browse Source
This commit is contained in:
James Lyne 2021-08-31 17:45:37 +01:00
parent ca60f2bb09
commit 0b05ad05e4
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Modal.vue
View File

@ -46,6 +46,7 @@ export default defineComponent({
if(visible.value && e.key === 'Escape') { if(visible.value && e.key === 'Escape') {
store.commit(MutationTypes.HIDE_UI_MODAL, props.id as LiveAtlasUIModal); store.commit(MutationTypes.HIDE_UI_MODAL, props.id as LiveAtlasUIModal);
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation();
} }
}; };

17
src/leaflet/control/LoginControl.ts
View File

@ -24,9 +24,12 @@ import "@/assets/icons/logout.svg";
import {computed} from "vue"; import {computed} from "vue";
import {ActionTypes} from "@/store/action-types"; import {ActionTypes} from "@/store/action-types";
import {notify} from "@kyvg/vue3-notification"; import {notify} from "@kyvg/vue3-notification";
import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
export class LoginControl extends Control { export class LoginControl extends Control {
declare options: ControlOptions declare _map: LiveAtlasLeafletMap;
declare options: ControlOptions;
private readonly store = useStore(); private readonly store = useStore();
private readonly loggedIn = computed(() => this.store.state.loggedIn); private readonly loggedIn = computed(() => this.store.state.loggedIn);
private readonly _button: HTMLButtonElement; private readonly _button: HTMLButtonElement;
@ -60,10 +63,14 @@ export class LoginControl extends Control {
this.update(); this.update();
}); });
watch(this.store.state.ui, newValue => { const visibleModal = computed(() => this.store.state.ui.visibleModal);
this._button.setAttribute('aria-expanded', (newValue.visibleModal === 'login').toString());
}, { watch(visibleModal, (newValue, oldValue) => {
deep: true, this._button.setAttribute('aria-expanded', (newValue === 'login').toString());
if(this._map && !newValue && oldValue === 'login') {
this._button.focus();
}
}); });
this.update(); this.update();