@khanacademy/wonder-blocks-modal 2.1.44 → 2.1.45

package/dist/es/index.js

@@ -446,6 +446,10 @@ const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
  * @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));
+}
+
 /**
  * A private component used by ModalLauncher. This is the fixed-position
  * container element that gets mounted outside the DOM. It overlays the modal
@@ -456,7 +460,6 @@ 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 Component {
   constructor(...args) {
     super(...args);
@@ -510,7 +513,7 @@ class ModalBackdrop extends Component {
 
   _getFirstFocusableElement(node) {
     // get a collection of elements that can be focused
-    const focusableElements = node.querySelectorAll(FOCUSABLE_ELEMENTS);
+    const focusableElements = findFocusableNodes(node);
 
     if (!focusableElements) {
       return null;

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,7 +1282,6 @@ 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);
@@ -1339,7 +1335,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;
@@ -1410,6 +1406,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 +1515,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 +1563,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.44",
+  "version": "2.1.45",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -15,16 +15,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.26",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.2.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.23",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.5",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.27",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@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.1",
+    "@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",
@@ -32,7 +32,7 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

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

@@ -5,7 +5,10 @@ import {mount} from "enzyme";
 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 = (
@@ -31,6 +34,17 @@ const exampleModalWithButtons = (
 );
 
 describe("ModalBackdrop", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     test("Clicking the backdrop triggers `onCloseModal`", () => {
         const onCloseModal = jest.fn();
 
@@ -80,6 +94,9 @@ 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.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
 
         const wrapper = mount(
@@ -98,10 +115,11 @@ 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
@@ -113,6 +131,9 @@ describe("ModalBackdrop", () => {
 
     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.
+        const attachElement = getElementAttachedToDocument("container");
         const initialFocusId = "initial-focus";
         const firstFocusableElement = "[data-first-button]";
 
@@ -123,10 +144,11 @@ 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
@@ -140,14 +162,18 @@ 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.
+        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();
@@ -158,14 +184,18 @@ describe("ModalBackdrop", () => {
 
     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.
+        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();
@@ -173,50 +203,4 @@ describe("ModalBackdrop", () => {
         // Assert
         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-launcher.test.js

@@ -5,7 +5,10 @@ import {mount, shallow} from "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 +19,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 +87,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 +135,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 +280,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 +288,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 +306,7 @@ describe("ModalLauncher", () => {
                     <button onClick={openModal} data-last-focused-button />
                 )}
             </ModalLauncher>,
+            {attachTo: containerDiv},
         );
 
         const lastButton = wrapper
@@ -289,7 +319,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/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
@@ -82,7 +77,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;

package/src/util/find-focusable-nodes.js

@@ -0,0 +1,14 @@
+// @flow
+
+/**
+ * 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"])';
+
+export function findFocusableNodes(
+    root: HTMLElement | Document,
+): Array<HTMLElement> {
+    return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
+}

package/src/util/maybe-get-portal-mounted-modal-host-element.test.js

@@ -108,9 +108,8 @@ describe("maybeGetPortalMountedModalHostElement", () => {
                 if (node) {
                     // Act
                     const candidateElement = ReactDOM.findDOMNode(node);
-                    const result = maybeGetPortalMountedModalHostElement(
-                        candidateElement,
-                    );
+                    const result =
+                        maybeGetPortalMountedModalHostElement(candidateElement);
 
                     // Assert
                     expect(result).toBeTruthy();