Customisable map aria label

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>

src/api.ts

@@ -96,6 +96,7 @@ function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
 		contextMenuCopyLink: liveAtlasMessages.contextMenuCopyLink || '',
 		contextMenuCenterHere: liveAtlasMessages.contextMenuCenterHere || '',
 		toggleTitle: liveAtlasMessages.toggleTitle || '',
+		mapTitle: liveAtlasMessages.mapTitle || '',
 	}
 }
 

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

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

src/store/state.ts

@@ -131,6 +131,7 @@ export const state: State = {
 		contextMenuCopyLink: '',
 		contextMenuCenterHere: '',
 		toggleTitle: '',
+		mapTitle: '',
 	},
 
 	loggedIn: false,