From d2ac76d7922fff243174ee50ab05020a5064aa6e Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Wed, 26 Aug 2020 17:23:45 -0500
Subject: Add title attribute to all icon only buttons

- Title attribute allows action text to be displayed on hover
- Carets in hardware status table will be addressed in a separate
  commit as part of Hardware status accessibility updates

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I58a85b6d244d1125f0b43c22d0bb456a36815097
---
 src/components/Global/InputPasswordToggle.vue | 12 ++++++++++--
 src/components/Global/TableDateFilter.vue     | 10 ++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 519a808f..6ac98639 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -7,8 +7,16 @@
       :class="{ isVisible: isVisible }"
       @click="toggleVisibility"
     >
-      <icon-view-off v-if="isVisible" aria-hidden="true" />
-      <icon-view v-else aria-hidden="true" />
+      <icon-view-off
+        v-if="isVisible"
+        aria-hidden="true"
+        :title="$t('global.ariaLabel.hidePassword')"
+      />
+      <icon-view
+        v-else
+        aria-hidden="true"
+        :title="$t('global.ariaLabel.showPassword')"
+      />
     </b-button>
   </div>
 </template>
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 538f0e05..1313eddd 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -39,7 +39,10 @@
               aria-controls="input-from-date"
             >
               <template v-slot:button-content>
-                <icon-calendar />
+                <icon-calendar
+                  :title="$t('global.calendar.openDatePicker')"
+                  aria-hidden="true"
+                />
                 <span class="sr-only">{{
                   $t('global.calendar.openDatePicker')
                 }}</span>
@@ -86,7 +89,10 @@
               aria-controls="input-to-date"
             >
               <template v-slot:button-content>
-                <icon-calendar />
+                <icon-calendar
+                  :title="$t('global.calendar.openDatePicker')"
+                  aria-hidden="true"
+                />
                 <span class="sr-only">{{
                   $t('global.calendar.openDatePicker')
                 }}</span>
-- 
cgit v1.2.3