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>