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");