diff options
| author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-19 04:38:18 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-11-25 09:28:21 +0300 |
| commit | e9116ebe409d7b1e49b8a31a292a55735a13638a (patch) | |
| tree | 8cbcca93ea1eedabf5989749eb6b9387d9ae3ab5 | |
| parent | 8a8b3e7033592d1b2ab9fd6f8c9130acc1f85d19 (diff) | |
| download | webui-vue-e9116ebe409d7b1e49b8a31a292a55735a13638a.tar.xz | |
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
| -rw-r--r-- | src/components/Global/TableDateFilter.vue | 10 | ||||
| -rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 4 |
2 files changed, 10 insertions, 4 deletions
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index 00c04ab0..aa10cb5c 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 d1d04539..d3c19d57 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> |