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

33
components/settings/SettingsColorMode.vue
View file

@ -27,18 +27,23 @@ const modes = [
</script>
<template>
<div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
<button
v-for="{ icon, label, mode } in modes"
:key="mode"
type="button"
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
:class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode(mode)"
>
<span :class="`${icon}`" />
{{ $t(label) }}
</button>
</div>
<section space-y-2>
<h2 id="interface-cm" font-medium>
{{ $t('settings.interface.color_mode') }}
</h2>
<div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
<button
v-for="{ icon, label, mode } in modes"
:key="mode"
type="button"
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
:class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode(mode)"
>
<span :class="`${icon}`" />
{{ $t(label) }}
</button>
</div>
</section>
</template>