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/components/Global/TableDateFilter.vue                     | 10 +++++++---
 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>
-- 
cgit v1.2.3