Accessibility improvements (#44)

rehookify · Dec 1, 2023 · 3433c9b · 3433c9b
1 parent 8d51e2b
commit 3433c9b
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 12 deletions.
diff --git a/packages/datepicker/package.json b/packages/datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rehookify/datepicker",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "The ultimate tool to create a date, range and time picker in your React applications.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",

diff --git a/packages/datepicker/src/__test__/create-month.test.ts b/packages/datepicker/src/__test__/create-month.test.ts
@@ -24,8 +24,14 @@ describe('createMonth', () => {
     expect(active.length).toBe(1);
     expect(now.length).toBe(1);
 
+    // This manipulation is needed to prevent selecting month in the next year
+    // for example if today is December then next month will be January
+    // and test will fail because in current year selected only 1 month 😅
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    const nextMonth = M === 11 ? M - 1 : M + 1;
+
     // with 2 selected dates
-    months = createMonths(NOW, [NOW, newDate(Y, M + 1, D)], locale, dates);
+    months = createMonths(NOW, [NOW, newDate(Y, nextMonth, D)], locale, dates);
 
     let selected = months.filter(({ selected }) => selected);
 

diff --git a/packages/datepicker/src/types/day.ts b/packages/datepicker/src/types/day.ts
@@ -13,6 +13,7 @@ export type DPDayRange =
 
 export interface DPDay {
   $date: Date;
+  active: boolean;
   day: string;
   disabled: boolean;
   inCurrentMonth: boolean;

diff --git a/packages/datepicker/src/use-days.ts b/packages/datepicker/src/use-days.ts
@@ -35,7 +35,7 @@ export const useDaysPropGetters: DPUseDaysPropGetters = ({
 
   const dayButton = useCallback(
     (
-      { $date, selected, disabled }: DPDay,
+      { $date, selected, disabled, active }: DPDay,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
@@ -76,6 +76,7 @@ export const useDaysPropGetters: DPUseDaysPropGetters = ({
                 setRangeEndAction(dispatch, $date);
               },
             }),
+          tabIndex: active ? 0 : -1,
         },
         selected,
       ),

diff --git a/packages/datepicker/src/use-months.ts b/packages/datepicker/src/use-months.ts
@@ -26,13 +26,16 @@ export const useMonths: DPUseMonths = ({
 export const useMonthsPropGetters: DPUseMonthsPropGetters = (dpState) => {
   const monthButton = useCallback(
     (
-      { $date, disabled, selected }: DPMonth,
+      { $date, disabled, selected, active }: DPMonth,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
         !!disabledProps || disabled,
         (evt) => callAll(onClick, skipFirst(setDPOffset(dpState)))(evt, $date),
-        rest,
+        {
+          ...rest,
+          tabIndex: active ? 0 : -1,
+        },
         selected,
       ),
     [dpState],

diff --git a/packages/datepicker/src/use-time.ts b/packages/datepicker/src/use-time.ts
@@ -28,7 +28,7 @@ export const useTimePropGetter: DPUseTimePropGetter = ({
 }) => {
   const timeButton = useCallback(
     (
-      { $date, selected, disabled }: DPTime,
+      { $date, selected, disabled, now }: DPTime,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
@@ -46,7 +46,10 @@ export const useTimePropGetter: DPUseTimePropGetter = ({
             }),
           )(evt, $date);
         },
-        rest,
+        {
+          ...rest,
+          tabIndex: selected || now ? 0 : -1,
+        },
         selected,
       ),
     [selectedDates, onDatesChange, dispatch, focusDate],

diff --git a/packages/datepicker/src/use-years.ts b/packages/datepicker/src/use-years.ts
@@ -39,13 +39,16 @@ export const useYearsPropGetters: DPUseYearsPropGetters = (dpState) => {
 
   const yearButton = useCallback(
     (
-      { $date, disabled, selected }: DPYear,
+      { $date, disabled, selected, active }: DPYear,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
         !!disabledProps || disabled,
         (evt) => callAll(onClick, skipFirst(setDPOffset(dpState)))(evt, $date),
-        rest,
+        {
+          ...rest,
+          tabIndex: active ? 0 : -1,
+        },
         selected,
       ),
     [dpState],

diff --git a/packages/datepicker/src/utils/create-calendars.ts b/packages/datepicker/src/utils/create-calendars.ts
@@ -25,6 +25,7 @@ import {
 
 const createCalendar = (
   offsetDate: Date,
+  calendarStartDate: Date,
   selectedDates: Date[],
   { rangeEnd }: DPReducerState,
   config: DPConfig,
@@ -36,7 +37,7 @@ const createCalendar = (
     exclude,
   } = config;
   const { locale: localeStr, day, year } = locale;
-  const { M, Y } = getDateParts(offsetDate);
+  const { M, Y } = getDateParts(calendarStartDate);
   const { start, length } = getCalendarMonthParams(M, Y, calendar);
 
   const days: DPDay[] = Array(length)
@@ -46,6 +47,7 @@ const createCalendar = (
 
       return {
         $date,
+        active: isSame(offsetDate, $date),
         day: toLocaleDateString($date, localeStr, { day }),
         now: isSame(getCleanDate(newDate()), $date),
         range: getDateRangeState($date, rangeEnd, selectedDates, mode),
@@ -59,8 +61,8 @@ const createCalendar = (
     });
 
   return {
-    year: toLocaleDateString(offsetDate, localeStr, { year }),
-    month: formatMonthName(offsetDate, locale),
+    year: toLocaleDateString(calendarStartDate, localeStr, { year }),
+    month: formatMonthName(calendarStartDate, locale),
     days,
   };
 };
@@ -73,6 +75,7 @@ export const createCalendars = ({
 }: DPState): DPCalendar[] => {
   return config.calendar.offsets.map((offset) =>
     createCalendar(
+      offsetDate,
       addToDate(offsetDate, offset, 'month'),
       selectedDates,
       state,