From 573a08743da608171edb03417723c734ff4cd32b Mon Sep 17 00:00:00 2001
From: Alex Humphries <Alex.Humphries@safelite.com>
Date: Thu, 7 Nov 2024 11:59:49 -0500
Subject: [PATCH] ssR-1668/1683 Accessibility updates for date picker

---
 .../date-picker/date-picker.vue                  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 732cb6e6..f35b9cd7 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -74,8 +74,9 @@
                         @click="fireDateSelectedEvent"
                         @keypress.enter="fireDateSelectedEvent" />
                     <label
+                        :aria-label="getDateLabel(date, month)"
                         :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                        <span>{{ date.dateNum.toString() }}</span>
+                        <span aria-hidden="true">{{ date.dateNum.toString() }}</span>
                     </label>
                 </div>
             </div>
@@ -785,6 +786,19 @@ export default {
                 }
             };
             window.requestAnimationFrame(step);
+        },
+        getDateLabel(date, month) {
+            const dateStr = `${month.yearNum?.toString()}-${month.monthIndex?.toString()}-${date.dateNum.toString()}`;
+            const dateObj = convertDateStringToDate(dateStr);
+            const labelOptions = {
+                weekday: 'long',
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric'
+            };
+            let label = dateObj.toLocaleDateString('en-US', labelOptions);
+            date.isSelectable ? label += ', available' : label += ', unavailable';
+            return label;
         }
     }
 };