Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-14 12:59:59 +00:00
Code Issues Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/settings/SettingsBottomNav.vue
View file

@ -67,7 +67,14 @@ function save() {
</script>
<template>
<section space-y-2>
<h2 id="interface-bn" font-medium>
{{ $t('settings.interface.bottom_nav') }}
</h2>
<form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
<p id="interface-bn-desc" pb-2>
{{ $t('settings.interface.bottom_nav_instructions') }}
</p>
<!-- preview -->
<div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
<nav
@ -124,4 +131,5 @@ function save() {
</button>
</div>
</form>
</section>
</template>

5
components/settings/SettingsColorMode.vue
View file

@ -27,6 +27,10 @@ const modes = [
</script>
<template>
<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"
@ -41,4 +45,5 @@ const modes = [
{{ $t(label) }}
</button>
</div>
</section>
</template>

9
components/settings/SettingsFontSize.vue
View file

@ -13,7 +13,11 @@ function setFontSize(e: Event) {
</script>
<template>
<div flex items-center space-x-4>
<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
@ -47,6 +51,7 @@ function setFontSize(e: Event) {
</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 {

5
components/settings/SettingsThemeColors.vue
View file

@ -12,6 +12,10 @@ function updateTheme(theme: ThemeColors) {
</script>
<template>
<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"
@ -28,4 +32,5 @@ function updateTheme(theme: ThemeColors) {
@click="updateTheme(theme)"
/>
</div>
</section>
</template>

27
pages/settings/interface/index.vue
View file

@ -13,34 +13,11 @@ useHydratedHead({
<span>{{ $t('settings.interface.label') }}</span>
</div>
</template>
<div p6 flex="~ col gap6">
<div space-y-2>
<p id="interface-fs" font-medium>
{{ $t('settings.interface.font_size') }}
</p>
<SettingsFontSize select-settings />
</div>
<div space-y-2>
<p id="interface-cm" font-medium>
{{ $t('settings.interface.color_mode') }}
</p>
<div px-6 pt-3 pb-6 flex="~ col gap6">
<SettingsFontSize />
<SettingsColorMode />
</div>
<div space-y-2>
<p id="interface-tc" font-medium>
{{ $t('settings.interface.theme_color') }}
</p>
<SettingsThemeColors />
</div>
<div space-y-2>
<p id="interface-bn" font-medium>
{{ $t('settings.interface.bottom_nav') }}
</p>
<p id="interface-bn-desc">
{{ $t('settings.interface.bottom_nav_instructions') }}
</p>
<SettingsBottomNav />
</div>
</div>
</MainContent>
</template>