diff --git a/src/calendar.tsx b/src/calendar.tsx index 6194b0ffe..9000acdaf 100644 --- a/src/calendar.tsx +++ b/src/calendar.tsx @@ -163,11 +163,11 @@ type CalendarProps = React.PropsWithChildren< onClickOutside: ClickOutsideHandler; outsideClickIgnoreClass?: string; previousMonthButtonLabel?: React.ReactNode; - previousYearButtonLabel?: string; + previousYearButtonLabel?: React.ReactNode; previousMonthAriaLabel?: string; previousYearAriaLabel?: string; nextMonthButtonLabel?: React.ReactNode; - nextYearButtonLabel?: string; + nextYearButtonLabel?: React.ReactNode; nextMonthAriaLabel?: string; nextYearAriaLabel?: string; showPreviousMonths?: boolean; diff --git a/src/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx index 8d2814668..02c975f69 100644 --- a/src/test/calendar_test.test.tsx +++ b/src/test/calendar_test.test.tsx @@ -403,6 +403,25 @@ describe("Calendar", () => { expect(nextButtonAriaLabel).toBe(nextButtonAriaLabel); }); + it("should render by default aria labels for next and prev months buttons when providing a react node", () => { + const previousMonthButtonLabel = Custom react previous month; + const nextMonthButtonLabel = Custom react next month; + const { calendar } = getCalendar({ + previousMonthButtonLabel, + nextMonthButtonLabel, + }); + + const previousButtonAriaLabel = calendar + .querySelector(".react-datepicker__navigation--previous") + ?.getAttribute("aria-label"); + const nextButtonAriaLabel = calendar + .querySelector(".react-datepicker__navigation--next") + ?.getAttribute("aria-label"); + + expect(previousButtonAriaLabel).toBe("Previous Month"); + expect(nextButtonAriaLabel).toBe("Next Month"); + }); + it("should render the correct default aria labels for next and prev year buttons", () => { const { calendar } = getCalendar({ showYearPicker: true }); const previousButtonAriaLabel = calendar @@ -458,6 +477,26 @@ describe("Calendar", () => { expect(nextButtonAriaLabel).toBe(nextYearAriaLabel); }); + it("should render by default aria labels for next and prev year buttons when providing a react node", () => { + const previousYearButtonLabel = Custom react previous year; + const nextYearButtonLabel = Custom react next year; + const { calendar } = getCalendar({ + showYearPicker: true, + previousYearButtonLabel, + nextYearButtonLabel, + }); + + const previousButtonAriaLabel = calendar + .querySelector(".react-datepicker__navigation--previous") + ?.getAttribute("aria-label"); + const nextButtonAriaLabel = calendar + .querySelector(".react-datepicker__navigation--next") + ?.getAttribute("aria-label"); + + expect(previousButtonAriaLabel).toBe("Previous Year"); + expect(nextButtonAriaLabel).toBe("Next Year"); + }); + it("should not have previous month button when selecting a date in the second month, when min date is specified", () => { const minDate = new Date("2024-11-06"); const maxDate = new Date("2025-01-01");