Merge pull request #5291 from qburst/issue-5280/fix/week-number-accessibility

♿️ Fix #5280: Disable the WeekNumber if all the corresponding week days are disabled

Author: martijnrusschen

docs/week_number.md

@@ -16,3 +16,4 @@
 | `showWeekNumber`             |      |               |             |
 | `showWeekPicker`             |      |               |             |
 | `weekNumber` (required)      |      |               |             |
+| `isWeekDisabled`             |      |               |             |

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(

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}
         />,

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(): React.ReactElement {
     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),
     };