From 981305426488b24e651f5f88ab323440dd418803 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 26 May 2021 21:13:54 +0100
Subject: [PATCH] Customisable map aria label

---
 index.html             | 1 +
 src/api.ts             | 1 +
 src/components/Map.vue | 8 ++++++--
 src/index.d.ts         | 1 +
 src/store/state.ts     | 1 +
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 672ea54..f51c626 100644
--- a/index.html
+++ b/index.html
@@ -109,6 +109,7 @@
                 contextMenuCopyLink: 'Copy link to here',
                 contextMenuCenterHere: 'Center here',
                 toggleTitle: 'Click to toggle this section',
+                mapTitle: 'Map - Use the arrow keys to pan the map'
             }
         };
     </script>
diff --git a/src/api.ts b/src/api.ts
index fb28bad..ce7c1a9 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -96,6 +96,7 @@ function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
 		contextMenuCopyLink: liveAtlasMessages.contextMenuCopyLink || '',
 		contextMenuCenterHere: liveAtlasMessages.contextMenuCenterHere || '',
 		toggleTitle: liveAtlasMessages.toggleTitle || '',
+		mapTitle: liveAtlasMessages.mapTitle || '',
 	}
 }
 
diff --git a/src/components/Map.vue b/src/components/Map.vue
index e7706a4..e68c769 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-	<div class="map" :style="{backgroundColor: mapBackground }" v-bind="$attrs" aria-label="Map">
+	<div class="map" :style="{backgroundColor: mapBackground }" v-bind="$attrs" :aria-label="mapTitle">
 		<MapLayer v-for="[name, map] in maps" :key="name" :map="map" :name="name" :leaflet="leaflet"></MapLayer>
 		<PlayersLayer v-if="playerMarkersEnabled" :leaflet="leaflet"></PlayersLayer>
 		<MarkerSetLayer v-for="[name, markerSet] in markerSets" :key="name" :markerSet="markerSet" :leaflet="leaflet"></MarkerSetLayer>
@@ -86,7 +86,9 @@ export default defineComponent({
 
 			//Location and zoom to pan to upon next projection change
 			scheduledPan = ref<Coordinate|null>(null),
-			scheduledZoom = ref<number|null>(null);
+			scheduledZoom = ref<number|null>(null),
+
+			mapTitle = computed(() => store.state.messages.mapTitle);
 
 		return {
 			leaflet,
@@ -111,6 +113,8 @@ export default defineComponent({
 
 			scheduledPan,
 			scheduledZoom,
+
+			mapTitle
 		}
 	},
 
diff --git a/src/index.d.ts b/src/index.d.ts
index ea9f5bc..97a85e1 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -64,6 +64,7 @@ interface LiveAtlasMessageConfig {
 	contextMenuCopyLink: string;
 	contextMenuCenterHere: string;
 	toggleTitle: string;
+	mapTitle: string;
 }
 
 export type LiveAtlasUIElement = 'chat' | 'players' | 'maps' | 'settings';
diff --git a/src/store/state.ts b/src/store/state.ts
index 3fb7a88..9f20a12 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -131,6 +131,7 @@ export const state: State = {
 		contextMenuCopyLink: '',
 		contextMenuCenterHere: '',
 		toggleTitle: '',
+		mapTitle: '',
 	},
 
 	loggedIn: false,