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 ++++++++--
 src/locales/en-US.json                                       |  1 +
 .../Configuration/DateTimeSettings/DateTimeSettings.vue      |  5 ++++-
 4 files changed, 23 insertions(+), 5 deletions(-)

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>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 07eae3de..de6dfce6 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -19,6 +19,7 @@
       "selected": "Selected"
     },
     "ariaLabel": {
+      "hidePassword": "Hide password",
       "showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
       "tooltip": "Tooltip",
       "progressBar": "Page loading progress bar"
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index b6bc8151..7358c0d0 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -86,7 +86,10 @@
                     aria-controls="input-manual-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