From 81e9c6f02d7a536c0f727305588a21de742ff67a Mon Sep 17 00:00:00 2001
From: balajis-qb <balaji.s@qburst.com>
Date: Wed, 20 Aug 2025 11:46:40 +0530
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20Add=20scoped=20.react-datepicker=5F?=
 =?UTF-8?q?=5Fsr-only=20utility=20class=20for=20screen=20reader=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add scoped class to avoid conflicts with other components
---
 src/calendar.tsx                  |  4 ++--
 src/stylesheets/datepicker.scss   |  2 +-
 src/test/calendar_test.test.tsx   |  2 +-
 src/test/datepicker_test.test.tsx | 10 ++++++----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/calendar.tsx b/src/calendar.tsx
index c667c9e39..b30a6911c 100644
--- a/src/calendar.tsx
+++ b/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>
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
index 659f5de4e..66aa6a68f 100644
--- a/src/stylesheets/datepicker.scss
+++ b/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;
diff --git a/src/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx
index a4ef50189..7cd3f9db1 100644
--- a/src/test/calendar_test.test.tsx
+++ b/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) => {
diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index d44a3607b..efbe0ef95 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 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");