@khanacademy/wonder-blocks-modal 2.2.2 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,15 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.28",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.30",
     "@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.4",
-    "@khanacademy/wonder-blocks-layout": "^1.4.7",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.27",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.6",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.29",
-    "@khanacademy/wonder-blocks-typography": "^1.1.29"
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.31",
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -32,6 +32,6 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

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

@@ -1,7 +1,12 @@
 // @flow
 import * as React from "react";
-import {mount, shallow} from "enzyme";
+import {mount} from "enzyme";
 import "jest-enzyme";
+import {render, screen, waitFor} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import Button from "@khanacademy/wonder-blocks-button";
 
 import ModalLauncher from "../modal-launcher.js";
 import OnePaneDialog from "../one-pane-dialog.js";
@@ -49,6 +54,7 @@ describe("ModalLauncher", () => {
         wrapper.find("button").simulate("click");
         await wait();
 
+        // eslint-disable-next-line testing-library/no-node-access
         const portal = global.document.querySelector(
             "[data-modal-launcher-portal]",
         );
@@ -108,6 +114,7 @@ describe("ModalLauncher", () => {
             </ModalLauncher>,
         );
         expect(
+            // eslint-disable-next-line testing-library/no-node-access
             global.document.querySelector("[data-modal-launcher-portal]"),
         ).toBeNull();
 
@@ -115,6 +122,7 @@ describe("ModalLauncher", () => {
         // the modal function.
         opened = true;
         wrapper.find("button").simulate("click");
+        // eslint-disable-next-line testing-library/no-node-access
         const portal = global.document.querySelector(
             "[data-modal-launcher-portal]",
         );
@@ -132,6 +140,7 @@ describe("ModalLauncher", () => {
 
         // Launch the modal.
         wrapper.find("button").simulate("click");
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.querySelector("[data-modal-child]")).toBeTruthy();
 
         // Simulate an Escape keypress.
@@ -146,6 +155,7 @@ describe("ModalLauncher", () => {
         // NOTE(mdr): This might be fragile once React's async rendering lands.
         //     I wonder if we'll be able to force synchronous rendering in unit
         //     tests?
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.querySelector("[data-modal-child]")).toBeFalsy();
     });
 
@@ -156,7 +166,7 @@ describe("ModalLauncher", () => {
 
         // Rather than test this rigorously, we'll just check that a
         // ScrollDisabler is present, and trust ScrollDisabler to do its job.
-        const wrapper = shallow(
+        const wrapper = mount(
             <ModalLauncher
                 modal={({closeModal}) => {
                     savedCloseModal = closeModal;
@@ -189,7 +199,7 @@ describe("ModalLauncher", () => {
         jest.spyOn(console, "warn");
 
         // Act
-        shallow(
+        render(
             // $FlowIgnore
             <ModalLauncher
                 modal={exampleModal}
@@ -213,7 +223,7 @@ describe("ModalLauncher", () => {
 
         // Act
         // $FlowIgnore
-        shallow(<ModalLauncher modal={exampleModal} opened={false} />);
+        render(<ModalLauncher modal={exampleModal} opened={false} />);
 
         // Assert
         // eslint-disable-next-line no-console
@@ -228,7 +238,7 @@ describe("ModalLauncher", () => {
 
         // Act
         // $FlowIgnore
-        shallow(<ModalLauncher modal={exampleModal} />);
+        render(<ModalLauncher modal={exampleModal} />);
 
         // Assert
         // eslint-disable-next-line no-console
@@ -284,50 +294,140 @@ describe("ModalLauncher", () => {
         await wait();
 
         // Assert
+        // eslint-disable-next-line testing-library/no-node-access
         expect(document.activeElement).not.toBe(lastButton);
     });
 
     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`);
+        const ModalLauncherWrapper = () => {
+            const [opened, setOpened] = React.useState(false);
+
+            const handleOpen = () => {
+                setOpened(true);
+            };
+
+            const handleClose = () => {
+                setOpened(false);
+            };
+
+            return (
+                <View>
+                    <Button>Top of page (should not receive focus)</Button>
+                    <Button
+                        testId="launcher-button"
+                        onClick={() => handleOpen()}
+                    >
+                        Open modal
+                    </Button>
+                    <ModalLauncher
+                        onClose={() => handleClose()}
+                        opened={opened}
+                        modal={({closeModal}) => (
+                            <OnePaneDialog
+                                title="Regular modal"
+                                content={<View>Hello World</View>}
+                                footer={
+                                    <Button
+                                        testId="modal-close-button"
+                                        onClick={closeModal}
+                                    >
+                                        Close Modal
+                                    </Button>
+                                }
+                            />
+                        )}
+                    />
+                </View>
+            );
         };
 
-        const wrapper = mount(
-            <ModalLauncher
-                modal={({closeModal}) => {
-                    savedCloseModal = closeModal;
-                    return exampleModal;
-                }}
-            >
-                {({openModal}) => (
-                    <button onClick={openModal} data-last-focused-button />
-                )}
-            </ModalLauncher>,
-            {attachTo: containerDiv},
-        );
+        render(<ModalLauncherWrapper />);
 
-        const lastButton = wrapper
-            .find("[data-last-focused-button]")
-            .getDOMNode();
-        // force focus
-        lastButton.focus();
+        const lastButton = await screen.findByTestId("launcher-button");
 
         // Launch the modal.
-        wrapper.find("button").simulate("click");
+        userEvent.click(lastButton);
 
-        // wait for styles to be applied
-        await wait();
+        // Act
+        // Close modal
+        const modalCloseButton = await screen.findByTestId(
+            "modal-close-button",
+        );
+        userEvent.click(modalCloseButton);
+
+        // Assert
+        await waitFor(() => {
+            expect(lastButton).toHaveFocus();
+        });
+    });
+
+    test("if `closedFocusId` is passed, shift focus to specified element after the modal closes", async () => {
+        // Arrange
+        const ModalLauncherWrapper = () => {
+            const [opened, setOpened] = React.useState(false);
+
+            const handleOpen = () => {
+                setOpened(true);
+            };
+
+            const handleClose = () => {
+                setOpened(false);
+            };
+
+            return (
+                <View>
+                    <Button>Top of page (should not receive focus)</Button>
+                    <Button id="button-to-focus-on" testId="focused-button">
+                        Focus here after close
+                    </Button>
+                    <Button
+                        testId="launcher-button"
+                        onClick={() => handleOpen()}
+                    >
+                        Open modal
+                    </Button>
+                    <ModalLauncher
+                        onClose={() => handleClose()}
+                        opened={opened}
+                        closedFocusId="button-to-focus-on"
+                        modal={({closeModal}) => (
+                            <OnePaneDialog
+                                title="Triggered from action menu"
+                                content={<View>Hello World</View>}
+                                footer={
+                                    <Button
+                                        testId="modal-close-button"
+                                        onClick={closeModal}
+                                    >
+                                        Close Modal
+                                    </Button>
+                                }
+                            />
+                        )}
+                    />
+                </View>
+            );
+        };
+
+        render(<ModalLauncherWrapper />);
+
+        // Launch modal
+        const launcherButton = await screen.findByTestId("launcher-button");
+        userEvent.click(launcherButton);
 
         // Act
-        savedCloseModal(); // close the modal
-        wrapper.update();
+        // Close modal
+        const modalCloseButton = await screen.findByTestId(
+            "modal-close-button",
+        );
+        userEvent.click(modalCloseButton);
 
         // Assert
-        expect(document.activeElement).toBe(lastButton);
+        const focusedButton = await screen.findByTestId("focused-button");
+        await waitFor(() => {
+            expect(focusedButton).toHaveFocus();
+        });
     });
 
     test("testId should be added to the Backdrop", () => {

package/src/components/modal-launcher.js

@@ -3,6 +3,12 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
 
+import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
+import type {
+    WithActionSchedulerProps,
+    WithoutActionScheduler,
+} from "@khanacademy/wonder-blocks-timing";
+
 import FocusTrap from "./focus-trap.js";
 import ModalBackdrop from "./modal-backdrop.js";
 import ScrollDisabler from "./scroll-disabler.js";
@@ -43,10 +49,19 @@ type CommonProps = {|
      */
     initialFocusId?: string,
 
+    /**
+     * The selector for the element that will be focused after the dialog
+     * closes. When not set, the last element focused outside the modal will
+     * be used if it exists.
+     */
+    closedFocusId?: string,
+
     /**
      * Test ID used for e2e testing. It's set on the ModalBackdrop
      */
     testId?: string,
+
+    ...WithActionSchedulerProps,
 |};
 
 type ControlledProps = {|
@@ -104,7 +119,7 @@ type State = {|
  * like OnePaneDialog and is provided via
  * the `modal` prop.
  */
-export default class ModalLauncher extends React.Component<Props, State> {
+class ModalLauncher extends React.Component<Props, State> {
     /**
      * The most recent element _outside this component_ that received focus.
      * Be default, it captures the element that triggered the modal opening
@@ -156,14 +171,41 @@ export default class ModalLauncher extends React.Component<Props, State> {
         this.setState({opened: true});
     };
 
+    _returnFocus: () => void = () => {
+        const {closedFocusId, schedule} = this.props;
+        const lastElement = this.lastElementFocusedOutsideModal;
+
+        // Focus on the specified element after closing the modal.
+        if (closedFocusId) {
+            const focusElement = (ReactDOM.findDOMNode(
+                document.getElementById(closedFocusId),
+            ): any);
+
+            if (focusElement) {
+                // Wait for the modal to leave the DOM before trying
+                // to focus on the specified element.
+                schedule.animationFrame(() => {
+                    focusElement.focus();
+                });
+                return;
+            }
+        }
+
+        if (lastElement != null) {
+            // Wait for the modal to leave the DOM before trying to
+            // return focus to the element that triggered the modal.
+            schedule.animationFrame(() => {
+                lastElement.focus();
+            });
+        }
+    };
+
     handleCloseModal: () => void = () => {
         this.setState({opened: false}, () => {
-            this.props.onClose && this.props.onClose();
+            const {onClose} = this.props;
 
-            if (this.lastElementFocusedOutsideModal != null) {
-                // return focus to the element that triggered the modal
-                this.lastElementFocusedOutsideModal.focus();
-            }
+            onClose && onClose();
+            this._returnFocus();
         });
     };
 
@@ -269,3 +311,11 @@ const styles = StyleSheet.create({
         zIndex: 1080,
     },
 });
+
+type ExportProps = WithoutActionScheduler<
+    React.ElementConfig<typeof ModalLauncher>,
+>;
+
+export default (withActionScheduler(
+    ModalLauncher,
+): React.ComponentType<ExportProps>);

package/src/components/one-pane-dialog.stories.js

@@ -6,6 +6,7 @@ import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import Button from "@khanacademy/wonder-blocks-button";
+import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
 
 import type {StoryComponentType} from "@storybook/react";
 import OnePaneDialog from "./one-pane-dialog.js";
@@ -80,7 +81,7 @@ export const Simple: StoryComponentType = () => {
 
 const styles = StyleSheet.create({
     above: {
-        background: "url(/modal-above.png)",
+        background: "url(./modal-above.png)",
         width: 874,
         height: 551,
         position: "absolute",
@@ -89,7 +90,7 @@ const styles = StyleSheet.create({
     },
 
     below: {
-        background: "url(/modal-below.png)",
+        background: "url(./modal-below.png)",
         width: 868,
         height: 521,
         position: "absolute",
@@ -200,3 +201,48 @@ WithOpener.parameters = {
         disableSnapshot: true,
     },
 };
+
+export const WithClosedFocusId: StoryComponentType = () => {
+    const [opened, setOpened] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpened(true);
+    };
+
+    const handleClose = () => {
+        setOpened(false);
+    };
+
+    return (
+        <View style={{gap: 20}}>
+            <Button>Top of page (should not receive focus)</Button>
+            <Button id="button-to-focus-on">Focus here after close</Button>
+            <ActionMenu menuText="actions">
+                <ActionItem label="Open modal" onClick={() => handleOpen()} />
+            </ActionMenu>
+            <ModalLauncher
+                onClose={() => handleClose()}
+                opened={opened}
+                closedFocusId="button-to-focus-on"
+                modal={({closeModal}) => (
+                    <OnePaneDialog
+                        title="Triggered from action menu"
+                        content={<View>Hello World</View>}
+                        footer={
+                            <Button onClick={closeModal}>Close Modal</Button>
+                        }
+                    />
+                )}
+            />
+        </View>
+    );
+};
+
+WithClosedFocusId.parameters = {
+    chromatic: {
+        // Don't take screenshots of this story since the case we want
+        // to test doesn't appear on first render - it occurs after
+        // we complete a series of steps.
+        disableSnapshot: true,
+    },
+};