From 0b05ad05e40d0fc78f824d7c62ba907a896d96d4 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 31 Aug 2021 17:45:37 +0100
Subject: [PATCH] Focus login button when closing modal

---
 src/components/Modal.vue            |  1 +
 src/leaflet/control/LoginControl.ts | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 55c6c1d..0dba4cc 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -46,6 +46,7 @@ export default defineComponent({
 			if(visible.value && e.key === 'Escape') {
 				store.commit(MutationTypes.HIDE_UI_MODAL, props.id as LiveAtlasUIModal);
 				e.preventDefault();
+				e.stopImmediatePropagation();
 			}
 		};
 
diff --git a/src/leaflet/control/LoginControl.ts b/src/leaflet/control/LoginControl.ts
index 1ee28a9..6ccd3c9 100644
--- a/src/leaflet/control/LoginControl.ts
+++ b/src/leaflet/control/LoginControl.ts
@@ -24,9 +24,12 @@ import "@/assets/icons/logout.svg";
 import {computed} from "vue";
 import {ActionTypes} from "@/store/action-types";
 import {notify} from "@kyvg/vue3-notification";
+import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
 
 export class LoginControl extends Control {
-	declare options: ControlOptions
+	declare _map: LiveAtlasLeafletMap;
+	declare options: ControlOptions;
+
 	private readonly store = useStore();
 	private readonly loggedIn = computed(() => this.store.state.loggedIn);
 	private readonly _button: HTMLButtonElement;
@@ -60,10 +63,14 @@ export class LoginControl extends Control {
 			this.update();
 		});
 
-		watch(this.store.state.ui, newValue => {
-			this._button.setAttribute('aria-expanded', (newValue.visibleModal === 'login').toString());
-		}, {
-			deep: true,
+		const visibleModal = computed(() => this.store.state.ui.visibleModal);
+
+		watch(visibleModal, (newValue, oldValue) => {
+			this._button.setAttribute('aria-expanded', (newValue === 'login').toString());
+
+			if(this._map && !newValue && oldValue === 'login') {
+				this._button.focus();
+			}
 		});
 
 		this.update();