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

fix(a11y): add aria-* entries to interface settings (#2799) 

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
zio/stable
Joaquín Sánchez 2024-04-13 12:39:59 +02:00 committed by GitHub
parent 8697cc44e4
commit 6bb9ad0511
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 67 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/settings/SettingsBottomNav.vue
View File

@ -67,59 +67,61 @@ function save() {
</script> </script>
<template> <template>
<!-- preview --> <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
<div flex="~ gap4 wrap" items-center select-settings h-14 p0> <!-- preview -->
<nav <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name" <nav
flex="~ 1" items-center justify-center text-xl v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
scrollbar-hide overscroll-none flex="~ 1" items-center justify-center text-xl
> scrollbar-hide overscroll-none
<button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" /> >
</nav> <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
</div> </nav>
</div>
<!-- button selection --> <!-- button selection -->
<div flex="~ gap4 wrap" py4> <div flex="~ gap4 wrap" py4>
<button <button
v-for="{ name, label, icon } in availableNavButtons" v-for="{ name, label, icon } in availableNavButtons"
:key="name" :key="name"
btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap 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' : ''" :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
type="button" type="button"
role="switch" role="switch"
:aria-checked="isAdded(name)" :aria-checked="isAdded(name)"
@click="isAdded(name) ? remove(name) : append(name)" @click="isAdded(name) ? remove(name) : append(name)"
> >
<span :class="icon" /> <span :class="icon" />
{{ label ? $t(label) : 'More menu' }} {{ label ? $t(label) : 'More menu' }}
</button> </button>
</div> </div>
<div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row"> <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
<button <button
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center" btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
type="button" type="button"
:disabled="selectedNavButtonNames.length === 0" :disabled="selectedNavButtonNames.length === 0"
@click="clear" :class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
> @click="clear"
<span aria-hidden="true" class="block i-ri:delete-bin-line" /> >
{{ $t('action.clear') }} <span aria-hidden="true" class="block i-ri:delete-bin-line" />
</button> {{ $t('action.clear') }}
<button </button>
btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center" <button
type="button" btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
@click="reset" type="reset"
> @click="reset"
<span aria-hidden="true" class="block i-ri:repeat-line" /> >
{{ $t('action.reset') }} <span aria-hidden="true" class="block i-ri:repeat-line" />
</button> {{ $t('action.reset') }}
<button </button>
btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center" <button
:disabled="!canSave" btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
@click="save" :disabled="!canSave"
> >
<span aria-hidden="true" i-ri:save-2-fill /> <span aria-hidden="true" i-ri:save-2-fill />
{{ $t('action.save') }} {{ $t('action.save') }}
</button> </button>
</div> </div>
</form>
</template> </template>

5
components/settings/SettingsColorMode.vue
View File

@ -27,12 +27,13 @@ const modes = [
</script> </script>
<template> <template>
<div flex="~ gap4 wrap" w-full> <div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
<button <button
v-for="{ icon, label, mode } in modes" v-for="{ icon, label, mode } in modes"
:key="mode" :key="mode"
type="button"
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:tabindex="colorMode.preference === mode ? 0 : -1" :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
:class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode(mode)" @click="setColorMode(mode)"
> >

1
components/settings/SettingsFontSize.vue
View File

@ -17,6 +17,7 @@ function setFontSize(e: Event) {
<span text-xs text-secondary>Aa</span> <span text-xs text-secondary>Aa</span>
<div flex-1 relative flex items-center> <div flex-1 relative flex items-center>
<input <input
aria-labelledby="interface-fs"
:value="sizes.indexOf(userSettings.fontSize)" :value="sizes.indexOf(userSettings.fontSize)"
:aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`" :aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
:min="0" :min="0"

4
components/settings/SettingsThemeColors.vue
View File

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

10
pages/settings/interface/index.vue
View File

@ -15,28 +15,28 @@ useHydratedHead({
</template> </template>
<div p6 flex="~ col gap6"> <div p6 flex="~ col gap6">
<div space-y-2> <div space-y-2>
<p font-medium> <p id="interface-fs" font-medium>
{{ $t('settings.interface.font_size') }} {{ $t('settings.interface.font_size') }}
</p> </p>
<SettingsFontSize select-settings /> <SettingsFontSize select-settings />
</div> </div>
<div space-y-2> <div space-y-2>
<p font-medium> <p id="interface-cm" font-medium>
{{ $t('settings.interface.color_mode') }} {{ $t('settings.interface.color_mode') }}
</p> </p>
<SettingsColorMode /> <SettingsColorMode />
</div> </div>
<div space-y-2> <div space-y-2>
<p font-medium> <p id="interface-tc" font-medium>
{{ $t('settings.interface.theme_color') }} {{ $t('settings.interface.theme_color') }}
</p> </p>
<SettingsThemeColors /> <SettingsThemeColors />
</div> </div>
<div space-y-2> <div space-y-2>
<p font-medium> <p id="interface-bn" font-medium>
{{ $t('settings.interface.bottom_nav') }} {{ $t('settings.interface.bottom_nav') }}
</p> </p>
<p> <p id="interface-bn-desc">
{{ $t('settings.interface.bottom_nav_instructions') }} {{ $t('settings.interface.bottom_nav_instructions') }}
</p> </p>
<SettingsBottomNav /> <SettingsBottomNav />