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

118
components/settings/SettingsBottomNav.vue
View file

@ -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>