Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed some accessibility issues

Browse Source
This commit is contained in:
Alexis
2025-04-02 14:02:53 +02:00
parent 47f5df936e
commit 8b976e909a
17 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/maps/Map.astro
View File

@@ -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) => (

4
src/components/maps/MapOverlayBreadcrumbs.astro
View File

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

4
src/components/maps/overlay/LangSwitcher.vue
View File

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

2
src/components/maps/overlay/SearchMapSwitch.vue
View File

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

2
src/components/maps/overlay/SearchMarkers.vue
View File

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

6
src/i18n/ui.ts
View File

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

1
src/pages/en/aldys/borelis/index.astro
View File

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

1
src/pages/en/aldys/cantane/index.astro
View File

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

1
src/pages/en/aldys/cantane/mines-blanches.astro
View File

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

1
src/pages/en/bamast/index.astro
View File

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

1
src/pages/en/index.astro
View File

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

1
src/pages/fr/aldys/borelis/index.astro
View File

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

1
src/pages/fr/aldys/cantane/index.astro
View File

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

1
src/pages/fr/aldys/cantane/mines-blanches.astro
View File

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

1
src/pages/fr/bamast/index.astro
View File

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

1
src/pages/fr/index.astro
View File

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

5
src/types/Map.ts
View File

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