mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01: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.
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
|
|
<div class="flex items-center mb-2">
|
|
<h1 class="text-xl">{{ headerText }}</h1>
|
|
|
|
<div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
|
|
<button class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
|
|
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
headerText: String,
|
|
description: String,
|
|
note: String,
|
|
showAddButton: Boolean
|
|
},
|
|
methods: {
|
|
clicked() {
|
|
this.$emit('clicked')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#settings-description a {
|
|
color: rgb(96 165 250);
|
|
}
|
|
#settings-description a:hover {
|
|
color: rgb(147 197 253);
|
|
text-decoration-line: underline;
|
|
}
|
|
#settings-description code {
|
|
font-size: 0.875rem;
|
|
border-radius: 6px;
|
|
background-color: rgb(82, 82, 82);
|
|
color: white;
|
|
padding: 2px 4px;
|
|
}
|
|
</style> |