couple updates

src/digital-components/date-picker/date-picker.vue

@@ -62,7 +62,8 @@
                             class="morning-row-cell"
                             :class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
-                            @click="showMorningTimes(n - 1)">
+                            @click="showMorningTimes(n - 1)"
+                            @keydown.enter="showMorningTimes(n - 1)">
                             <span class="span-block top-caption">Morning</span>
                             <span class="span-block bottom-caption">
                                 {{ showMorningAvailabilityForIndex(n - 1) }} available
@@ -79,7 +80,8 @@
                             class="afternoon-row-cell"
                             :class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
                             , checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
-                            @click="showAfternoonTimes(n - 1)">
+                            @click="showAfternoonTimes(n - 1)"
+                            @keydown.enter="showAfternoonTimes(n - 1)">
                             <span class="span-block top-caption">Afternoon</span>
                             <span class="span-block bottom-caption">
                                 {{ showAfternoonAvailabilityForIndex(n - 1) }} available
@@ -98,6 +100,15 @@
                 <template
                     v-for="timeSlot in selectableTimeSlotsData"
                     :key="timeSlot.startTime">
+                    <input
+                        :id="`timeslot${timeSlot.startTime}`"
+                        v-model="selectedTime"
+                        type="radio"
+                        name="time-slot"
+                        class="sr-only"
+                        :value="timeSlot.startTime"
+                        @focus="timeSlotFocused(timeSlot)"
+                        @change="timeSlotInputChanged(timeSlot)" />
                     <label
                         :for="`timeslot${timeSlot.startTime}`"
                         class="time-slot-button"
@@ -106,14 +117,6 @@
                         @click="selectTimeSlotForDay(timeSlot)">
                         {{ displayTimeSlotTime(timeSlot.startTime) }}
                     </label>
-                    <input
-                        :id="`timeslot${timeSlot.startTime}`"
-                        v-model="selectedTime"
-                        type="radio"
-                        name="time-slot"
-                        class="sr-only"
-                        :value="timeSlot.startTime"
-                        @change="timeSlotInputChanged(timeSlot)" />
                 </template>
             </div>
             <div class="row form-test-error">
@@ -180,7 +183,7 @@ export default {
             default: ''
         }
     },
-    emits: ['update:modelValue', 'dateSelected', 'timeSlotSelected'],
+    emits: ['dateSelected', 'timeSlotSelected'],
     setup(props) {
         const uuid = crypto.randomUUID();
         const componentId = !props.customComponentId
@@ -556,6 +559,11 @@ export default {
                 this.selectedTime = null;
             }
         },
+        timeSlotFocused(timeSlot) {
+            if (timeSlot && this.selectedTime === null) {
+                this.selectTimeSlotForDay(timeSlot);
+            }
+        },
         timeSlotInputChanged(timeSlot) {
             this.selectTimeSlotForDay(timeSlot);
         },
@@ -648,6 +656,9 @@ export default {
                 this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
             } else {
                 this.findFirstAvailableDateInView();
+                while (!this.selectedDate) {
+                    this.gotoNextPage();
+                }
             }
 
             this.isLoading = false;
@@ -665,7 +676,9 @@ export default {
             await this.updateSelectableDates(
                 startDateToFetchString,
                 endDateToFetchString
-            );
+            ).catch(() => {
+                showIssLoadingModal(false);
+            });
 
             showIssLoadingModal(false);
         },