Repository: Hacker0x01/react-datepicker (ts)

Issue:
Week number buttons accessibility issue
**Describe the bug**
When using a datepicker with both `showWeekPicker` and `showWeekNumbers` enabled, the week number buttons remain interactive (clickable) even if the corresponding weeks are disabled due to `excludeDateIntervals` or `filterDate` conditions (days are disabled). This leads to unexpected behavior where users can click on weeks that should not be accessible (week doesn't change, datepicker just closing). All week buttons have `react-datepicker__week-number react-datepicker__week-number--clickable` class name.

**To Reproduce**
Steps to reproduce the behavior:

```
showWeekNumbers
showWeekPicker
excludeDateIntervals={[
  {
     start: moment().subtract(15, 'days').toDate(),
     end: moment().subtract(1, 'days').toDate(),
   },
]}
filterDate={isTimeInTheFuture}
```

**Expected behavior**
Week number buttons should be disabled.

**Screenshots**
![Screenshot 2024-12-16 at 12 49 33](https://github.com/user-attachments/assets/94c0294f-9297-463b-8789-d51c8830d3a2)


Pull request:
♿️ Fix #5280: Disable the WeekNumber if all the corresponding week days are disabled
Closes #5280

## Description
As mentioned in the linked ticket, we have an accessibility issue with the weekNumber of week-picker.  The week number hover stye is active for the numbers which don't have any week days enabled.  So, in this PR I removed the hover style of the week number if all the corresponding week days of the week number are disabled and also added a test cases for it.

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/docs/week_number.md b/docs/week_number.md
index 55ba540c..65af5d5c 100644
--- a/docs/week_number.md
+++ b/docs/week_number.md
@@ -16,3 +16,4 @@
 | `showWeekNumber`             |      |               |             |
 | `showWeekPicker`             |      |               |             |
 | `weekNumber` (required)      |      |               |             |
+| `isWeekDisabled`             |      |               |             |
diff --git a/src/week.tsx b/src/week.tsx
index 0027d557..49a76438 100644
--- a/src/week.tsx
+++ b/src/week.tsx
@@ -113,6 +113,20 @@ export default class Week extends Component<WeekProps> {
     return getWeek(date);
   };
 
+  isWeekDisabled = (): boolean => {
+    const startOfWeek = this.startOfWeek();
+    const endOfWeek = addDays(startOfWeek, 6);
+
+    let processingDate = new Date(startOfWeek);
+    while (processingDate <= endOfWeek) {
+      if (!this.isDisabled(processingDate)) return false;
+
+      processingDate = addDays(processingDate, 1);
+    }
+
+    return true;
+  };
+
   renderDays = () => {
     const startOfWeek = this.startOfWeek();
     const days = [];
@@ -128,6 +142,7 @@ export default class Week extends Component<WeekProps> {
           {...Week.defaultProps}
           {...this.props}
           weekNumber={weekNumber}
+          isWeekDisabled={this.isWeekDisabled()}
           date={startOfWeek}
           onClick={onClickAction}
         />,
diff --git a/src/week_number.tsx b/src/week_number.tsx
index e244916e..380afaa2 100644
--- a/src/week_number.tsx
+++ b/src/week_number.tsx
@@ -18,6 +18,7 @@ interface WeekNumberProps {
   handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   containerRef?: React.RefObject<HTMLDivElement>;
   isInputFocused?: boolean;
+  isWeekDisabled?: boolean;
 }
 
 export default class WeekNumber extends Component<WeekNumberProps> {
@@ -111,13 +112,14 @@ export default class WeekNumber extends Component<WeekNumberProps> {
   render(): JSX.Element {
     const {
       weekNumber,
+      isWeekDisabled,
       ariaLabelPrefix = WeekNumber.defaultProps.ariaLabelPrefix,
       onClick,
     } = this.props;
 
     const weekNumberClasses = {
       "react-datepicker__week-number": true,
-      "react-datepicker__week-number--clickable": !!onClick,
+      "react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled,
       "react-datepicker__week-number--selected":
         !!onClick && isSameDay(this.props.date, this.props.selected),
     };


Test patch:
diff --git a/src/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx
index 8345ecbc..7019c7da 100644
--- a/src/test/week_number_test.test.tsx
+++ b/src/test/week_number_test.test.tsx
@@ -285,6 +285,44 @@ describe("WeekNumber", () => {
         ).toBe(true);
       });
 
+      it("shouldn't have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is true", () => {
+        const { container } = render(
+          <WeekNumber
+            weekNumber={1}
+            date={new Date()}
+            onClick={() => {}}
+            isWeekDisabled
+          />,
+        );
+        const weekNumber = container.querySelector(
+          ".react-datepicker__week-number",
+        );
+        expect(
+          weekNumber?.classList.contains(
+            "react-datepicker__week-number--clickable",
+          ),
+        ).toBe(false);
+      });
+
+      it("should have the class 'react-datepicker__week-number--clickable' if isWeekDisabled is false and onClick is defined", () => {
+        const { container } = render(
+          <WeekNumber
+            weekNumber={1}
+            date={new Date()}
+            onClick={() => {}}
+            isWeekDisabled={false}
+          />,
+        );
+        const weekNumber = container.querySelector(
+          ".react-datepicker__week-number",
+        );
+        expect(
+          weekNumber?.classList.contains(
+            "react-datepicker__week-number--clickable",
+          ),
+        ).toBe(true);
+      });
+
       it("should have the class 'react-datepicker__week-number--selected' if selected is current week and preselected is also current week and has the onClick Props", () => {
         const currentWeekNumber = newDate("2023-10-22T13:09:53+02:00");
         const { container } = render(