Merge pull request #3787 from gcoayla/portal-tab-loop

fix: fix accessibility issues adding tab loop to datepicker with portal

Author: martijnrusschen

src/index.jsx

@@ -41,6 +41,7 @@ import {
   DEFAULT_YEAR_ITEM_NUMBER,
   isSameDay,
 } from "./date_utils";
+import TabLoop from "./tab_loop";
 import onClickOutside from "react-onclickoutside";
 
 export { default as CalendarContainer } from "./calendar_container";
@@ -709,7 +710,6 @@ export default class DatePicker extends React.Component {
         }
       } else if (eventKey === "Escape") {
         event.preventDefault();
-
         this.setOpen(false);
       }
 
@@ -719,6 +719,25 @@ export default class DatePicker extends React.Component {
     }
   };
 
+  onPortalKeyDown = (event) => {
+    const eventKey = event.key;
+    if (eventKey === "Escape") {
+      event.preventDefault();
+      this.setState(
+        {
+          preventFocus: true,
+        },
+        () => {
+          this.setOpen(false);
+          setTimeout(() => {
+            this.setFocus();
+            this.setState({ preventFocus: false });
+          });
+        }
+      );
+    }
+  };
+
   // keyDown events passed down to day.jsx
   onDayKeyDown = (event) => {
     this.props.onKeyDown(event);
@@ -1071,7 +1090,15 @@ export default class DatePicker extends React.Component {
 
     if (this.props.withPortal) {
       let portalContainer = this.state.open ? (
-        <div className="react-datepicker__portal">{calendar}</div>
+        <TabLoop enableTabLoop={this.props.enableTabLoop}>
+          <div
+            className="react-datepicker__portal"
+            tabIndex={-1}
+            onKeyDown={this.onPortalKeyDown}
+          >
+            {calendar}
+          </div>
+        </TabLoop>
       ) : null;
 
       if (this.state.open && this.props.portalId) {

test/datepicker_test.js

@@ -583,6 +583,33 @@ describe("DatePicker", () => {
     expect(datePicker.calendar).to.exist;
   });
 
+  it("should render Calendar in portal when withPortal is set and should close on Escape key when focus is on header", () => {
+    var datePicker = TestUtils.renderIntoDocument(
+      <DatePicker withPortal portalId="portal-id-dom-test" />
+    );
+    var dateInput = datePicker.input;
+    TestUtils.Simulate.focus(ReactDOM.findDOMNode(dateInput));
+
+    expect(function () {
+      TestUtils.findRenderedDOMComponentWithClass(
+        datePicker,
+        "react-datepicker__portal"
+      );
+    }).to.not.throw();
+    expect(datePicker.calendar).to.exist;
+
+    var header = TestUtils.scryRenderedDOMComponentsWithClass(
+      datePicker,
+      "react-datepicker__current-month"
+    )[0];
+
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(header));
+
+    TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(header), getKey("Escape"));
+
+    expect(datePicker.calendar).to.not.exist;
+  });
+
   it("should not render Calendar when withPortal is set and no focus is given to input", () => {
     var datePicker = TestUtils.renderIntoDocument(<DatePicker withPortal />);