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 /src/components/Global | |
| 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
Diffstat (limited to 'src/components/Global')
| -rw-r--r-- | src/components/Global/TableDateFilter.vue | 10 |
1 files changed, 7 insertions, 3 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> |