Fixed some accessibility issues

src/components/maps/Map.astro

@@ -11,6 +11,7 @@ import CopyText from '../global/CopyText.astro';
 interface Props extends MapProps {}
 
 const {
+    title,
     mapKey,
     zoomifyKey,
     mapHeight, //
@@ -30,11 +31,11 @@ const seeMapText = t('maps.go-to-map', lang)
 ---
 
 <div class="map-wrapper">
-    <div class="world-wrapper">
+    <main class="world-wrapper">
         <div id="world"></div>
     
         <MarkerCreator client:only="vue" mapKey={mapKey} />
-    </div>
+    </main>
 
     <div style="height: 0; width: 0; overflow: hidden; display: none;">
         {markers.map((m, index) => (

src/components/maps/MapOverlayBreadcrumbs.astro

@@ -17,9 +17,9 @@ const { breadcrumbs = [] } = Astro.props
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
 
                         <span class="breadcrumb" aria-current="page">
-                            <span class="label">
+                            <h1 class="label">
                                 {breadcrumb.name}
-                            </span>
+                            </h1>
                         </span>
                     }
                     {!(index === breadcrumbs.length - 1) &&

src/components/maps/overlay/LangSwitcher.vue

@@ -6,7 +6,7 @@ import { PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from 'radix
 import LangSwitcherButton from './LangSwitcherButton.vue';
 
 import { useStore } from '@nanostores/vue';
-import { currentLang } from '@/i18n/store';
+import { currentLang, t } from '@/i18n/store';
 import { availableLangs } from '@/i18n/ui';
 
 const $currentLang = useStore(currentLang);
@@ -39,7 +39,7 @@ watch([wrapperHovered, buttonFocused], (value) => {
     <div ref="wrapper" class="wrapper appear-from-top">
         <PopoverRoot :open="isMenuOpen" @update:open="() => menuModel = true">
             <PopoverTrigger as-child>
-                <button ref="buttonRef" class="btn-round" :class="{ 'active': isMenuOpen }">
+                <button ref="buttonRef" class="btn-round" :title="t('nav.lang.aria-label')" :class="{ 'active': isMenuOpen }">
                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M247.15,212.42l-56-112a8,8,0,0,0-14.31,0l-21.71,43.43A88,88,0,0,1,108,126.93,103.65,103.65,0,0,0,135.69,64H160a8,8,0,0,0,0-16H104V32a8,8,0,0,0-16,0V48H32a8,8,0,0,0,0,16h87.63A87.76,87.76,0,0,1,96,116.35a87.74,87.74,0,0,1-19-31,8,8,0,1,0-15.08,5.34A103.63,103.63,0,0,0,84,127a87.55,87.55,0,0,1-52,17,8,8,0,0,0,0,16,103.46,103.46,0,0,0,64-22.08,104.18,104.18,0,0,0,51.44,21.31l-26.6,53.19a8,8,0,0,0,14.31,7.16L148.94,192h70.11l13.79,27.58A8,8,0,0,0,240,224a8,8,0,0,0,7.15-11.58ZM156.94,176,184,121.89,211.05,176Z"></path></svg>
                 </button>
             </PopoverTrigger>

src/components/maps/overlay/SearchMapSwitch.vue

@@ -92,7 +92,7 @@ const menus: Menu[] = [
     <div class="wrapper" ref="wrapper">
         <PopoverRoot :open="isNavOpened" @update:open="() => navModel = true">
             <PopoverTrigger as-child>
-                <button ref="buttonRef" class="btn-round" :class="{ 'active': isNavOpened }">
+                <button ref="buttonRef" class="btn-round" :title="t('nav.map.aria-label')" :class="{ 'active': isNavOpened }">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"/></svg>
                 </button>
             </PopoverTrigger>

src/components/maps/overlay/SearchMarkers.vue

@@ -209,7 +209,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
 </script>
 
 <template>
-    <nav ref="searchBarWrapper" class="toolbar appear-from-top" :key="navKey">
+    <nav ref="searchBarWrapper" :aria-label="t('nav.aria-label')" class="toolbar appear-from-top" :key="navKey">
         <SearchMapSwitch />
 
         <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">

src/i18n/ui.ts

@@ -21,6 +21,9 @@ export const translations: LanguageDict = {
         'capitals': 'Capitales',
         'points-of-interest': 'Points d\'intérêt',
         'personals': 'Personnels',
+        'nav.aria-label': 'Navigation principale',
+        'nav.map.aria-label': 'Changer de carte',
+        'nav.lang.aria-label': 'Changer de langue',
         'maps.go-to-map': 'Voir la carte détaillée',
         'maps.go-to-player': 'Aller à la position actuelle des joueurs',
         'maps.seeQuest': 'Voir la quête',
@@ -48,6 +51,9 @@ export const translations: LanguageDict = {
         'capitals': 'Capitals',
         'points-of-interest': 'Points of interest',
         'personals': 'Personals',
+        'nav.aria-label': 'Main navigation',
+        'nav.map.aria-label': 'Switch map',
+        'nav.lang.aria-label': 'Switch language',
         'maps.go-to-map': 'See detailed map',
         'maps.go-to-player': 'Go to current players position',
         'maps.seeQuest': 'See the quest',

src/pages/en/aldys/borelis/index.astro

@@ -17,6 +17,7 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
         ]}
     />
     <Map
+        title='Borélis'
         mapKey='aldys-borelis'
         zoomifyKey='fr/borelis'
         mapHeight={3710}

src/pages/en/aldys/cantane/index.astro

@@ -24,6 +24,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Cantane'
         mapKey='aldys-cantane'
         zoomifyKey='fr/cantane'
         mapHeight={4124}

src/pages/en/aldys/cantane/mines-blanches.astro

@@ -25,6 +25,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='White Hollow'
         mapKey='aldys-cantane-mines'
         zoomifyKey='fr/mines-blanches'
         mapHeight={6020}

src/pages/en/bamast/index.astro

@@ -22,6 +22,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Bamast'
         mapKey='bamast'
         zoomifyKey='fr/bamast'
         mapHeight={18342}

src/pages/en/index.astro

@@ -30,6 +30,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Aldys'
         mapKey='aldys'
         zoomifyKey='en/aldys-nord'
         mapHeight={21896}

src/pages/fr/aldys/borelis/index.astro

@@ -17,6 +17,7 @@ import MapOverlay from '@/components/maps/MapOverlay.astro'
         ]}
     />
     <Map
+        title='Borélis'
         mapKey='aldys-borelis'
         zoomifyKey='fr/borelis'
         mapHeight={3710}

src/pages/fr/aldys/cantane/index.astro

@@ -24,6 +24,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Cantane'
         mapKey='aldys-cantane'
         zoomifyKey='fr/cantane'
         mapHeight={4124}

src/pages/fr/aldys/cantane/mines-blanches.astro

@@ -25,6 +25,7 @@ const markers = markersData.data as MapMarker[]
         ]}
     />
     <Map
+        title='Les Mines Blanches'
         mapKey='aldys-cantane-mines'
         zoomifyKey='fr/mines-blanches'
         mapHeight={6020}

src/pages/fr/bamast/index.astro

@@ -22,6 +22,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Bamast'
         mapKey='bamast'
         zoomifyKey='fr/bamast'
         mapHeight={18342}

src/pages/fr/index.astro

@@ -30,6 +30,7 @@ const players = playersData as PlayerMarker
         ]}
     />
     <Map
+        title='Aldys'
         mapKey='aldys'
         zoomifyKey='fr/aldys-nord'
         mapHeight={21896}

src/types/Map.ts

@@ -1,8 +1,8 @@
 import type { MapMarker, PlayerMarker } from "./Leaflet"
 
 export interface BreadcrumbItem {
-    name: string;
+    name: string
-    url: string;
+    url: string
 }
 
 export interface SearchConfig {
@@ -12,6 +12,7 @@ export interface SearchConfig {
 }
 
 export interface MapProps {
+    title: string
     mapKey: string
     zoomifyKey: string
     mapHeight: number