ssR-1668/1683 Accessibility updates for date picker

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;
         }
     }
 };