From 6e2cb978428ba078ebe0d171a69322308ab48d48 Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Thu, 24 Dec 2020 20:58:16 +0530
Subject: Fixed icon or text only button accessibility

- Add sr-only element to icon only buttons
- Removed title from text only buttons

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ica57dec70401c04a9d7506306a406fe394e52113
---
 src/components/Global/TableRowAction.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/components/Global/TableRowAction.vue')

diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index 5b2c4a99..9d853bc7 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -6,11 +6,11 @@
       :download="download"
       :href="href"
       :title="title"
-      :aria-label="title"
     >
       <slot name="icon">
         {{ $t('global.action.export') }}
       </slot>
+      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
     </b-link>
     <b-link
       v-else-if="value === 'download'"
@@ -27,15 +27,15 @@
     <b-button
       v-else
       variant="link"
-      class="btn-icon-only"
-      :aria-label="title"
-      :title="title"
+      :class="{ 'btn-icon-only': btnIconOnly }"
       :disabled="!enabled"
+      :title="btnIconOnly ? title : !title"
       @click="$emit('click-table-action', value)"
     >
       <slot name="icon">
         {{ title }}
       </slot>
+      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
     </b-button>
   </span>
 </template>
@@ -70,6 +70,10 @@ export default {
       type: String,
       default: '',
     },
+    btnIconOnly: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     dataForExport() {
-- 
cgit v1.2.3