From e9116ebe409d7b1e49b8a31a292a55735a13638a Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Wed, 18 Nov 2020 19:38:18 -0600
Subject: 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
---
 src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/views/Configuration')

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>
-- 
cgit v1.2.3