Merge pull request #4319 from qburst/issue-4259/feature/aria-disabled…

…-for-Time-component Fix #4259: Add the aria-disabled on the Time component's disabled time units
Hacker0x01 · Oct 15, 2023 · 733fc27 · 733fc27
2 parents fa6d0c2 + fde2732
commit 733fc27
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/src/time.jsx b/src/time.jsx
@@ -100,6 +100,14 @@ export default class Time extends React.Component {
   isSelectedTime = (time) =>
     this.props.selected && isSameMinute(this.props.selected, time);
 
+  isDisabledTime = (time) =>
+    ((this.props.minTime || this.props.maxTime) &&
+      isTimeInDisabledRange(time, this.props)) ||
+    ((this.props.excludeTimes ||
+      this.props.includeTimes ||
+      this.props.filterTime) &&
+      isTimeDisabled(time, this.props));
+
   liClasses = (time) => {
     let classes = [
       "react-datepicker__time-list-item",
@@ -110,14 +118,7 @@ export default class Time extends React.Component {
       classes.push("react-datepicker__time-list-item--selected");
     }
 
-    if (
-      ((this.props.minTime || this.props.maxTime) &&
-        isTimeInDisabledRange(time, this.props)) ||
-      ((this.props.excludeTimes ||
-        this.props.includeTimes ||
-        this.props.filterTime) &&
-        isTimeDisabled(time, this.props))
-    ) {
+    if (this.isDisabledTime(time)) {
       classes.push("react-datepicker__time-list-item--disabled");
     }
     if (
@@ -216,6 +217,7 @@ export default class Time extends React.Component {
           tabIndex={time === timeToFocus ? 0 : -1}
           role="option"
           aria-selected={this.isSelectedTime(time) ? "true" : undefined}
+          aria-disabled={this.isDisabledTime(time) ? "true" : undefined}
         >
           {formatDate(time, format, this.props.locale)}
         </li>

diff --git a/test/exclude_times_test.test.js b/test/exclude_times_test.test.js
@@ -24,5 +24,10 @@ describe("DatePicker", () => {
       ".react-datepicker__time-list-item--disabled",
     );
     expect(disabledTimeItems.length).toBe(4);
+
+    const allDisabledTimeItemsHaveAriaDisabled = Array.from(
+      disabledTimeItems,
+    ).every((time) => time.getAttribute("aria-disabled") === "true");
+    expect(allDisabledTimeItemsHaveAriaDisabled).toBe(true);
   });
 });
diff --git a/test/filter_times_test.test.js b/test/filter_times_test.test.js
@@ -1,16 +1,22 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 import { getHours } from "../src/date_utils";
 import TimeComponent from "../src/time";
 
 describe("TimeComponent", () => {
   it("should disable times matched by filterTime prop", () => {
-    const timeComponent = mount(
+    const { container: timeComponent } = render(
       <TimeComponent filterTime={(time) => getHours(time) !== 17} />,
     );
 
-    expect(
-      timeComponent.find(".react-datepicker__time-list-item--disabled"),
-    ).toHaveLength(2);
+    const disabledTimeItems = timeComponent.querySelectorAll(
+      ".react-datepicker__time-list-item--disabled",
+    );
+    expect(disabledTimeItems.length).toBe(2);
+
+    const allDisabledTimeItemsHaveAriaDisabled = Array.from(
+      disabledTimeItems,
+    ).every((time) => time.getAttribute("aria-disabled") === "true");
+    expect(allDisabledTimeItemsHaveAriaDisabled).toBe(true);
   });
 });
diff --git a/test/include_times_test.test.js b/test/include_times_test.test.js
@@ -1,12 +1,12 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 import * as utils from "../src/date_utils";
 import TimeComponent from "../src/time";
 
 describe("TimeComponent", () => {
   it("should only enable times specified in includeTimes props", () => {
     const today = utils.getStartOfDay(utils.newDate());
-    const timeComponent = mount(
+    const { container: timeComponent } = render(
       <TimeComponent
         includeTimes={[
           utils.addMinutes(today, 60),
@@ -16,9 +16,14 @@ describe("TimeComponent", () => {
       />,
     );
 
-    const disabledItems = timeComponent.find(
+    const disabledTimeItems = timeComponent.querySelectorAll(
       ".react-datepicker__time-list-item--disabled",
     );
-    expect(disabledItems).toHaveLength(45);
+    expect(disabledTimeItems.length).toBe(45);
+
+    const allDisabledTimeItemsHaveAriaDisabled = Array.from(
+      disabledTimeItems,
+    ).every((time) => time.getAttribute("aria-disabled") === "true");
+    expect(allDisabledTimeItemsHaveAriaDisabled).toBe(true);
   });
 });