Merge pull request #4702 from MatteoPieroni/feature/aria-disabled-for…

…-month-component feature: add aria-disabled to Month component
Hacker0x01 · Apr 17, 2024 · bb21fb9 · bb21fb9
2 parents 4f39359 + 356f0d2
commit bb21fb9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/src/month.jsx b/src/month.jsx
@@ -545,31 +545,27 @@ export default class Month extends React.Component {
     }
   };
 
+  isMonthDisabled = (month) => {
+    const { day, minDate, maxDate, excludeDates, includeDates } = this.props;
+    const labelDate = utils.setMonth(day, month);
+    return (
+      (minDate || maxDate || excludeDates || includeDates) &&
+      utils.isMonthDisabled(labelDate, this.props)
+    );
+  };
+
   getMonthClassNames = (m) => {
-    const {
-      day,
-      startDate,
-      endDate,
-      selected,
-      minDate,
-      maxDate,
-      preSelection,
-      monthClassName,
-      excludeDates,
-      includeDates,
-    } = this.props;
+    const { day, startDate, endDate, selected, preSelection, monthClassName } =
+      this.props;
     const _monthClassName = monthClassName
       ? monthClassName(utils.setMonth(day, m))
       : undefined;
-    const labelDate = utils.setMonth(day, m);
     return clsx(
       "react-datepicker__month-text",
       `react-datepicker__month-${m}`,
       _monthClassName,
       {
-        "react-datepicker__month-text--disabled":
-          (minDate || maxDate || excludeDates || includeDates) &&
-          utils.isMonthDisabled(labelDate, this.props),
+        "react-datepicker__month-text--disabled": this.isMonthDisabled(m),
         "react-datepicker__month-text--selected": this.isSelectedMonth(
           day,
           m,
@@ -737,6 +733,7 @@ export default class Month extends React.Component {
             }
             tabIndex={this.getTabIndex(m)}
             className={this.getMonthClassNames(m)}
+            aria-disabled={this.isMonthDisabled(m)}
             role="option"
             aria-label={this.getAriaLabel(m)}
             aria-current={this.isCurrentMonth(day, m) ? "date" : undefined}

diff --git a/test/month_test.test.js b/test/month_test.test.js
@@ -430,7 +430,7 @@ describe("Month", () => {
     expect(utils.getMonth(monthClicked)).toBe(6);
   });
 
-  it("should return disabled class if current date is out of bound of minDate and maxDate", () => {
+  it("should return disabled month if current date is out of bound of minDate and maxDate", () => {
     const onDayClickSpy = jest.fn();
     const onDayMouseEnterSpy = jest.fn();
     const { container } = render(
@@ -449,13 +449,14 @@ describe("Month", () => {
     expect(
       month.classList.contains("react-datepicker__month-text--disabled"),
     ).toBe(true);
+    expect(month.getAttribute("aria-disabled")).toBe("true");
     fireEvent.click(month);
     expect(onDayClickSpy).not.toHaveBeenCalled();
     fireEvent.mouseEnter(month);
     expect(onDayMouseEnterSpy).not.toHaveBeenCalled();
   });
 
-  it("should not return disabled class if current date is before minDate but same month", () => {
+  it("should not return disabled month if current date is before minDate but same month", () => {
     const onDayClickSpy = jest.fn();
     const onDayMouseEnterSpy = jest.fn();
     const { container } = render(
@@ -473,13 +474,14 @@ describe("Month", () => {
     expect(
       month.classList.contains("react-datepicker__month-text--disabled"),
     ).not.toBe(true);
+    expect(month.getAttribute("aria-disabled")).not.toBe("true");
     fireEvent.click(month);
     expect(onDayClickSpy).toHaveBeenCalled();
     fireEvent.mouseEnter(month);
     expect(onDayMouseEnterSpy).toHaveBeenCalled();
   });
 
-  it("should not return disabled class if current date is after maxDate but same month", () => {
+  it("should not return disabled month if current date is after maxDate but same month", () => {
     const onDayClickSpy = jest.fn();
     const onDayMouseEnterSpy = jest.fn();
     const { container } = render(
@@ -497,13 +499,14 @@ describe("Month", () => {
     expect(
       month.classList.contains("react-datepicker__month-text--disabled"),
     ).not.toBe(true);
+    expect(month.getAttribute("aria-disabled")).not.toBe("true");
     fireEvent.click(month);
     expect(onDayClickSpy).toHaveBeenCalled();
     fireEvent.mouseEnter(month);
     expect(onDayMouseEnterSpy).toHaveBeenCalled();
   });
 
-  it("should return disabled class if specified excludeDate", () => {
+  it("should return disabled month if specified excludeDate", () => {
     const onDayClickSpy = jest.fn();
     const onDayMouseEnterSpy = jest.fn();
     const { container } = render(
@@ -530,14 +533,15 @@ describe("Month", () => {
       expect(
         month.classList.contains("react-datepicker__month-text--disabled"),
       ).toBe(true);
+      expect(month.getAttribute("aria-disabled")).toBe("true");
       fireEvent.click(month);
       expect(onDayClickSpy).not.toHaveBeenCalled();
       fireEvent.mouseEnter(month);
       expect(onDayMouseEnterSpy).not.toHaveBeenCalled();
     });
   });
 
-  it("should return disabled class if specified includeDate", () => {
+  it("should return disabled month if specified includeDate", () => {
     const { container } = render(
       <Month
         day={utils.newDate("2015-01-01")}
@@ -566,6 +570,7 @@ describe("Month", () => {
       expect(
         month.classList.contains("react-datepicker__month-text--disabled"),
       ).toBe(true);
+      expect(month.getAttribute("aria-disabled")).toBe("true");
     }
   });