feat(a11y): add semantic markup to interface settings (#2809)
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
This commit is contained in:
Joaquín Sánchez
GitHub
parent
f78ce97f05
commit
c504e14ff5
|
|
@ -67,61 +67,69 @@ function save() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
|
||||
<!-- preview -->
|
||||
<div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
|
||||
<nav
|
||||
v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
|
||||
flex="~ 1" items-center justify-center text-xl
|
||||
scrollbar-hide overscroll-none
|
||||
>
|
||||
<button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
|
||||
</nav>
|
||||
</div>
|
||||
<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
|
||||
v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
|
||||
flex="~ 1" items-center justify-center text-xl
|
||||
scrollbar-hide overscroll-none
|
||||
>
|
||||
<button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- button selection -->
|
||||
<div flex="~ gap4 wrap" py4>
|
||||
<button
|
||||
v-for="{ name, label, icon } in availableNavButtons"
|
||||
:key="name"
|
||||
btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
|
||||
:class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="isAdded(name)"
|
||||
@click="isAdded(name) ? remove(name) : append(name)"
|
||||
>
|
||||
<span :class="icon" />
|
||||
{{ label ? $t(label) : 'More menu' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- button selection -->
|
||||
<div flex="~ gap4 wrap" py4>
|
||||
<button
|
||||
v-for="{ name, label, icon } in availableNavButtons"
|
||||
:key="name"
|
||||
btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
|
||||
:class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="isAdded(name)"
|
||||
@click="isAdded(name) ? remove(name) : append(name)"
|
||||
>
|
||||
<span :class="icon" />
|
||||
{{ label ? $t(label) : 'More menu' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="button"
|
||||
:disabled="selectedNavButtonNames.length === 0"
|
||||
:class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
|
||||
@click="clear"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:delete-bin-line" />
|
||||
{{ $t('action.clear') }}
|
||||
</button>
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="reset"
|
||||
@click="reset"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:repeat-line" />
|
||||
{{ $t('action.reset') }}
|
||||
</button>
|
||||
<button
|
||||
btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
:disabled="!canSave"
|
||||
>
|
||||
<span aria-hidden="true" i-ri:save-2-fill />
|
||||
{{ $t('action.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="button"
|
||||
:disabled="selectedNavButtonNames.length === 0"
|
||||
:class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
|
||||
@click="clear"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:delete-bin-line" />
|
||||
{{ $t('action.clear') }}
|
||||
</button>
|
||||
<button
|
||||
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
type="reset"
|
||||
@click="reset"
|
||||
>
|
||||
<span aria-hidden="true" class="block i-ri:repeat-line" />
|
||||
{{ $t('action.reset') }}
|
||||
</button>
|
||||
<button
|
||||
btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
|
||||
:disabled="!canSave"
|
||||
>
|
||||
<span aria-hidden="true" i-ri:save-2-fill />
|
||||
{{ $t('action.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 px-6 pt-3 pb-6 flex="~ col gap6">
|
||||
<SettingsFontSize />
|
||||
<SettingsColorMode />
|
||||
<SettingsThemeColors />
|
||||
<SettingsBottomNav />
|
||||
</div>
|
||||
</MainContent>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue