add date picker day narration for accessibility

bcgov · Aug 13, 2024 · 6620e6a · 6620e6a
1 parent e540bcc
commit 6620e6a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue
@@ -66,6 +66,11 @@
               v-model="publishedOn"
               :aria-labels="{ input: 'Publish On' }"
             >
+              <template #day="{ day, date }">
+                <span :aria-label="formatDate(date)">
+                  {{ day }}
+                </span>
+              </template>
             </VueDatePicker>
           </v-col>
         </v-row>
@@ -89,7 +94,13 @@
               prevent-min-max-navigation
               v-model="expiresOn"
               :disabled="noExpiry"
-            />
+            >
+              <template #day="{ day, date }">
+                <span :aria-label="formatDate(date)">
+                  {{ day }}
+                </span>
+              </template>
+            </VueDatePicker>
           </v-col>
         </v-row>
         <v-row class="mt-0">
@@ -152,7 +163,8 @@ import { AnnouncementFormValue } from '../../types/announcements';
 import { useField, useForm } from 'vee-validate';
 import * as zod from 'zod';
 import { isEmpty } from 'lodash';
-import { LocalDate, nativeJs } from '@js-joda/core';
+import { DateTimeFormatter, LocalDate, nativeJs } from '@js-joda/core';
+import { Locale } from '@js-joda/locale_en';
 import ConfirmationDialog from '../util/ConfirmationDialog.vue';
 import { useRouter } from 'vue-router';
 
@@ -228,6 +240,12 @@ watch(noExpiry, () => {
   }
 });
 
+const formatDate = (date: Date) => {
+  return LocalDate.from(nativeJs(date)).format(
+    DateTimeFormatter.ofPattern('EEEE d MMMM yyyy').withLocale(Locale.CANADA),
+  );
+};
+
 const handleCancel = async () => {
   if (!meta.value.dirty) {
     router.back();

diff --git a/admin-frontend/src/components/announcements/AnnouncementSearchFilters.vue b/admin-frontend/src/components/announcements/AnnouncementSearchFilters.vue
@@ -53,12 +53,19 @@
         <VueDatePicker
           v-model="publishDateRange"
           range
+          placeholder="Select date range"
           format="yyyy-MM-dd"
           :enable-time-picker="false"
           arrow-navigation
           auto-apply
           prevent-min-max-navigation
-        />
+        >
+          <template #day="{ day, date }">
+            <span :aria-label="formatDate(date)">
+              {{ day }}
+            </span>
+          </template>
+        </VueDatePicker>
       </v-col>
 
       <v-col sm="6" md="6" lg="4" xl="3" class="d-flex flex-column">
@@ -71,7 +78,14 @@
           arrow-navigation
           auto-apply
           prevent-min-max-navigation
-        />
+          placeholder="Select date range"
+        >
+          <template #day="{ day, date }">
+            <span :aria-label="formatDate(date)">
+              {{ day }}
+            </span>
+          </template>
+        </VueDatePicker>
       </v-col>
 
       <v-col sm="6" md="6" lg="4" xl="3" class="d-flex flex-column">
@@ -169,7 +183,9 @@ import {
   nativeJs,
   DateTimeFormatter,
   ZoneId,
+  LocalDate,
 } from '@js-joda/core';
+import { Locale } from '@js-joda/locale_en';
 
 const announcementSearchStore = useAnnouncementSearchStore();
 
@@ -186,6 +202,12 @@ const statusOptions = ref([
   AnnouncementStatus.Expired,
 ]);
 
+const formatDate = (date: Date) => {
+  return LocalDate.from(nativeJs(date)).format(
+    DateTimeFormatter.ofPattern('EEEE d MMMM yyyy').withLocale(Locale.CANADA),
+  );
+};
+
 function getAnnouncementSearchFilters(): AnnouncementFilterType {
   const filters: any[] = [];
   if (searchText.value) {