Fixed some accessibility issues
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user