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 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/components/Global/TableDateFilter.vue')

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