Fixed some accessibility issues
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
<script lang="ts" setup>
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
import { currentLang, t } from '@/i18n/store';
|
||||
|
||||
const isDark = useDark({ storageKey: "theme", disableTransition: false })
|
||||
const toggleDark = useToggle(isDark)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div data-theme-toggle id="theme-switcher" class="wrapper appear-from-top">
|
||||
<button @click="toggleDark()" class="btn-round">
|
||||
<button @click="toggleDark()" class="btn-round" :title="t('nav.theme.aria-label')">
|
||||
<svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"></path></svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg>
|
||||
</button>
|
||||
|
||||
@@ -21,9 +21,10 @@ export const translations: LanguageDict = {
|
||||
'capitals': 'Capitales',
|
||||
'points-of-interest': 'Points d\'intérêt',
|
||||
'personals': 'Personnels',
|
||||
'nav.aria-label': 'Navigation principale',
|
||||
'nav.aria-label': 'Menu principal',
|
||||
'nav.map.aria-label': 'Changer de carte',
|
||||
'nav.lang.aria-label': 'Changer de langue',
|
||||
'nav.theme.aria-label': 'Changer de thème',
|
||||
'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',
|
||||
@@ -65,9 +66,10 @@ export const translations: LanguageDict = {
|
||||
'capitals': 'Capitals',
|
||||
'points-of-interest': 'Points of interest',
|
||||
'personals': 'Personals',
|
||||
'nav.aria-label': 'Main navigation',
|
||||
'nav.aria-label': 'Main menu',
|
||||
'nav.map.aria-label': 'Switch map',
|
||||
'nav.lang.aria-label': 'Switch language',
|
||||
'nav.theme.aria-label': 'Switch color theme',
|
||||
'maps.go-to-map': 'See detailed map',
|
||||
'maps.go-to-player': 'Go to current players position',
|
||||
'maps.seeQuest': 'See the quest',
|
||||
|
||||
Reference in New Issue
Block a user