@khanacademy/wonder-blocks-modal 2.1.42 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.1.42",
+  "version": "2.2.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -15,24 +15,23 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.24",
-    "@khanacademy/wonder-blocks-color": "^1.1.18",
-    "@khanacademy/wonder-blocks-core": "^3.1.4",
-    "@khanacademy/wonder-blocks-icon": "^1.2.21",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.13",
-    "@khanacademy/wonder-blocks-layout": "^1.4.3",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.3",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.25",
-    "@khanacademy/wonder-blocks-typography": "^1.1.25"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.27",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.2",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.28",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "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.0"
-  },
-  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+    "wb-dev-build-settings": "^0.2.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,

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

@@ -1,11 +1,15 @@
 // @flow
 import * as React from "react";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import ModalLauncher from "../modal-launcher.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 = (
@@ -16,19 +20,41 @@ const exampleModal = (
 );
 
 describe("ModalLauncher", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     window.scrollTo = jest.fn();
 
-    test("Children can launch the modal", () => {
+    test("Children can launch 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.
+        const containerDiv = getElementAttachedToDocument("container");
         const wrapper = mount(
             <ModalLauncher modal={exampleModal}>
                 {({openModal}) => <button onClick={openModal} />}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
+
+        // Act
         wrapper.find("button").simulate("click");
+        await wait();
+
         const portal = global.document.querySelector(
             "[data-modal-launcher-portal]",
         );
-        expect(portal instanceof HTMLDivElement).toBe(true);
+
+        // Assert
+        expect(portal).toBeInstanceOf(HTMLDivElement);
     });
 
     test("Modal can be manually opened and closed", () => {
@@ -62,7 +88,7 @@ describe("ModalLauncher", () => {
         //     this function receives a `closeModal` argument that works.
         const modalFn = ({closeModal}: {|closeModal: () => void|}) => {
             expect(opened).toBe(true);
-            setImmediate(closeModal);
+            setTimeout(closeModal, 0);
             return exampleModal;
         };
 
@@ -110,6 +136,7 @@ describe("ModalLauncher", () => {
 
         // Simulate an Escape keypress.
         const event: KeyboardEvent = (document.createEvent("Event"): any);
+        // $FlowIgnore[cannot-write]
         event.key = "Escape";
         event.initEvent("keyup", true, true);
         document.dispatchEvent(event);
@@ -254,7 +281,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Assert
         expect(document.activeElement).not.toBe(lastButton);
@@ -262,6 +289,9 @@ describe("ModalLauncher", () => {
 
     test("if modal is closed, return focus to the last element focused outside 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.
+        const containerDiv = getElementAttachedToDocument("container");
         let savedCloseModal = () => {
             throw new Error(`closeModal wasn't saved`);
         };
@@ -277,6 +307,7 @@ describe("ModalLauncher", () => {
                     <button onClick={openModal} data-last-focused-button />
                 )}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
 
         const lastButton = wrapper
@@ -289,7 +320,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
 
         // wait for styles to be applied
-        await sleep();
+        await wait();
 
         // Act
         savedCloseModal(); // close the modal

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

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

package/src/components/__tests__/one-pane-dialog.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import OnePaneDialog from "../one-pane-dialog.js";
 

package/src/components/modal-backdrop.js

@@ -7,6 +7,8 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ModalLauncherPortalAttributeName} from "../util/constants.js";
 
+import {findFocusableNodes} from "../util/find-focusable-nodes.js";
+
 import type {ModalElement} from "../util/types.js";
 
 type Props = {|
@@ -24,13 +26,6 @@ type Props = {|
     testId?: string,
 |};
 
-/**
- * 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
@@ -62,6 +57,8 @@ export default class ModalBackdrop extends React.Component<Props> {
         }, 0);
     }
 
+    _mousePressedOutside: boolean = false;
+
     /**
      * Returns an element specified by the user
      */
@@ -82,7 +79,7 @@ export default class ModalBackdrop extends React.Component<Props> {
      */
     _getFirstFocusableElement(node: HTMLElement): HTMLElement | null {
         // get a collection of elements that can be focused
-        const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+        const focusableElements = findFocusableNodes(node);
 
         if (!focusableElements) {
             return null;
@@ -112,12 +109,18 @@ export default class ModalBackdrop extends React.Component<Props> {
      * _directly_ from the positioner, not bubbled up from its children), close
      * the modal.
      */
-    handleClick: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
-        // Was the lowest-level click target (`e.target`) the positioner element
-        // (`e.currentTarget`)?
-        if (e.target === e.currentTarget) {
+    handleMouseDown: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
+        // Confirm that it is the backdrop that is being clicked, not the child
+        this._mousePressedOutside = e.target === e.currentTarget;
+    };
+
+    handleMouseUp: (e: SyntheticEvent<>) => void = (e: SyntheticEvent<>) => {
+        // 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;
     };
 
     render(): React.Node {
@@ -129,7 +132,8 @@ export default class ModalBackdrop extends React.Component<Props> {
         return (
             <View
                 style={styles.modalPositioner}
-                onClick={this.handleClick}
+                onMouseDown={this.handleMouseDown}
+                onMouseUp={this.handleMouseUp}
                 testId={testId}
                 {...backdropProps}
             >