fix calender weekday with custom styles

Author: atarek12

src/calendar.tsx

@@ -482,8 +482,8 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
           key="W"
           className={`react-datepicker__day-name ${disabled ? "react-datepicker__day-name--disabled" : ""}`}
           role="columnheader"
+          aria-label="Week number"
         >
-          <span className="react-datepicker__sr-only">Week number</span>
           <span aria-hidden="true">{this.props.weekLabel || "#"}</span>
         </div>,
       );
@@ -501,15 +501,13 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
           <div
             key={offset}
             role="columnheader"
+            aria-label={formatDate(day, "EEEE", this.props.locale)}
             className={clsx(
               "react-datepicker__day-name",
               weekDayClassName,
               disabled ? "react-datepicker__day-name--disabled" : "",
             )}
           >
-            <span className="react-datepicker__sr-only">
-              {formatDate(day, "EEEE", this.props.locale)}
-            </span>
             <span aria-hidden="true">{weekDayName}</span>
           </div>
         );

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],
+      );
     });
   });
 

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(<DatePicker />);
       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(<DatePicker showWeekNumbers />);
       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("#");