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

65
components/settings/SettingsFontSize.vue
View file

@ -13,40 +13,45 @@ function setFontSize(e: Event) {
</script>
<template>
<div flex items-center space-x-4>
<span text-xs text-secondary>Aa</span>
<div flex-1 relative flex items-center>
<input
aria-labelledby="interface-fs"
:value="sizes.indexOf(userSettings.fontSize)"
:aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
:min="0"
:max="sizes.length - 1"
:step="1"
type="range"
focus:outline-none
appearance-none bg-transparent
w-full cursor-pointer
@change="setFontSize"
>
<div flex items-center justify-between absolute w-full pointer-events-none>
<div
v-for="i in sizes.length" :key="i"
class="container-marker"
h-3 w-3
rounded-full bg-secondary-light
relative
<section space-y-2>
<h2 id="interface-fs" font-medium>
{{ $t('settings.interface.font_size') }}
</h2>
<div flex items-center space-x-4 select-settings>
<span text-xs text-secondary>Aa</span>
<div flex-1 relative flex items-center>
<input
aria-labelledby="interface-fs"
:value="sizes.indexOf(userSettings.fontSize)"
:aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
:min="0"
:max="sizes.length - 1"
:step="1"
type="range"
focus:outline-none
appearance-none bg-transparent
w-full cursor-pointer
@change="setFontSize"
>
<div flex items-center justify-between absolute w-full pointer-events-none>
<div
v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
absolute rounded-full class="-top-1 -left-1"
bg-primary h-5 w-5
/>
v-for="i in sizes.length" :key="i"
class="container-marker"
h-3 w-3
rounded-full bg-secondary-light
relative
>
<div
v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
absolute rounded-full class="-top-1 -left-1"
bg-primary h-5 w-5
/>
</div>
</div>
</div>
<span text-xl text-secondary>Aa</span>
</div>
<span text-xl text-secondary>Aa</span>
</div>
</section>
</template>
<style>
@ -64,7 +69,7 @@ function setFontSize(e: Event) {
input[type=range]::-webkit-slider-runnable-track {
--at-apply: bg-secondary-light rounded-full h1 op60;
}
input[type=range]:focus:-webkit-slider-runnable-track {
input[type=range]:focus::-webkit-slider-runnable-track {
--at-apply: outline-2 outline-red;
}
input[type=range]::-webkit-slider-thumb {