@khanacademy/wonder-blocks-modal 2.1.43 → 2.2.1

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 24);
+/******/ 	return __webpack_require__(__webpack_require__.s = 25);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -477,7 +477,7 @@ const styleSheets = {
 /* harmony import */ var _modal_content_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
 /* harmony import */ var _modal_header_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
 /* harmony import */ var _modal_footer_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
-/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(21);
+/* harmony import */ var _close_button_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(22);
 
 
 
@@ -711,7 +711,7 @@ const styleSheets = {
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _focus_trap_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18);
 /* harmony import */ var _modal_backdrop_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
-/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(20);
+/* harmony import */ var _scroll_disabler_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
 /* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12);
 
 
@@ -1261,6 +1261,7 @@ class FocusTrap extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11);
+/* harmony import */ var _util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(20);
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -1270,11 +1271,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
-/**
- * List of elements that can be focused
- * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
- */
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -1285,17 +1282,24 @@ const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:no
  * and adding an `onClose` prop that will call `onCloseModal`. If an
  * `onClose` prop is already provided, the two are merged.
  */
-
 class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(...args) {
     super(...args);
+    this._mousePressedOutside = false;
+
+    this.handleMouseDown = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      this._mousePressedOutside = e.target === e.currentTarget;
+    };
 
-    this.handleClick = e => {
-      // Was the lowest-level click target (`e.target`) the positioner element
-      // (`e.currentTarget`)?
-      if (e.target === e.currentTarget) {
+    this.handleMouseUp = e => {
+      // Confirm that it is the backdrop that is being clicked, not the child
+      // and that the mouse was pressed in the backdrop first.
+      if (e.target === e.currentTarget && this._mousePressedOutside) {
         this.props.onCloseModal();
       }
+
+      this._mousePressedOutside = false;
     };
   }
 
@@ -1316,11 +1320,10 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       firstFocusableElement.focus();
     }, 0);
   }
+
   /**
    * Returns an element specified by the user
    */
-
-
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -1339,7 +1342,7 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
   _getFirstFocusableElement(node) {
     // get a collection of elements that can be focused
-    const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    const focusableElements = Object(_util_find_focusable_nodes_js__WEBPACK_IMPORTED_MODULE_6__[/* findFocusableNodes */ "a"])(node);
 
     if (!focusableElements) {
       return null;
@@ -1378,7 +1381,8 @@ class ModalBackdrop extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _extends({
       style: styles.modalPositioner,
-      onClick: this.handleClick,
+      onMouseDown: this.handleMouseDown,
+      onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
@@ -1410,6 +1414,21 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return findFocusableNodes; });
+/**
+ * List of elements that can be focused
+ * @see https://www.w3.org/TR/html5/editing.html#can-be-focused
+ */
+const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+function findFocusableNodes(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}
+
+/***/ }),
+/* 21 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
@@ -1504,16 +1523,16 @@ ScrollDisabler.numModalsOpened = 0;
 /* harmony default export */ __webpack_exports__["a"] = (ScrollDisabler);
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CloseButton; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22);
+/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
+/* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
 /* harmony import */ var _khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon_button__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _modal_context_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
 
@@ -1552,19 +1571,19 @@ class CloseButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 }
 
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon");
 
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("@khanacademy/wonder-blocks-icon-button");
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.1.43",
+  "version": "2.2.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -15,24 +15,23 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.25",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.14",
-    "@khanacademy/wonder-blocks-layout": "^1.4.4",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.26",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.28",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.2.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.25",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.3",
+    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.29",
+    "@khanacademy/wonder-blocks-typography": "^1.1.29"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+    "wb-dev-build-settings": "^0.3.0"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -21,8 +21,8 @@ exports[`wonder-blocks-modal example 1 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -116,8 +116,8 @@ exports[`wonder-blocks-modal example 2 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -392,8 +392,8 @@ exports[`wonder-blocks-modal example 4 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -487,8 +487,8 @@ exports[`wonder-blocks-modal example 5 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1387,8 +1387,8 @@ exports[`wonder-blocks-modal example 7 1`] = `
             }
           >
             <button
+              aria-disabled={false}
               className=""
-              disabled={false}
               onBlur={[Function]}
               onClick={[Function]}
               onDragStart={[Function]}
@@ -1996,8 +1996,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
               }
             >
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2070,8 +2070,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
                 </span>
               </button>
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2144,8 +2144,8 @@ exports[`wonder-blocks-modal example 8 1`] = `
                 </span>
               </button>
               <button
+                aria-disabled={false}
                 className=""
-                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onDragStart={[Function]}
@@ -2627,8 +2627,8 @@ exports[`wonder-blocks-modal example 9 1`] = `
                 }
               >
                 <button
+                  aria-disabled={false}
                   className=""
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onDragStart={[Function]}
@@ -2726,8 +2726,8 @@ exports[`wonder-blocks-modal example 9 1`] = `
                   }
                 />
                 <button
+                  aria-disabled={false}
                   className=""
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onDragStart={[Function]}
@@ -3321,8 +3321,8 @@ exports[`wonder-blocks-modal example 10 1`] = `
                     }
                   />
                   <button
+                    aria-disabled={false}
                     className=""
-                    disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
                     onDragStart={[Function]}

package/src/components/__tests__/close-button.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import expectRenderError from "../../../../../utils/testing/expect-render-error.js";
 import CloseButton from "../close-button.js";

package/src/components/__tests__/modal-backdrop.test.js

@@ -1,11 +1,17 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
+import {render, screen, fireEvent} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import ModalBackdrop from "../modal-backdrop.js";
 import OnePaneDialog from "../one-pane-dialog.js";
 
-const sleep = (duration: number = 0) =>
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+import {getElementAttachedToDocument} from "../../../../../utils/testing/get-element-attached-to-document.js";
+
+const wait = (duration: number = 0) =>
     new Promise((resolve, reject) => setTimeout(resolve, duration));
 
 const exampleModal = (
@@ -13,6 +19,7 @@ const exampleModal = (
         content={<div data-modal-content />}
         title="Title"
         footer={<div data-modal-footer />}
+        testId="example-modal-test-id"
     />
 );
 
@@ -31,20 +38,36 @@ const exampleModalWithButtons = (
 );
 
 describe("ModalBackdrop", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     test("Clicking the backdrop triggers `onCloseModal`", () => {
+        // Arrange
         const onCloseModal = jest.fn();
 
-        // We use `mount` instead of `shallow` here, because the component's
-        // click handler expects actual DOM events.
-        const wrapper = mount(
-            <ModalBackdrop onCloseModal={onCloseModal}>
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
                 {exampleModal}
             </ModalBackdrop>,
         );
 
-        expect(onCloseModal).not.toHaveBeenCalled();
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        //Act
+        userEvent.click(backdrop);
 
-        wrapper.simulate("click");
+        // Assert
         expect(onCloseModal).toHaveBeenCalled();
     });
 
@@ -63,6 +86,62 @@ describe("ModalBackdrop", () => {
         expect(onCloseModal).not.toHaveBeenCalled();
     });
 
+    test("Clicking and dragging into the backdrop does not close modal", () => {
+        // Arrange
+        const onCloseModal = jest.fn();
+
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
+                {exampleModal}
+            </ModalBackdrop>,
+        );
+
+        const panel = screen.getByTestId("example-modal-test-id");
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        // Act
+
+        // Dragging the mouse
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseDown(panel);
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseUp(backdrop);
+
+        // Assert
+        expect(onCloseModal).not.toHaveBeenCalled();
+    });
+
+    test("Clicking and dragging in from the backdrop does not close modal", () => {
+        // Arrange
+        const onCloseModal = jest.fn();
+
+        render(
+            <ModalBackdrop
+                onCloseModal={onCloseModal}
+                testId="modal-backdrop-test-id"
+            >
+                {exampleModal}
+            </ModalBackdrop>,
+        );
+
+        const panel = screen.getByTestId("example-modal-test-id");
+        const backdrop = screen.getByTestId("modal-backdrop-test-id");
+
+        // Act
+
+        // Dragging the mouse
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseDown(backdrop);
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseUp(panel);
+
+        // Assert
+        expect(onCloseModal).not.toHaveBeenCalled();
+    });
+
     test("Clicking the modal footer does not trigger `onCloseModal`", () => {
         const onCloseModal = jest.fn();
 
@@ -80,6 +159,10 @@ describe("ModalBackdrop", () => {
 
     test("If initialFocusId is set and element is found, we focus that element inside the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
 
         const wrapper = mount(
@@ -98,21 +181,28 @@ describe("ModalBackdrop", () => {
                     footer={<div data-modal-footer />}
                 />
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const initialFocusElement = wrapper.find(`#${initialFocusId}`);
 
         // Assert
         // first we verify the element exists in the DOM
         expect(initialFocusElement).toHaveLength(1);
+
         // verify the focus is set on the correct element
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(initialFocusElement.getDOMNode());
     });
 
     test("If initialFocusId is set but element is NOT found, we focus on the first focusable element instead", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
         const firstFocusableElement = "[data-first-button]";
 
@@ -123,16 +213,18 @@ describe("ModalBackdrop", () => {
             >
                 {exampleModalWithButtons}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const initialFocusElement = wrapper.find(`#${initialFocusId}`);
 
         // Assert
         // first we verify the element doesn't exist in the DOM
         expect(initialFocusElement).toHaveLength(0);
         // verify the focus is set on the first focusable element instead
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(
             wrapper.find(firstFocusableElement).getDOMNode(),
         );
@@ -140,83 +232,49 @@ describe("ModalBackdrop", () => {
 
     test("If no initialFocusId is set, we focus the first button in the modal", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
+        const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
                 {exampleModalWithButtons}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const focusableElement = wrapper
             .find("[data-first-button]")
             .getDOMNode();
 
         // Assert
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(focusableElement);
     });
 
     test("If there are no focusable elements, we focus the Dialog instead", async () => {
         // Arrange
+        // We need the elements in the DOM document, it seems, for this test
+        // to work. Changing to testing-library will likely fix this.
+        // Then we can remove the lint suppression.
+        const attachElement = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalBackdrop onCloseModal={() => {}}>
                 {exampleModal}
             </ModalBackdrop>,
+            {attachTo: attachElement},
         );
 
         // Act
-        await sleep(); // wait for styles to be applied
+        await wait(); // wait for styles to be applied
         const focusableElement = wrapper
             .find('div[role="dialog"]')
             .getDOMNode();
 
         // Assert
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).toBe(focusableElement);
     });
-
-    // TODO(mdr): I haven't figured out how to actually simulate tab keystrokes
-    //     or focus events in a way that JSDOM will recognize, so triggering the
-    //     global focus handler isn't feasible. I had to do manual testing
-    //     instead :( Here's what I had, though!
-    test.skip("Tabbing inside the modal wraps around", () => {
-        const wrapper = mount(
-            <div>
-                <button data-button-id="A" />
-                <ModalBackdrop onCloseModal={() => {}}>
-                    {exampleModalWithButtons}
-                </ModalBackdrop>
-                <button data-button-id="Z" />
-            </div>,
-        );
-
-        const buttonA = wrapper.find('[data-button-id="A"]').getDOMNode();
-        const button1 = wrapper.find('[data-button-id="1"]').getDOMNode();
-        const button2 = wrapper.find('[data-button-id="2"]').getDOMNode();
-        const button3 = wrapper.find('[data-button-id="3"]').getDOMNode();
-        const buttonZ = wrapper.find('[data-button-id="Z"]').getDOMNode();
-
-        // First, go forward. Confirm that, when we get to button Z, we wrap
-        // back to button 1. (I wish we could just simulate tab keypresses!
-        // Instead, we depend on the implementation detail that _which_ node you
-        // exit from determines where you'll end up.)
-        button1.focus();
-        expect(document.activeElement).toBe(button1);
-        button2.focus();
-        expect(document.activeElement).toBe(button2);
-        button3.focus();
-        expect(document.activeElement).toBe(button3);
-        buttonZ.focus();
-        expect(document.activeElement).toBe(button1);
-
-        // Then, go backward. Confirm that, when we get to button A, we wrap
-        // back to button 3.
-        button3.focus();
-        expect(document.activeElement).toBe(button3);
-        button2.focus();
-        expect(document.activeElement).toBe(button2);
-        button1.focus();
-        expect(document.activeElement).toBe(button1);
-        buttonA.focus();
-        expect(document.activeElement).toBe(button3);
-    });
 });

package/src/components/__tests__/modal-header.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import {
     Breadcrumbs,