fix: restore sr-only pattern for weekday headers accessibility

The previous change broke axe accessibility tests by using aria-label
instead of the sr-only span pattern. Screen readers need visible text
content in columnheader elements, not just aria-hidden spans.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: martijnrusschen

src/calendar.tsx

@@ -488,8 +488,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>,
       );
@@ -507,13 +507,15 @@ 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

@@ -2297,13 +2297,11 @@ describe("Calendar", () => {
 
     const header = container.querySelector(".react-datepicker__header");
     const dayNameElements = header?.querySelectorAll(
-      ".react-datepicker__day-name",
+      ".react-datepicker__day-name > span.react-datepicker__sr-only",
     );
 
     dayNameElements?.forEach((element, index) => {
-      expect(element.getAttribute("aria-label")).toBe(
-        expectedAriaLabels[index],
-      );
+      expect(element.textContent).toBe(expectedAriaLabels[index]);
     });
   });
 

src/test/datepicker_test.test.tsx

@@ -3829,7 +3829,7 @@ describe("DatePicker", () => {
   });
 
   describe("Calendar Header Accessibility", () => {
-    it("renders day names with aria-label full weekday and visible short name", () => {
+    it("renders day names with react-datepicker__sr-only full weekday and visible short name", () => {
       const { container } = render(<DatePicker />);
       const input = safeQuerySelector(container, "input");
       fireEvent.focus(input);
@@ -3840,20 +3840,19 @@ describe("DatePicker", () => {
       expect(headers.length).toBe(7);
 
       headers.forEach((header) => {
-        // Should have an aria-label with the full weekday name
-        const ariaLabel = header?.getAttribute("aria-label");
-        expect(ariaLabel?.length).toBeGreaterThan(2);
+        // 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 a visible short name
-        const visible = header.querySelector(
-          '.react-datepicker__day-name > span[aria-hidden="true"]',
-        );
+        const visible = header.querySelector('span[aria-hidden="true"]');
         expect(visible).toBeTruthy();
         expect(visible?.textContent?.length).toBeLessThanOrEqual(3);
       });
     });
 
-    it("renders week number column header with aria-label and visible #", () => {
+    it("renders week number column header with react-datepicker__sr-only label and visible #", () => {
       const { container } = render(<DatePicker showWeekNumbers />);
       const input = safeQuerySelector(container, "input");
       fireEvent.focus(input);
@@ -3864,15 +3863,15 @@ describe("DatePicker", () => {
       expect(headers.length).toBe(8);
 
       const weekNumberHeader = headers[0] as Element;
-      expect(weekNumberHeader).toBeTruthy();
-
-      // Should have aria-label = "Week number"
-      const ariaLabel = weekNumberHeader?.getAttribute("aria-label");
-      expect(ariaLabel?.trim()?.toLowerCase()).toEqual("week number");
+      const srOnly = weekNumberHeader.querySelector(
+        ".react-datepicker__sr-only",
+      );
+      expect(srOnly).toBeTruthy();
+      expect(srOnly?.textContent?.trim()?.toLowerCase()).toEqual("week number");
 
       // Should have a visible short name
       const visible = weekNumberHeader.querySelector(
-        '.react-datepicker__day-name > span[aria-hidden="true"]',
+        'span[aria-hidden="true"]',
       );
       expect(visible).toBeTruthy();
       expect(visible?.textContent?.trim()?.toLowerCase()).toEqual("#");