Enhance Calendar Component: Accessibility, Key Movement Refactor, and Test Updates

Accessibility Improvements:
Added aria-label to TableStyled in CalendarStandAloneComponent to improve screen reader support.
File: app/src/components/calendar/calendarStandAlone.tsx
Key Movement Refactoring:
Refactored key movement functions (keyLeftMove, keyRightMove, keyUpMove, keyDownMove) to handle edge cases and improve maintainability.
Files:
app/src/components/calendar/list/list.tsx
app/src/components/calendar/selector/monthSelector/monthSelector.tsx
app/src/components/calendar/selector/yearSelector/yearSelector.tsx
Test Updates:
Updated tests to reflect changes in key movement logic and added new test cases for edge scenarios.
Files:
app/src/components/calendar/selector/monthSelector/__tests__/monthSelector.test.tsx
app/src/components/calendar/selector/monthSelector/utils/monthSelector.test.ts
Type Adjustments:
Modified IMonthSelector interface to make minDate and maxDate required.
File: app/src/components/calendar/selector/monthSelector/types/monthSelector.ts

Author: Kubit

src/components/calendar/calendarStandAlone.tsx

@@ -50,7 +50,14 @@ const CalendarStandAloneComponent = (
       />
       <CalendarSelectorStyled>
         {!showMonthSelector && !showYearSelector && showDaySelector && (
-          <TableStyled role={ROLES.GRID}>
+          <TableStyled
+            aria-label={props.currentDate.toLocaleDateString(props.locale, {
+              timeZone: 'UTC',
+              month: 'long',
+              year: 'numeric',
+            })}
+            role={ROLES.GRID}
+          >
             <Header
               formatWeekDayOption={props.formatWeekDayOption}
               isSundayFirst={props.sundayFirst}

src/components/calendar/list/list.tsx

@@ -9,14 +9,18 @@ import { NEUTRAL_DATE } from '@/types';
 import { WEEK_DAYS } from '../constants/constants';
 import {
   getAllDaysInMonth,
-  getAvailableDaysAfterCurrentDate,
-  getAvailableDaysBeforeCurrentDate,
+  getDaysAndEmptyDaysUntilMaxDate,
   getFirstDayOfMonth,
+  getFirstEmptyAndDisabledDays,
   getStateDay,
   groupDaysByWeeks,
-  handleKeyDownAndRightMove,
+  handleKeyDownMove,
+  handleKeyLeftMove,
+  handleKeyPageDownMove,
+  handleKeyPageUpMove,
+  handleKeyRightMove,
   handleKeyTabMove,
-  handleKeyUpAndLeftMove,
+  handleKeyUpMove,
 } from '../utils/';
 // styles
 import {
@@ -51,18 +55,16 @@ export const List = ({
   const [ghostDateSelected, setGhostDateSelected] = React.useState<Date | 0>(0);
 
   const handleKeyMoveConfig = {
-    emptyDaysList,
     dayList,
-    isAfter: dateHelpers.isAfter,
     maxDate: props.maxDate,
     currentDate: props.currentDate,
     minDate: props.minDate,
-    availableDaysBeforeCurrentDate: getAvailableDaysBeforeCurrentDate(
+    firstEmptyAndDisabledDays: getFirstEmptyAndDisabledDays(
       emptyDaysList,
       props.minDate,
       props.currentDate
     ),
-    availableDaysAfterCurrentDate: getAvailableDaysAfterCurrentDate(
+    daysAndEmptyDaysUntilMaxDate: getDaysAndEmptyDaysUntilMaxDate(
       emptyDaysList,
       props.maxDate,
       props.currentDate
@@ -73,11 +75,13 @@ export const List = ({
     () => ({
       calendarBlankDaysSize: emptyDaysList.length,
       size: dayList.length,
-      keyDownMove: handleKeyDownAndRightMove(handleKeyMoveConfig),
-      keyUpMove: handleKeyUpAndLeftMove(handleKeyMoveConfig),
-      keyRightMove: handleKeyDownAndRightMove(handleKeyMoveConfig),
-      keyLeftMove: handleKeyUpAndLeftMove(handleKeyMoveConfig),
+      keyDownMove: handleKeyDownMove(handleKeyMoveConfig),
+      keyUpMove: handleKeyUpMove(handleKeyMoveConfig),
+      keyRightMove: handleKeyRightMove(handleKeyMoveConfig),
+      keyLeftMove: handleKeyLeftMove(handleKeyMoveConfig),
       keyTabMove: handleKeyTabMove,
+      keyPageDownMove: handleKeyPageDownMove(handleKeyMoveConfig),
+      keyPageUpMove: handleKeyPageUpMove(handleKeyMoveConfig),
       currentFocusSelected:
         (selectedDate[0] ? selectedDate[0].getDate() : new Date().getDate()) +
         emptyDaysList.length -

src/components/calendar/selector/monthSelector/__tests__/monthSelector.test.tsx

@@ -7,12 +7,13 @@ import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
 
 import { MonthSelector } from '../monthSelector';
-import { keyLeftMove, keyRightMove, keyTabMove } from '../utils';
 
 window.matchMedia = windowMatchMedia();
 
 const mockProps = {
   currentDate: new Date(2022, 11, 17),
+  minDate: new Date(2023, 0, 1),
+  maxDate: new Date(2023, 0, 31),
   setCurrentDate: jest.fn(),
   today: new Date(),
 };
@@ -36,33 +37,4 @@ describe('MonthSelector', () => {
 
     expect(setCurrentDate).toHaveBeenCalled();
   });
-  it('MonthSelector utils - left key pressed should be move to a previous position', () => {
-    const result = keyLeftMove(5);
-
-    expect(result).toBe(4);
-  });
-
-  it('MonthSelector utils - left key pressed should be move to the end', () => {
-    const result = keyLeftMove(0);
-
-    expect(result).toBe(new Date().getMonth());
-  });
-
-  it('MonthSelector utils - right key pressed should be move to a next position', () => {
-    const result = keyRightMove(5)(6);
-
-    expect(result).toBe(6);
-  });
-
-  it('MonthSelector utils - right key pressed should be move to the start', () => {
-    const result = keyRightMove(12)(12);
-
-    expect(result).toBe(0);
-  });
-
-  it('MonthSelector utils - tab key pressed should be move outside month list', () => {
-    const result = keyTabMove(5);
-
-    expect(result).toBe(5);
-  });
 });

src/components/calendar/selector/monthSelector/monthSelector.tsx

@@ -12,22 +12,28 @@ import { setMonth } from '../../utils/setMonth';
 import { MonthElementStyled, MonthListStyled, MonthSelectorStyled } from './monthSelector.styled';
 import { IMonthSelector } from './types/monthSelector';
 import { MonthSelectorStateType } from './types/state';
-import { keyLeftMove, keyRightMove, keyTabMove } from './utils';
+import { keyDownMove, keyLeftMove, keyRightMove, keyTabMove, keyUpMove } from './utils';
 
 export const MonthSelector = (props: IMonthSelector): JSX.Element => {
   const { dateHelpers, transformDate } = useUtilsProvider();
 
+  const handleKeyMoveConfig = {
+    currentDate: props.currentDate,
+    maxDate: props.maxDate,
+    minDate: props.minDate,
+  };
+
   const roveFocusProps = React.useMemo(
     () => ({
       size: dateHelpers.getAllMonthName('long').length,
-      keyLeftMove,
-      keyRightMove: keyRightMove(new Date().getMonth()),
+      keyLeftMove: keyLeftMove(handleKeyMoveConfig),
+      keyRightMove: keyRightMove(handleKeyMoveConfig),
+      keyUpMove: keyUpMove(handleKeyMoveConfig),
+      keyDownMove: keyDownMove(handleKeyMoveConfig),
+      keyTabMove,
       currentFocusSelected: props.currentDate
         ? props.currentDate.getMonth()
         : new Date().getMonth(),
-      keyUpMove: 0,
-      keyDownMove: 0,
-      keyTabMove,
     }),
     [dateHelpers.getAllMonthName('long').length, props.currentDate]
   );
@@ -65,6 +71,7 @@ export const MonthSelector = (props: IMonthSelector): JSX.Element => {
           <MonthListStyled
             key={index}
             $disabled={setDisabledMonths(index)}
+            aria-selected={state === MonthSelectorStateType.SELECTED ? true : undefined}
             state={state}
             styles={props.styles}
           >

src/components/calendar/selector/monthSelector/types/monthSelector.ts

@@ -1,8 +1,8 @@
 import { CalendarContainerStylesType } from '@/components/calendar/types/calendarTheme';
 
 export interface IMonthSelector {
-  minDate?: Date;
-  maxDate?: Date;
+  minDate: Date;
+  maxDate: Date;
   currentDate: Date;
   setCurrentDate: (date) => void;
   onMonthClick?: (value?: string) => void;