mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-06-24 09:49:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Make User Settings Accessible via Screen Reader

Browse source 
This patch should fix most of the problems for users trying to access
the user settings via screen reader. It makes sure user interface
elements can be reached via keyboard and provides proper labels, roles
and values so you not only can interact with elements but also know what
you are actually changing.

While not focused on other views, this should also already fix a number
of accessibility issues with other settings pages.
This commit is contained in:
Lars Kiesow 2022-12-29 05:00:40 +01:00
parent 315c83e4c3
commit 2c344a0bc0
No known key found for this signature in database
GPG key ID: 5DAFE8D9C823CE73
6 changed files with 31 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

9
client/components/ui/TextInputWithLabel.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="w-full">
<slot>
<p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
<label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
{{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
</p>
</label>
</slot>
<ui-text-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
<ui-text-input :placeholder="label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
</div>
</template>
@ -34,6 +34,9 @@ export default {
set(val) {
this.$emit('input', val)
}
},
identifier() {
return Math.random().toString(36).substring(2)
}
},
methods: {