Add datepicker label
Span with sr-only class added to date picker button
to implicity add label.
The bootstrap vue datepicker component does not have
an accessibility prop for the button inside the
datepicker wrapper.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I6fd3e55b865343769d6c0a179ae4c5d8c1038ffb
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 00c04ab..aa10cb5 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -34,13 +34,15 @@
:label-help="
$t('global.calendar.useCursorKeysToNavigateCalendarDates')
"
- :aria-label="$t('global.calendar.selectDate')"
:title="$t('global.calendar.selectDate')"
button-variant="link"
aria-controls="input-from-date"
>
<template #button-content>
<icon-calendar />
+ <span class="sr-only">
+ {{ $t('global.calendar.selectDate') }}
+ </span>
</template>
</b-form-datepicker>
</b-input-group>
@@ -78,13 +80,15 @@
:label-help="
$t('global.calendar.useCursorKeysToNavigateCalendarDates')
"
- :aria-label="$t('global.calendar.openDatePicker')"
- :title="$t('global.calendar.openDatePicker')"
+ :title="$t('global.calendar.selectDate')"
button-variant="link"
aria-controls="input-to-date"
>
<template #button-content>
<icon-calendar />
+ <span class="sr-only">
+ {{ $t('global.calendar.selectDate') }}
+ </span>
</template>
</b-form-datepicker>
</b-input-group>
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index d1d0453..d3c19d5 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -81,7 +81,6 @@
:label-help="
$t('global.calendar.useCursorKeysToNavigateCalendarDates')
"
- :aria-label="$t('global.calendar.selectDate')"
:title="$t('global.calendar.selectDate')"
:disabled="form.configurationSelected === 'ntp'"
button-variant="link"
@@ -89,6 +88,9 @@
>
<template #button-content>
<icon-calendar />
+ <span class="sr-only">
+ {{ $t('global.calendar.selectDate') }}
+ </span>
</template>
</b-form-datepicker>
</b-input-group>