Customisable map aria label

This commit is contained in:
James Lyne 2021-05-26 21:13:54 +01:00
parent cc5b1afb3e
commit 9813054264
5 changed files with 10 additions and 2 deletions

View File

@ -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>

View File

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

View File

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

1
src/index.d.ts vendored
View File

@ -64,6 +64,7 @@ interface LiveAtlasMessageConfig {
contextMenuCopyLink: string;
contextMenuCenterHere: string;
toggleTitle: string;
mapTitle: string;
}
export type LiveAtlasUIElement = 'chat' | 'players' | 'maps' | 'settings';

View File

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