From 03134ef8b7ce0020d25fdf96364744eca63c7782 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Sun, 2 Nov 2025 22:35:07 +0200 Subject: [PATCH 1/2] fix calender weekday with custom styles --- src/calendar.tsx | 6 ++---- src/test/calendar_test.test.tsx | 6 ++++-- src/test/datepicker_test.test.tsx | 25 ++++++++++++------------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/calendar.tsx b/src/calendar.tsx index e04158010..94fafe234 100644 --- a/src/calendar.tsx +++ b/src/calendar.tsx @@ -482,8 +482,8 @@ export default class Calendar extends Component { key="W" className={`react-datepicker__day-name ${disabled ? "react-datepicker__day-name--disabled" : ""}`} role="columnheader" + aria-label="Week number" > - Week number , ); @@ -501,15 +501,13 @@ export default class Calendar extends Component {
- - {formatDate(day, "EEEE", this.props.locale)} -
); diff --git a/src/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx index 7cd3f9db1..a4cafd6b2 100644 --- a/src/test/calendar_test.test.tsx +++ b/src/test/calendar_test.test.tsx @@ -2244,11 +2244,13 @@ describe("Calendar", () => { const header = container.querySelector(".react-datepicker__header"); const dayNameElements = header?.querySelectorAll( - ".react-datepicker__day-name > span.react-datepicker__sr-only", + ".react-datepicker__day-name", ); dayNameElements?.forEach((element, index) => { - expect(element.textContent).toBe(expectedAriaLabels[index]); + expect(element.getAttribute("aria-label")).toBe( + expectedAriaLabels[index], + ); }); }); diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 658d57a35..1d8ae5626 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -3812,7 +3812,7 @@ describe("DatePicker", () => { }); describe("Calendar Header Accessibility", () => { - it("renders day names with react-datepicker__sr-only full weekday and visible short name", () => { + it("renders day names with aria-label full weekday and visible short name", () => { const { container } = render(); const input = safeQuerySelector(container, "input"); fireEvent.focus(input); @@ -3823,19 +3823,18 @@ describe("DatePicker", () => { expect(headers.length).toBe(7); headers.forEach((header) => { - // Should have a visually hidden span with the full weekday name - const srOnly = header.querySelector(".react-datepicker__sr-only"); - expect(srOnly).toBeTruthy(); - expect(srOnly?.textContent?.length).toBeGreaterThan(2); + // Should have an aria-label with the full weekday name + const ariaLabel = header?.getAttribute('aria-label'); + expect(ariaLabel?.length).toBeGreaterThan(2); // Should have a visible short name - const visible = header.querySelector('span[aria-hidden="true"]'); + const visible = header.querySelector('.react-datepicker__day-name > span[aria-hidden="true"]'); expect(visible).toBeTruthy(); expect(visible?.textContent?.length).toBeLessThanOrEqual(3); }); }); - it("renders week number column header with react-datepicker__sr-only label and visible #", () => { + it("renders week number column header with aria-label and visible #", () => { const { container } = render(); const input = safeQuerySelector(container, "input"); fireEvent.focus(input); @@ -3846,15 +3845,15 @@ describe("DatePicker", () => { expect(headers.length).toBe(8); const weekNumberHeader = headers[0] as Element; - const srOnly = weekNumberHeader.querySelector( - ".react-datepicker__sr-only", - ); - expect(srOnly).toBeTruthy(); - expect(srOnly?.textContent?.trim()?.toLowerCase()).toEqual("week number"); + expect(weekNumberHeader).toBeTruthy(); + + // Should have aria-label = "Week number" + const ariaLabel = weekNumberHeader?.getAttribute('aria-label'); + expect(ariaLabel?.trim()?.toLowerCase()).toEqual("week number"); // Should have a visible short name const visible = weekNumberHeader.querySelector( - 'span[aria-hidden="true"]', + '.react-datepicker__day-name > span[aria-hidden="true"]', ); expect(visible).toBeTruthy(); expect(visible?.textContent?.trim()?.toLowerCase()).toEqual("#"); From 87814d9a11dfb03be6212cd96875296884cffaed Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Mon, 3 Nov 2025 10:01:56 +0200 Subject: [PATCH 2/2] run prettier --- src/test/datepicker_test.test.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 1d8ae5626..150e9ec4d 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -3824,11 +3824,13 @@ describe("DatePicker", () => { headers.forEach((header) => { // Should have an aria-label with the full weekday name - const ariaLabel = header?.getAttribute('aria-label'); + const ariaLabel = header?.getAttribute("aria-label"); expect(ariaLabel?.length).toBeGreaterThan(2); // Should have a visible short name - const visible = header.querySelector('.react-datepicker__day-name > span[aria-hidden="true"]'); + const visible = header.querySelector( + '.react-datepicker__day-name > span[aria-hidden="true"]', + ); expect(visible).toBeTruthy(); expect(visible?.textContent?.length).toBeLessThanOrEqual(3); }); @@ -3848,7 +3850,7 @@ describe("DatePicker", () => { expect(weekNumberHeader).toBeTruthy(); // Should have aria-label = "Week number" - const ariaLabel = weekNumberHeader?.getAttribute('aria-label'); + const ariaLabel = weekNumberHeader?.getAttribute("aria-label"); expect(ariaLabel?.trim()?.toLowerCase()).toEqual("week number"); // Should have a visible short name