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

6 files changed, 17 insertions, 10 deletions

diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 95e74045..9160c7b7 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -5,10 +5,10 @@
     :class="{ 'show-btn': showButton }"
     variant="secondary"
     :title="$t('global.ariaLabel.scrollToTop')"
-    :aria-label="$t('global.ariaLabel.scrollToTop')"
     @click="scrollToTop"
   >
     <icon-up-to-top />
+    <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span>
   </b-button>
 </template>
 
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index eaed445d..4457a312 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -23,8 +23,11 @@
         class="px-2 ml-auto"
         :disabled="disabled"
         @click="file = null"
-        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')"
-      /></b-button>
+        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
+          class="sr-only"
+          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
+        >
+      </b-button>
     </div>
   </div>
 </template>
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index 5d604503..c91109d1 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -4,9 +4,9 @@
     variant="link"
     class="btn-tooltip btn-icon-only"
     :title="title"
-    :aria-label="$t('global.ariaLabel.tooltip')"
   >
     <icon-tooltip />
+    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
   </b-button>
 </template>
 
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 969a15d3..d2c0d4a6 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -2,7 +2,6 @@
   <div class="input-password-toggle-container">
     <slot></slot>
     <b-button
-      :aria-label="togglePasswordLabel"
       :title="togglePasswordLabel"
       variant="link"
       class="input-action-btn btn-icon-only"
@@ -11,6 +10,7 @@
     >
       <icon-view-off v-if="isVisible" />
       <icon-view v-else />
+      <span class="sr-only">{{ togglePasswordLabel }}</span>
     </b-button>
   </div>
 </template>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 6029f4b7..ac8f9bfb 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -25,11 +25,11 @@
           v-if="filter"
           variant="link"
           class="btn-icon-only input-action-btn"
-          :aria-label="$t('global.ariaLabel.clearSearch')"
           :title="$t('global.ariaLabel.clearSearch')"
           @click="onClearSearch"
         >
           <icon-close />
+          <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
         </b-button>
       </b-input-group>
     </b-form-group>
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() {