groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-03-06 07:59:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add a text prop to those buttons which gets used as aria-label

Browse source
This commit is contained in:
Toni Barth 2024-11-26 20:11:18 +01:00
parent ffebf745c1
commit 9c8dffddcf
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/components/ui/IconBtn.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn"> <button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn" :aria-label="text">
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100"> <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100" aria-hidden="true">
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24"> <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /> <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg> </svg>
@ -28,6 +28,10 @@ export default {
size: { size: {
type: Number, type: Number,
default: 9 default: 9
},
text: {
type: String,
default: ""
} }
}, },
data() { data() {

10
client/components/ui/ReadIconBtn.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" :class="borderless ? '' : 'bg-primary border border-gray-600'" @click="clickBtn"> <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" :class="borderless ? '' : 'bg-primary border border-gray-600'" @click="clickBtn" :aria-label="text">
<div class="w-5 h-5 text-white relative"> <div class="w-5 h-5 text-white relative" aria-hidden="true">
<svg v-if="isRead" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)"> <svg v-if="isRead" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
<path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" /> <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
</svg> </svg>
@ -16,7 +16,11 @@ export default {
props: { props: {
isRead: Boolean, isRead: Boolean,
disabled: Boolean, disabled: Boolean,
borderless: Boolean borderless: Boolean,
text: {
type: String,
default: ""
}
}, },
data() { data() {
return {} return {}