mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-11-04 03:17:00 -05:00
2c344a0bc0
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.
49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<button :aria-labelledby="labeledBy" role="checkbox" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
|
|
<span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: Boolean,
|
|
onColor: {
|
|
type: String,
|
|
default: 'success'
|
|
},
|
|
offColor: {
|
|
type: String,
|
|
default: 'primary'
|
|
},
|
|
disabled: Boolean,
|
|
labeledBy: String
|
|
},
|
|
computed: {
|
|
toggleValue: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
},
|
|
className() {
|
|
if (this.disabled) return this.toggleValue ? `bg-${this.onColor} cursor-not-allowed` : `bg-${this.offColor} cursor-not-allowed`
|
|
return this.toggleValue ? `bg-${this.onColor}` : `bg-${this.offColor}`
|
|
},
|
|
switchClassName() {
|
|
var bgColor = this.disabled ? 'bg-gray-300' : 'bg-white'
|
|
return this.toggleValue ? 'translate-x-5 ' + bgColor : bgColor
|
|
}
|
|
},
|
|
methods: {
|
|
clickToggle() {
|
|
if (this.disabled) return
|
|
this.toggleValue = !this.toggleValue
|
|
}
|
|
}
|
|
}
|
|
</script> |