Improve calendar and inputDate

Add aria label props and improve the monthSelector functionalitie

Author: Kubit

src/components/calendar/selector/monthSelector/utils/monthSelector.test.ts

@@ -52,6 +52,20 @@ describe('Month Selector utils', () => {
     const result2 = keyLeftFunction(previous2);
     expect(result2).toBe(previous2 - 1);
   });
+  it('keyLeftMove - maxDate and minDate in same year - should move to the left when left arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 4, 15);
+
+    const keyLeftFunction = keyLeftMove({ currentDate, maxDate, minDate });
+
+    const previous1 = minDate.getMonth();
+    const previous2 = minDate.getMonth() + 1;
+    const result1 = keyLeftFunction(previous1);
+    expect(result1).toBe(maxDate.getMonth());
+    const result2 = keyLeftFunction(previous2);
+    expect(result2).toBe(previous2 - 1);
+  });
   it('keyRightMove - maxDate and currentDate in same year - should move to the right when right arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
@@ -94,6 +108,21 @@ describe('Month Selector utils', () => {
     const result2 = keyRightFunction(previous2);
     expect(result2).toBe(previous2 + 1);
   });
+
+  it('keyRightMove - maxDate and minDate in same year - should move to the right when right arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 4, 15);
+
+    const keyRightFunction = keyRightMove({ currentDate, maxDate, minDate });
+
+    const previous1 = maxDate.getMonth();
+    const previous2 = maxDate.getMonth() - 1;
+    const result1 = keyRightFunction(previous1);
+    expect(result1).toBe(minDate.getMonth());
+    const result2 = keyRightFunction(previous2);
+    expect(result2).toBe(previous2 + 1);
+  });
   it('keyUpMove - maxDate and currentDate in same year - should move up when up arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
@@ -145,7 +174,24 @@ describe('Month Selector utils', () => {
     const result3 = keyUpFunction(previous3);
     expect(result3).toBe(firstMonth);
   });
-  it('keyDownMove - maxDate and currentDate in same year - should move up when up arrow key is pressed', () => {
+  it('keyUpMove - maxDate and minDate in same year - should move up when up arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 0, 15);
+
+    const keyUpFunction = keyUpMove({ currentDate, maxDate, minDate });
+
+    const previous1 = minDate.getMonth();
+    const previous2 = minDate.getMonth() + 3;
+    const previous3 = minDate.getMonth() + 2;
+    const result1 = keyUpFunction(previous1);
+    expect(result1).toBe(maxDate.getMonth());
+    const result2 = keyUpFunction(previous2);
+    expect(result2).toBe(previous2 - 3);
+    const result3 = keyUpFunction(previous3);
+    expect(result3).toBe(minDate.getMonth());
+  });
+  it('keyDownMove - maxDate and currentDate in same year - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2023, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2000, 0, 15);
@@ -162,7 +208,7 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(maxDate.getMonth());
   });
-  it('keyDownMove - minDate and currentDate in same year - should move up when up arrow key is pressed', () => {
+  it('keyDownMove - minDate and currentDate in same year - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2025, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2023, 0, 15);
@@ -179,7 +225,7 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(previous3 + 3);
   });
-  it('keyDownMove - currentDate year is different than minDate and maxDate - should move up when up arrow key is pressed', () => {
+  it('keyDownMove - currentDate year is different than minDate and maxDate - should move down when down arrow key is pressed', () => {
     const maxDate = new Date(2025, 8, 15);
     const currentDate = new Date(2023, 8, 22);
     const minDate = new Date(2000, 0, 15);
@@ -196,6 +242,23 @@ describe('Month Selector utils', () => {
     const result3 = keyDownFunction(previous3);
     expect(result3).toBe(previous3 + 3);
   });
+  it('keyDownMove - maxDate and minDate in same year - should move down when down arrow key is pressed', () => {
+    const maxDate = new Date(2023, 8, 15);
+    const currentDate = new Date(2023, 8, 22);
+    const minDate = new Date(2023, 0, 15);
+
+    const keyDownFunction = keyDownMove({ currentDate, maxDate, minDate });
+
+    const previous1 = maxDate.getMonth();
+    const previous2 = 1;
+    const previous3 = maxDate.getMonth() + 3;
+    const result1 = keyDownFunction(previous1);
+    expect(result1).toBe(firstMonth);
+    const result2 = keyDownFunction(previous2);
+    expect(result2).toBe(previous2 + 3);
+    const result3 = keyDownFunction(previous3);
+    expect(result3).toBe(maxDate.getMonth());
+  });
   it('keyTabMove - should return previous', () => {
     const previous = 5;
     const result = keyTabMove(previous);

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

@@ -18,6 +18,9 @@ export const keyLeftMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      return previous === minDate.getMonth() ? maxDate.getMonth() : previous - 1;
+    }
     if (isSameYear(maxDate, currentDate)) {
       return previous === FIRST_MONTH ? maxDate.getMonth() : previous - 1;
     }
@@ -34,6 +37,9 @@ export const keyRightMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      return previous === maxDate.getMonth() ? minDate.getMonth() : previous + 1;
+    }
     if (isSameYear(maxDate, currentDate)) {
       return previous === maxDate.getMonth() ? FIRST_MONTH : previous + 1;
     }
@@ -50,6 +56,14 @@ export const keyUpMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      if (previous === minDate.getMonth()) {
+        return maxDate.getMonth();
+      }
+      return previous <= minDate.getMonth() + NUM_DAYS_IN_ROW
+        ? minDate.getMonth()
+        : previous - NUM_DAYS_IN_ROW;
+    }
     if (isSameYear(minDate, currentDate)) {
       if (previous === minDate.getMonth()) {
         return LAST_MONTH;
@@ -77,6 +91,14 @@ export const keyDownMove = ({
   minDate,
 }: HandleKeyMoveType): ((previous: number) => number) => {
   return previous => {
+    if (isSameYear(maxDate, minDate)) {
+      if (previous === maxDate.getMonth()) {
+        return minDate.getMonth();
+      }
+      return previous >= maxDate.getMonth() - NUM_DAYS_IN_ROW
+        ? maxDate.getMonth()
+        : previous + NUM_DAYS_IN_ROW;
+    }
     if (isSameYear(minDate, currentDate)) {
       if (previous === LAST_MONTH) {
         return minDate.getMonth();

src/components/inputDate/components/popoverCalendar.tsx

@@ -46,6 +46,7 @@ const PopoverCalendarComponent = (
   return (
     <Popover
       hasBackDrop
+      aria-label={props.configAccesibility?.calendarAriaLabel}
       aria-modal={props.calendarOpen}
       component={PopoverComponentType.DIV}
       dataTestId={`${props.dataTestId}Popover`}

src/components/inputDate/inputDateStandAlone.tsx

@@ -15,14 +15,16 @@ export const InputDateStandAloneComponent = (
 ): React.JSX.Element => {
   const uniqueId = useId('inputDate');
   const inputId = props.id ?? uniqueId;
-  const ariaControls = props.calendarOpen ? `${uniqueId}Calendar` : undefined;
+  const ariaControls = props.calendarOpen ? `${inputId}Calendar` : undefined;
   const { onWrapperBlur, ...innerInputProps } = props;
 
   return (
     <InputDateStyled data-testid={`${props.dataTestId}InputDate`} onBlur={onWrapperBlur}>
       <Input
         {...innerInputProps}
         ref={ref}
+        aria-controls={ariaControls}
+        aria-expanded={props.calendarOpen}
         icon={{
           ...props.icon,
           altText: props.calendarOpen

src/components/inputDate/stories/inputDate.stories.tsx

@@ -53,8 +53,8 @@ const commonArgs: IInputDate = {
   format: 'DD-MM-YYYY',
   placeholder: 'Date',
   locale: 'en-EN',
-  maxDate: formatDateToUTC(new Date('2025-09-15')),
-  minDate: formatDateToUTC(new Date('2012-07-05')),
+  maxDate: formatDateToUTC(new Date('2024-09-15')),
+  minDate: formatDateToUTC(new Date('2024-03-05')),
   // initialDate: new Date('2024-07-10'),
   // initialSecondDate: new Date('05-01-2000'),
   defaultDate: new Date(),

src/components/inputDate/types/inputDate.ts

@@ -31,6 +31,7 @@ export type InputDateTextType = Omit<IText<string>, 'children'> & {
 export interface IConfigAccesibilityPopover extends IConfigAccesibility {
   openInputIconAriaLabel?: string;
   closeInputIconAriaLabel?: string;
+  calendarAriaLabel?: string;
 }
 
 export interface IPopoverCalendar {