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/ButtonBackToTop.vue                    |  2 +-
 src/components/Global/FormFile.vue                           |  7 +++++--
 src/components/Global/InfoTooltip.vue                        |  2 +-
 src/components/Global/InputPasswordToggle.vue                |  2 +-
 src/components/Global/Search.vue                             |  2 +-
 src/components/Global/TableRowAction.vue                     | 12 ++++++++----
 src/views/AccessControl/ClientSessions/ClientSessions.vue    |  1 +
 .../Health/HardwareStatus/HardwareStatusTableBmcManager.vue  |  2 +-
 .../Health/HardwareStatus/HardwareStatusTableChassis.vue     |  2 +-
 .../Health/HardwareStatus/HardwareStatusTableDimmSlot.vue    |  2 +-
 src/views/Health/HardwareStatus/HardwareStatusTableFans.vue  |  2 +-
 .../HardwareStatus/HardwareStatusTablePowerSupplies.vue      |  2 +-
 .../Health/HardwareStatus/HardwareStatusTableProcessors.vue  |  2 +-
 .../Health/HardwareStatus/HardwareStatusTableStystem.vue     |  2 +-
 14 files changed, 25 insertions(+), 17 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() {
diff --git a/src/views/AccessControl/ClientSessions/ClientSessions.vue b/src/views/AccessControl/ClientSessions/ClientSessions.vue
index f15c63c7..1921c86a 100644
--- a/src/views/AccessControl/ClientSessions/ClientSessions.vue
+++ b/src/views/AccessControl/ClientSessions/ClientSessions.vue
@@ -73,6 +73,7 @@
               :value="action.value"
               :title="action.title"
               :row-data="row.item"
+              :btn-icon-only="false"
               :data-test-id="`sessionLogs-button-deleteRow-${row.index}`"
               @click-table-action="onTableRowAction($event, row.item)"
             ></table-row-action>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 29a6679b..2fdcb2ed 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -13,12 +13,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 231f7c67..2bf11f62 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -13,12 +13,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 70df3466..ca9e949c 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -35,12 +35,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index e16495b1..10b14a47 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -35,12 +35,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandFans"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 7b4e5a19..3de69198 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -35,12 +35,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6e2ebdae..2f956a9f 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -34,12 +34,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandProcessors"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
       <!-- Health -->
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index a89dacfe..d4087016 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -13,12 +13,12 @@
         <b-button
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
-          :aria-label="expandRowLabel"
           :title="expandRowLabel"
           class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
         </b-button>
       </template>
 
-- 
cgit v1.2.3