Fixed some accessibility issues

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

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>

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>

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