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
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 519a808..6ac9863 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 538f0e0..1313edd 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 07eae3d..de6dfce 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 b6bc815..7358c0d 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>