Merge pull request #5813 from qburst/issue-5794/sr-only

♿ Add scoped .react-datepicker__sr-only utility class for accessibility

Author: martijnrusschen

src/calendar.tsx

@@ -478,7 +478,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     if (this.props.showWeekNumbers) {
       dayNames.push(
         <div key="W" className="react-datepicker__day-name" role="columnheader">
-          <span className="sr-only">Week number</span>
+          <span className="react-datepicker__sr-only">Week number</span>
           <span aria-hidden="true">{this.props.weekLabel || "#"}</span>
         </div>,
       );
@@ -498,7 +498,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
             role="columnheader"
             className={clsx("react-datepicker__day-name", weekDayClassName)}
           >
-            <span className="sr-only">
+            <span className="react-datepicker__sr-only">
               {formatDate(day, "EEEE", this.props.locale)}
             </span>
             <span aria-hidden="true">{weekDayName}</span>

src/stylesheets/datepicker.scss

@@ -3,7 +3,7 @@
 @use "mixins" as *;
 
 /* sr-only utility class for accessibility */
-.sr-only {
+.react-datepicker__sr-only {
   position: absolute;
   width: 1px;
   height: 1px;

src/test/calendar_test.test.tsx

@@ -2244,7 +2244,7 @@ describe("Calendar", () => {
 
     const header = container.querySelector(".react-datepicker__header");
     const dayNameElements = header?.querySelectorAll(
-      ".react-datepicker__day-name > span.sr-only",
+      ".react-datepicker__day-name > span.react-datepicker__sr-only",
     );
 
     dayNameElements?.forEach((element, index) => {

src/test/datepicker_test.test.tsx

@@ -3812,7 +3812,7 @@ describe("DatePicker", () => {
   });
 
   describe("Calendar Header Accessibility", () => {
-    it("renders day names with sr-only 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);
@@ -3824,7 +3824,7 @@ describe("DatePicker", () => {
 
       headers.forEach((header) => {
         // Should have a visually hidden span with the full weekday name
-        const srOnly = header.querySelector(".sr-only");
+        const srOnly = header.querySelector(".react-datepicker__sr-only");
         expect(srOnly).toBeTruthy();
         expect(srOnly?.textContent?.length).toBeGreaterThan(2);
 
@@ -3835,7 +3835,7 @@ describe("DatePicker", () => {
       });
     });
 
-    it("renders week number column header with sr-only 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);
@@ -3846,7 +3846,9 @@ describe("DatePicker", () => {
       expect(headers.length).toBe(8);
 
       const weekNumberHeader = headers[0] as Element;
-      const srOnly = weekNumberHeader.querySelector(".sr-only");
+      const srOnly = weekNumberHeader.querySelector(
+        ".react-datepicker__sr-only",
+      );
       expect(srOnly).toBeTruthy();
       expect(srOnly?.textContent?.trim()?.toLowerCase()).toEqual("week number");