zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat(a11y): add semantic markup to interface settings (#2809)

Browse source 
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
This commit is contained in:
Joaquín Sánchez 2024-04-14 20:06:25 +02:00 • committed by GitHub
parent f78ce97f05
commit c504e14ff5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 143 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

37
components/settings/SettingsThemeColors.vue
View file

@ -12,20 +12,25 @@ function updateTheme(theme: ThemeColors) {
</script>
<template>
<div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
<button
v-for="[key, theme] in themes" :key="key"
:style="{
'background': key,
'--local-ring-color': key,
}"
type="button"
:class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
:aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
:title="theme['--theme-color-name']"
w-8 h-8 rounded-full transition-all
ring="$local-ring-color offset-3 offset-$c-bg-base"
@click="updateTheme(theme)"
/>
</div>
<section space-y-2>
<h2 id="interface-tc" font-medium>
{{ $t('settings.interface.theme_color') }}
</h2>
<div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
<button
v-for="[key, theme] in themes" :key="key"
:style="{
'background': key,
'--local-ring-color': key,
}"
type="button"
:class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
:aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
:title="theme['--theme-color-name']"
w-8 h-8 rounded-full transition-all
ring="$local-ring-color offset-3 offset-$c-bg-base"
@click="updateTheme(theme)"
/>
</div>
</section>
</template>