From 9c8dffddcf3365677f041687b30dafa6b71af1f0 Mon Sep 17 00:00:00 2001
From: Toni Barth <software@satoprogs.de>
Date: Tue, 26 Nov 2024 20:11:18 +0100
Subject: [PATCH] add a text prop to those buttons which gets used as
 aria-label

---
 client/components/ui/IconBtn.vue     |  8 ++++++--
 client/components/ui/ReadIconBtn.vue | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/components/ui/IconBtn.vue b/client/components/ui/IconBtn.vue
index 05039b8dc..98da4329e 100644
--- a/client/components/ui/IconBtn.vue
+++ b/client/components/ui/IconBtn.vue
@@ -1,6 +1,6 @@
 <template>
-  <button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
-    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+  <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" aria-hidden="true">
       <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" />
       </svg>
@@ -28,6 +28,10 @@ export default {
     size: {
       type: Number,
       default: 9
+    },
+    text: {
+      type: String,
+      default: ""
     }
   },
   data() {
diff --git a/client/components/ui/ReadIconBtn.vue b/client/components/ui/ReadIconBtn.vue
index ddbd35418..eb8bb2e10 100644
--- a/client/components/ui/ReadIconBtn.vue
+++ b/client/components/ui/ReadIconBtn.vue
@@ -1,6 +1,6 @@
 <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">
-    <div class="w-5 h-5 text-white relative">
+  <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" aria-hidden="true">
       <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" />
       </svg>
@@ -16,7 +16,11 @@ export default {
   props: {
     isRead: Boolean,
     disabled: Boolean,
-    borderless: Boolean
+    borderless: Boolean,
+    text: {
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {}