feat: Accessibility improvements, add keyboard shortcuts (resolves #822)

Author: Jasenkoo

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -93,6 +93,7 @@
     import { CMP } from '@/constants';
 
     import type { ICalendarDay } from '@/interfaces';
+    import { endOfWeek, getMonth, startOfWeek } from 'date-fns';
 
     const emit = defineEmits([
         'tooltip-open',
@@ -128,6 +129,7 @@
         modelValue,
         time,
         disabledTimesConfig,
+        today,
         validateTime,
         getCalendarDays,
         getMarker,
@@ -218,6 +220,30 @@
         timePickerRef.value?.toggleTimePicker(flow, show, childOpen);
     };
 
+    const selectWeekDate = (selectStart: boolean) => {
+        if (!props.range) {
+            const date = modelValue.value ? modelValue.value : today;
+            const toSelect = selectStart
+                ? startOfWeek(date as Date, { weekStartsOn: 1 })
+                : endOfWeek(date as Date, { weekStartsOn: 1 });
+
+            selectDate({
+                value: toSelect,
+                current: getMonth(date as Date) === month.value(0),
+                text: '',
+                classData: {},
+            });
+        }
+    };
+
+    const changeMonth = (isNext: boolean) => {
+        headerRefs.value[0]?.handleMonthYearChange(isNext, true);
+    };
+
+    const changeYear = (isNext: boolean) => {
+        updateMonthYear(0, { month: month.value(0), year: year.value(0) + (isNext ? 1 : -1), fromNav: true });
+    };
+
     const getSidebarProps = () => {
         return {
             modelValue,
@@ -241,5 +267,8 @@
         handleArrow,
         updateMonthYear,
         getSidebarProps,
+        changeMonth,
+        changeYear,
+        selectWeekDate,
     });
 </script>

src/VueDatePicker/components/DatePicker/date-picker.ts

@@ -48,7 +48,7 @@ export const useDatePicker = (
     const lastScrollTime = ref(new Date());
     const clickedDate = ref<ICalendarDay | undefined>();
 
-    const { modelValue, calendars, time } = useModel(props, emit);
+    const { modelValue, calendars, time, today } = useModel(props, emit);
     const {
         defaultedMultiCalendars,
         defaultedStartTime,
@@ -664,6 +664,7 @@ export const useDatePicker = (
         year,
         time,
         disabledTimesConfig,
+        today,
         validateTime,
         getCalendarDays,
         getMarker,

src/VueDatePicker/components/DatepickerMenu.vue

@@ -14,7 +14,7 @@
         @keydown.up.prevent="handleArrowKey('up')"
         @keydown.down.prevent="handleArrowKey('down')"
         @keydown.right.prevent="handleArrowKey('right')"
-        @keydown="checkShiftKey"
+        @keydown="onKeyDown"
     >
         <div v-if="((disabled || readonly) && defaultedInline.enabled) || loading" :class="disabledReadonlyOverlay">
             <div v-if="loading" class="dp--menu-load-container">
@@ -370,6 +370,19 @@
         callChildFn('updateMonthYear', instance, value);
     };
 
+    const onKeyDown = (ev: KeyboardEvent) => {
+        checkShiftKey(ev);
+        if (ev.key === 'Home' || ev.key === 'End') {
+            return callChildFn('selectWeekDate', ev.key === 'Home');
+        }
+        if (ev.key === 'PageUp' || ev.key === 'PageDown') {
+            if (ev.shiftKey) {
+                return callChildFn('changeYear', ev.key === 'PageUp');
+            }
+            return callChildFn('changeMonth', ev.key === 'PageUp');
+        }
+    };
+
     defineExpose({
         updateMonthYear,
         switchView,

src/VueDatePicker/composables/model.ts

@@ -51,5 +51,6 @@ export const useModel = (props: PickerBasePropsType, emit: VueEmit) => {
         modelValue,
         month,
         year,
+        today,
     };
 };

src/VueDatePicker/interfaces.ts

@@ -233,7 +233,15 @@ export interface HeaderSelectionBtn {
     ariaLabel: string;
 }
 
-export type MenuExposedFn = 'selectCurrentDate' | 'presetDate' | 'clearHoverDate' | 'handleArrow' | 'updateMonthYear';
+export type MenuExposedFn =
+    | 'selectCurrentDate'
+    | 'presetDate'
+    | 'clearHoverDate'
+    | 'handleArrow'
+    | 'updateMonthYear'
+    | 'selectWeekDate'
+    | 'changeYear'
+    | 'changeMonth';
 
 export type OptionEnabled = boolean | number | string;