From 8b976e909a4441b369ff9d2141e182684fb2da7a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 2 Apr 2025 14:02:53 +0200
Subject: [PATCH] Fixed some accessibility issues

---
 src/components/maps/Map.astro                   | 5 +++--
 src/components/maps/MapOverlayBreadcrumbs.astro | 4 ++--
 src/components/maps/overlay/LangSwitcher.vue    | 4 ++--
 src/components/maps/overlay/SearchMapSwitch.vue | 2 +-
 src/components/maps/overlay/SearchMarkers.vue   | 2 +-
 src/i18n/ui.ts                                  | 6 ++++++
 src/pages/en/aldys/borelis/index.astro          | 1 +
 src/pages/en/aldys/cantane/index.astro          | 1 +
 src/pages/en/aldys/cantane/mines-blanches.astro | 1 +
 src/pages/en/bamast/index.astro                 | 1 +
 src/pages/en/index.astro                        | 1 +
 src/pages/fr/aldys/borelis/index.astro          | 1 +
 src/pages/fr/aldys/cantane/index.astro          | 1 +
 src/pages/fr/aldys/cantane/mines-blanches.astro | 1 +
 src/pages/fr/bamast/index.astro                 | 1 +
 src/pages/fr/index.astro                        | 1 +
 src/types/Map.ts                                | 5 +++--
 17 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/maps/Map.astro b/src/components/maps/Map.astro
index a54410f3..812ccaed 100644
--- a/src/components/maps/Map.astro
+++ b/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) => (
diff --git a/src/components/maps/MapOverlayBreadcrumbs.astro b/src/components/maps/MapOverlayBreadcrumbs.astro
index 9c2715f2..a2751d22 100644
--- a/src/components/maps/MapOverlayBreadcrumbs.astro
+++ b/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) &&
diff --git a/src/components/maps/overlay/LangSwitcher.vue b/src/components/maps/overlay/LangSwitcher.vue
index 2eae4cff..c1a6eb7d 100644
--- a/src/components/maps/overlay/LangSwitcher.vue
+++ b/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>
diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
index 6d0f8279..d431e84b 100644
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/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>
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index ffe6c164..1c14089c 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/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">
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 74b058c4..d3e68739 100644
--- a/src/i18n/ui.ts
+++ b/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',
diff --git a/src/pages/en/aldys/borelis/index.astro b/src/pages/en/aldys/borelis/index.astro
index 369ecf61..0d963538 100644
--- a/src/pages/en/aldys/borelis/index.astro
+++ b/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}
diff --git a/src/pages/en/aldys/cantane/index.astro b/src/pages/en/aldys/cantane/index.astro
index d2a863ed..bee5f3ba 100644
--- a/src/pages/en/aldys/cantane/index.astro
+++ b/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}
diff --git a/src/pages/en/aldys/cantane/mines-blanches.astro b/src/pages/en/aldys/cantane/mines-blanches.astro
index 462423fc..4185439c 100644
--- a/src/pages/en/aldys/cantane/mines-blanches.astro
+++ b/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}
diff --git a/src/pages/en/bamast/index.astro b/src/pages/en/bamast/index.astro
index 7084c754..83417a90 100644
--- a/src/pages/en/bamast/index.astro
+++ b/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}
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index f339541b..90333ae9 100644
--- a/src/pages/en/index.astro
+++ b/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}
diff --git a/src/pages/fr/aldys/borelis/index.astro b/src/pages/fr/aldys/borelis/index.astro
index 016f347c..386ba8c3 100644
--- a/src/pages/fr/aldys/borelis/index.astro
+++ b/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}
diff --git a/src/pages/fr/aldys/cantane/index.astro b/src/pages/fr/aldys/cantane/index.astro
index 61b90784..90e2011d 100644
--- a/src/pages/fr/aldys/cantane/index.astro
+++ b/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}
diff --git a/src/pages/fr/aldys/cantane/mines-blanches.astro b/src/pages/fr/aldys/cantane/mines-blanches.astro
index b67de3ca..fd6533f6 100644
--- a/src/pages/fr/aldys/cantane/mines-blanches.astro
+++ b/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}
diff --git a/src/pages/fr/bamast/index.astro b/src/pages/fr/bamast/index.astro
index b5e8df9b..ad83dea5 100644
--- a/src/pages/fr/bamast/index.astro
+++ b/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}
diff --git a/src/pages/fr/index.astro b/src/pages/fr/index.astro
index 48653cd7..c3acc240 100644
--- a/src/pages/fr/index.astro
+++ b/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}
diff --git a/src/types/Map.ts b/src/types/Map.ts
index e0fe5ffd..4102f0d5 100644
--- a/src/types/Map.ts
+++ b/src/types/Map.ts
@@ -1,8 +1,8 @@
 import type { MapMarker, PlayerMarker } from "./Leaflet"
 
 export interface BreadcrumbItem {
-    name: string;
-    url: string;
+    name: string
+    url: string
 }
 
 export interface SearchConfig {
@@ -12,6 +12,7 @@ export interface SearchConfig {
 }
 
 export interface MapProps {
+    title: string
     mapKey: string
     zoomifyKey: string
     mapHeight: number