@khanacademy/wonder-blocks-modal 2.3.0 → 2.3.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @khanacademy/wonder-blocks-modal
 
+## 2.3.3
+
+### Patch Changes
+
+-   Updated dependencies [83486dba]
+    -   @khanacademy/wonder-blocks-icon@1.2.29
+    -   @khanacademy/wonder-blocks-icon-button@3.4.8
+
+## 2.3.2
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-breadcrumbs@1.0.31
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-icon-button@3.4.7
+    -   @khanacademy/wonder-blocks-layout@1.4.10
+    -   @khanacademy/wonder-blocks-toolbar@2.1.32
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
+## 2.3.1
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-breadcrumbs@1.0.30
+-   @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-toolbar@2.1.31
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -11,16 +11,6 @@ import _extends from '@babel/runtime/helpers/extends';
 import { icons } from '@khanacademy/wonder-blocks-icon';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-/**
- * `ModalDialog` is a component that contains these elements:
- * - The visual dialog element itself (`<div role="dialog"/>`)
- * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
- *
- * **Accessibility notes:**
- * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
- * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
- */
 class ModalDialog extends React.Component {
   render() {
     const {
@@ -30,29 +20,31 @@ class ModalDialog extends React.Component {
       style,
       children,
       testId,
-      "aria-labelledby": ariaLabelledBy
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel
     } = this.props;
     const contextValue = {
       ssrSize: "large",
       mediaSpec: MEDIA_MODAL_SPEC
     };
-    return /*#__PURE__*/React.createElement(MediaLayoutContext.Provider, {
+    return React.createElement(MediaLayoutContext.Provider, {
       value: contextValue
-    }, /*#__PURE__*/React.createElement(MediaLayout, {
+    }, React.createElement(MediaLayout, {
       styleSheets: styleSheets$3
     }, ({
       styles
-    }) => /*#__PURE__*/React.createElement(View, {
+    }) => React.createElement(View, {
       style: [styles.wrapper, style]
-    }, below && /*#__PURE__*/React.createElement(View, {
+    }, below && React.createElement(View, {
       style: styles.below
-    }, below), /*#__PURE__*/React.createElement(View, {
+    }, below), React.createElement(View, {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
       style: styles.dialog,
       testId: testId
-    }, children), above && /*#__PURE__*/React.createElement(View, {
+    }, children), above && React.createElement(View, {
       style: styles.above
     }, above))));
   }
@@ -71,10 +63,6 @@ const styleSheets$3 = {
       height: "100%",
       position: "relative"
     },
-
-    /**
-     * Ensures the dialog container uses the container size
-     */
     dialog: {
       width: "100%",
       height: "100%",
@@ -108,15 +96,6 @@ const styleSheets$3 = {
   })
 };
 
-/**
- * Modal footer included after the content.
- *
- * **Implementation notes**:
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the `footer` prop.
- * - The footer is completely flexible. Meaning the developer needs to add its own custom layout to match design specs.
- */
 class ModalFooter extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
@@ -126,7 +105,7 @@ class ModalFooter extends React.Component {
     const {
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: styles$3.footer
     }, children);
   }
@@ -150,49 +129,6 @@ const styles$3 = StyleSheet.create({
   }
 });
 
-/**
- * This is a helper component that is never rendered by itself. It is always
- * pinned to the top of the dialog, is responsive using the same behavior as its
- * parent dialog, and has the following properties:
- * - title
- * - breadcrumb OR subtitle, but not both.
- *
- * **Accessibility notes:**
- *
- * - By default (e.g. using [OnePaneDialog](/#onepanedialog)), `titleId` is
- *   populated automatically by the parent container.
- * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the
- *   ModalHeader doesn’t have to have the `titleId` prop however this is
- *   recommended. It should match the `aria-labelledby` prop of the
- *   [ModalDialog](/#modaldialog) component. If you want to see an example of
- *   how to generate this ID, check [IDProvider](/#idprovider).
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to include it as part of [ModalPanel](/#modalpanel) by using the
- *   `header` prop.
- * - Add a title (required).
- * - Optionally add a subtitle or breadcrumbs.
- * - We encourage you to add `titleId` (see Accessibility notes).
- * - If the `ModalPanel` has a dark background, make sure to set `light` to
- *   `false`.
- * - If you need to create e2e tests, make sure to pass a `testId` prop and
- *   add a sufix to scope the testId to this component: e.g.
- *   `some-random-id-ModalHeader`. This scope will also be passed to the title
- *   and subtitle elements: e.g. `some-random-id-ModalHeader-title`.
- *
- * Example:
- *
- * ```js
- * <ModalHeader
- *      title="Sidebar using ModalHeader"
- *      subtitle="subtitle"
- *      titleId="uniqueTitleId"
- *      light={false}
- *  />
- * ```
- */
 class ModalHeader extends React.Component {
   render() {
     const {
@@ -208,20 +144,20 @@ class ModalHeader extends React.Component {
       throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
 
-    return /*#__PURE__*/React.createElement(MediaLayout, {
+    return React.createElement(MediaLayout, {
       styleSheets: styleSheets$2
     }, ({
       styles
-    }) => /*#__PURE__*/React.createElement(View, {
+    }) => React.createElement(View, {
       style: [styles.header, !light && styles.dark],
       testId: testId
-    }, breadcrumbs && /*#__PURE__*/React.createElement(View, {
+    }, breadcrumbs && React.createElement(View, {
       style: styles.breadcrumbs
-    }, breadcrumbs), /*#__PURE__*/React.createElement(HeadingMedium, {
+    }, breadcrumbs), React.createElement(HeadingMedium, {
       style: styles.title,
       id: titleId,
       testId: testId && `${testId}-title`
-    }, title), subtitle && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, title), subtitle && React.createElement(LabelSmall, {
       style: light && styles.subtitle,
       testId: testId && `${testId}-subtitle`
     }, subtitle)));
@@ -251,7 +187,6 @@ const styleSheets$2 = {
       marginBottom: Spacing.xSmall_8
     },
     title: {
-      // Prevent title from overlapping the close button
       paddingRight: Spacing.medium_16
     },
     subtitle: {
@@ -271,22 +206,11 @@ const styleSheets$2 = {
 };
 
 class FocusTrap extends React.Component {
-  /** The most recent node _inside this component_ to receive focus. */
-
-  /**
-   * Whether we're currently applying programmatic focus, and should therefore
-   * ignore focus change events.
-   */
-
-  /**
-   * Tabbing is restricted to descendents of this element.
-   */
   constructor(props) {
     super(props);
 
     this.getModalRoot = node => {
       if (!node) {
-        // The component is being umounted
         return;
       }
 
@@ -300,8 +224,6 @@ class FocusTrap extends React.Component {
     };
 
     this.handleGlobalFocus = e => {
-      // If we're busy applying our own programmatic focus, we ignore focus
-      // changes, to avoid an infinite loop.
       if (this.ignoreFocusChanges) {
         return;
       }
@@ -309,7 +231,6 @@ class FocusTrap extends React.Component {
       const target = e.target;
 
       if (!(target instanceof Node)) {
-        // Sometimes focus events trigger on the document itself. Ignore!
         return;
       }
 
@@ -320,25 +241,13 @@ class FocusTrap extends React.Component {
       }
 
       if (modalRoot.contains(target)) {
-        // If the newly focused node is inside the modal, we just keep track
-        // of that.
         this.lastNodeFocusedInModal = target;
       } else {
-        // If the newly focused node is outside the modal, we try refocusing
-        // the first focusable node of the modal. (This could be the user
-        // pressing Tab on the last node of the modal, or focus escaping in
-        // some other way.)
-        this.focusFirstElementIn(modalRoot); // But, if it turns out that the first focusable node of the modal
-        // was what we were previously focusing, then this is probably the
-        // user pressing Shift-Tab on the first node, wanting to go to the
-        // end. So, we instead try focusing the last focusable node of the
-        // modal.
+        this.focusFirstElementIn(modalRoot);
 
         if (document.activeElement === this.lastNodeFocusedInModal) {
           this.focusLastElementIn(modalRoot);
-        } // Focus should now be inside the modal, so record the newly-focused
-        // node as the last node focused in the modal.
-
+        }
 
         this.lastNodeFocusedInModal = document.activeElement;
       }
@@ -356,27 +265,18 @@ class FocusTrap extends React.Component {
     window.removeEventListener("focus", this.handleGlobalFocus, true);
   }
 
-  /** Try to focus the given node. Return true iff successful. */
   tryToFocus(node) {
     if (node instanceof HTMLElement) {
       this.ignoreFocusChanges = true;
 
       try {
         node.focus();
-      } catch (e) {// ignore error
-      }
+      } catch (e) {}
 
       this.ignoreFocusChanges = false;
       return document.activeElement === node;
     }
   }
-  /**
-   * Focus the first focusable descendant of the given node.
-   *
-   * Return true if we succeed. Or, if the given node has no focusable
-   * descendants, return false.
-   */
-
 
   focusFirstElementIn(currentParent) {
     const children = currentParent.childNodes;
@@ -391,13 +291,6 @@ class FocusTrap extends React.Component {
 
     return false;
   }
-  /**
-   * Focus the last focusable descendant of the given node.
-   *
-   * Return true if we succeed. Or, if the given node has no focusable
-   * descendants, return false.
-   */
-
 
   focusLastElementIn(currentParent) {
     const children = currentParent.childNodes;
@@ -412,22 +305,20 @@ class FocusTrap extends React.Component {
 
     return false;
   }
-  /** This method is called when any node on the page is focused. */
-
 
   render() {
     const {
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return React.createElement(React.Fragment, null, React.createElement("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
       }
-    }), /*#__PURE__*/React.createElement(View, {
+    }), React.createElement(View, {
       style: style,
       ref: this.getModalRoot
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
+    }, this.props.children), React.createElement("div", {
       tabIndex: "0",
       style: {
         position: "fixed"
@@ -437,43 +328,23 @@ class FocusTrap extends React.Component {
 
 }
 
-/**
- * The attribute used to identify a modal launcher portal.
- */
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
-/**
- * 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));
 }
 
-/**
- * A private component used by ModalLauncher. This is the fixed-position
- * container element that gets mounted outside the DOM. It overlays the modal
- * content (provided as `children`) over the content, with a gray backdrop
- * behind it.
- *
- * This component is also responsible for cloning the provided modal `children`,
- * and adding an `onClose` prop that will call `onCloseModal`. If an
- * `onClose` prop is already provided, the two are merged.
- */
 class ModalBackdrop extends React.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.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();
       }
@@ -489,20 +360,13 @@ class ModalBackdrop extends React.Component {
       return;
     }
 
-    const firstFocusableElement = // 1. try to get element specified by the user
-    this._getInitialFocusElement(node) || // 2. get first occurence from list of focusable elements
-    this._getFirstFocusableElement(node) || // 3. get the dialog itself
-    this._getDialogElement(node); // wait for styles to applied
-
+    const firstFocusableElement = this._getInitialFocusElement(node) || this._getFirstFocusableElement(node) || this._getDialogElement(node);
 
     setTimeout(() => {
       firstFocusableElement.focus();
     }, 0);
   }
 
-  /**
-   * Returns an element specified by the user
-   */
   _getInitialFocusElement(node) {
     const {
       initialFocusId
@@ -514,41 +378,22 @@ class ModalBackdrop extends React.Component {
 
     return ReactDOM.findDOMNode(node.querySelector(`#${initialFocusId}`));
   }
-  /**
-   * Returns the first focusable element found inside the Dialog
-   */
-
 
   _getFirstFocusableElement(node) {
-    // get a collection of elements that can be focused
     const focusableElements = findFocusableNodes(node);
 
     if (!focusableElements) {
       return null;
-    } // if found, return the first focusable element
-
+    }
 
     return focusableElements[0];
   }
-  /**
-   * Returns the dialog element
-   */
-
 
   _getDialogElement(node) {
-    // If no focusable elements are found,
-    // the dialog content element itself will receive focus.
-    const dialogElement = ReactDOM.findDOMNode(node.querySelector('[role="dialog"]')); // add tabIndex to make the Dialog focusable
-
+    const dialogElement = ReactDOM.findDOMNode(node.querySelector('[role="dialog"]'));
     dialogElement.tabIndex = -1;
     return dialogElement;
   }
-  /**
-   * When the user clicks on the gray backdrop area (i.e., the click came
-   * _directly_ from the positioner, not bubbled up from its children), close
-   * the modal.
-   */
-
 
   render() {
     const {
@@ -558,7 +403,7 @@ class ModalBackdrop extends React.Component {
     const backdropProps = {
       [ModalLauncherPortalAttributeName]: true
     };
-    return /*#__PURE__*/React.createElement(View, _extends({
+    return React.createElement(View, _extends({
       style: styles$2.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
@@ -576,30 +421,11 @@ const styles$2 = StyleSheet.create({
     height: "100%",
     alignItems: "center",
     justifyContent: "center",
-    // If the modal ends up being too big for the viewport (e.g., the min
-    // height is triggered), add another scrollbar specifically for
-    // scrolling modal content.
-    //
-    // TODO(mdr): The specified behavior is that the modal should scroll
-    //     with the rest of the page, rather than separately, if overflow
-    //     turns out to be necessary. That sounds hard to do; punting for
-    //     now!
     overflow: "auto",
     background: Color.offBlack64
   }
 });
 
-/**
- * A UI-less component that lets `ModalLauncher` disable page scroll.
- *
- * The positioning of the modal requires some global page state changed
- * unfortunately, and this handles that in an encapsulated way.
- *
- * NOTE(mdr): This component was copied from webapp. Be wary of sync issues. It
- *     also doesn't have unit tests, and we haven't added any, since it's a
- *     relatively stable component that has now been stress-tested lots in prod.
- */
-
 const needsHackyMobileSafariScrollDisabler = (() => {
   if (typeof window === "undefined") {
     return false;
@@ -616,13 +442,10 @@ class ScrollDisabler extends React.Component {
 
       if (!body) {
         throw new Error("couldn't find document.body");
-      } // Prevent scrolling of the background, the first time a modal is
-      // opened.
-
+      }
 
       ScrollDisabler.oldOverflow = body.style.overflow;
-      ScrollDisabler.oldScrollY = window.scrollY; // We need to grab all of the original style properties before we
-      // modified any of them.
+      ScrollDisabler.oldScrollY = window.scrollY;
 
       if (needsHackyMobileSafariScrollDisabler) {
         ScrollDisabler.oldPosition = body.style.position;
@@ -630,9 +453,7 @@ class ScrollDisabler extends React.Component {
         ScrollDisabler.oldTop = body.style.top;
       }
 
-      body.style.overflow = "hidden"; // On mobile Safari, overflow: hidden is not enough, position:
-      // fixed is also required.  Setting style.top = -scollTop maintains
-      // the scroll position (without which we'd scroll to the top).
+      body.style.overflow = "hidden";
 
       if (needsHackyMobileSafariScrollDisabler) {
         body.style.position = "fixed";
@@ -652,8 +473,7 @@ class ScrollDisabler extends React.Component {
 
       if (!body) {
         throw new Error("couldn't find document.body");
-      } // Reset all values on the closing of the final modal.
-
+      }
 
       body.style.overflow = ScrollDisabler.oldOverflow;
 
@@ -680,24 +500,8 @@ ScrollDisabler.numModalsOpened = 0;
 const defaultContext = {
   closeModal: undefined
 };
-var ModalContext = /*#__PURE__*/React.createContext(defaultContext);
-
-/**
- * This component enables you to launch a modal, covering the screen.
- *
- * Children have access to `openModal` function via the function-as-children
- * pattern, so one common use case is for this component to wrap a button:
- *
- * ```js
- * <ModalLauncher modal={<TwoColumnModal ... />}>
- *     {({openModal}) => <button onClick={openModal}>Learn more</button>}
- * </ModalLauncher>
- * ```
- *
- * The actual modal itself is constructed separately, using a layout component
- * like OnePaneDialog and is provided via
- * the `modal` prop.
- */
+var ModalContext = React.createContext(defaultContext);
+
 class ModalLauncher extends React.Component {
   constructor(...args) {
     super(...args);
@@ -706,7 +510,6 @@ class ModalLauncher extends React.Component {
     };
 
     this._saveLastElementFocused = () => {
-      // keep a reference of the element that triggers the modal
       this.lastElementFocusedOutsideModal = document.activeElement;
     };
 
@@ -723,14 +526,12 @@ class ModalLauncher extends React.Component {
         closedFocusId,
         schedule
       } = this.props;
-      const lastElement = this.lastElementFocusedOutsideModal; // Focus on the specified element after closing the modal.
+      const lastElement = this.lastElementFocusedOutsideModal;
 
       if (closedFocusId) {
         const focusElement = ReactDOM.findDOMNode(document.getElementById(closedFocusId));
 
         if (focusElement) {
-          // Wait for the modal to leave the DOM before trying
-          // to focus on the specified element.
           schedule.animationFrame(() => {
             focusElement.focus();
           });
@@ -739,8 +540,6 @@ class ModalLauncher extends React.Component {
       }
 
       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();
         });
@@ -763,17 +562,14 @@ class ModalLauncher extends React.Component {
 
   static getDerivedStateFromProps(props, state) {
     if (typeof props.opened === "boolean" && props.children) {
-      // eslint-disable-next-line no-console
       console.warn("'children' and 'opened' can't be used together");
     }
 
     if (typeof props.opened === "boolean" && !props.onClose) {
-      // eslint-disable-next-line no-console
       console.warn("'onClose' should be used with 'opened'");
     }
 
     if (typeof props.opened !== "boolean" && !props.children) {
-      // eslint-disable-next-line no-console
       console.warn("either 'children' or 'opened' must be set");
     }
 
@@ -783,7 +579,6 @@ class ModalLauncher extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // ensures the element is stored only when the modal is opened
     if (!prevProps.opened && this.props.opened) {
       this._saveLastElementFocused();
     }
@@ -811,35 +606,22 @@ class ModalLauncher extends React.Component {
       return null;
     }
 
-    return (
-      /*#__PURE__*/
-      // This flow check is valid, it's the babel plugin which is broken,
-      // see modal-context.js for details.
-      // $FlowFixMe
-      React.createElement(ModalContext.Provider, {
-        value: {
-          closeModal: this.handleCloseModal
-        }
-      }, renderedChildren, this.state.opened && /*#__PURE__*/ReactDOM.createPortal(
-      /*#__PURE__*/
-
-      /* We need the container View that FocusTrap creates to be at the
-         correct z-index so that it'll be above the global nav in webapp. */
-      React.createElement(FocusTrap, {
-        style: styles$1.container
-      }, /*#__PURE__*/React.createElement(ModalBackdrop, {
-        initialFocusId: this.props.initialFocusId,
-        testId: this.props.testId,
-        onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
-      }, this._renderModal())), body), this.state.opened && /*#__PURE__*/React.createElement(ModalLauncherKeypressListener, {
-        onClose: this.handleCloseModal
-      }), this.state.opened && /*#__PURE__*/React.createElement(ScrollDisabler, null))
-    );
+    return React.createElement(ModalContext.Provider, {
+      value: {
+        closeModal: this.handleCloseModal
+      }
+    }, renderedChildren, this.state.opened && ReactDOM.createPortal(React.createElement(FocusTrap, {
+      style: styles$1.container
+    }, React.createElement(ModalBackdrop, {
+      initialFocusId: this.props.initialFocusId,
+      testId: this.props.testId,
+      onCloseModal: this.props.backdropDismissEnabled ? this.handleCloseModal : () => {}
+    }, this._renderModal())), body), this.state.opened && React.createElement(ModalLauncherKeypressListener, {
+      onClose: this.handleCloseModal
+    }), this.state.opened && React.createElement(ScrollDisabler, null));
   }
 
 }
-/** A component that, when mounted, calls `onClose` when Escape is pressed. */
-
 
 ModalLauncher.defaultProps = {
   backdropDismissEnabled: true
@@ -850,16 +632,7 @@ class ModalLauncherKeypressListener extends React.Component {
     super(...args);
 
     this._handleKeyup = e => {
-      // We check the key as that's keyboard layout agnostic and also avoids
-      // the minefield of deprecated number type properties like keyCode and
-      // which, with the replacement code, which uses a string instead.
       if (e.key === "Escape") {
-        // Stop the event going any further.
-        // For cancellation events, like the Escape key, we generally should
-        // air on the side of caution and only allow it to cancel one thing.
-        // So, it's polite for us to stop propagation of the event.
-        // Otherwise, we end up with UX where one Escape key press
-        // unexpectedly cancels multiple things.
         e.preventDefault();
         e.stopPropagation();
         this.props.onClose();
@@ -883,19 +656,11 @@ class ModalLauncherKeypressListener extends React.Component {
 
 const styles$1 = StyleSheet.create({
   container: {
-    // This z-index is copied from the Khan Academy webapp.
-    //
-    // TODO(mdr): Should we keep this in a constants file somewhere? Or
-    //     not hardcode it at all, and provide it to Wonder Blocks via
-    //     configuration?
     zIndex: 1080
   }
 });
 var modalLauncher = withActionScheduler(ModalLauncher);
 
-/**
- * The Modal content included after the header
- */
 class ModalContent extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
@@ -907,13 +672,13 @@ class ModalContent extends React.Component {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(MediaLayout, {
+    return React.createElement(MediaLayout, {
       styleSheets: styleSheets$1
     }, ({
       styles
-    }) => /*#__PURE__*/React.createElement(View, {
+    }) => React.createElement(View, {
       style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: [styles.content, style]
     }, children)));
   }
@@ -927,8 +692,6 @@ const styleSheets$1 = {
   all: StyleSheet.create({
     wrapper: {
       flex: 1,
-      // This helps to ensure that the paddingBottom is preserved when
-      // the contents start to overflow, this goes away on display: flex
       display: "block"
     },
     scrollOverflow: {
@@ -956,17 +719,15 @@ class CloseButton extends React.Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, ({
+    return React.createElement(ModalContext.Consumer, null, ({
       closeModal
     }) => {
       if (closeModal && onClick) {
         throw new Error("You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead");
       }
 
-      return /*#__PURE__*/React.createElement(IconButton, {
-        icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
-        // TODO(kevinb): provide a way to set this label
-        ,
+      return React.createElement(IconButton, {
+        icon: icons.dismiss,
         "aria-label": "Close modal",
         onClick: onClick || closeModal,
         kind: light ? "primary" : "tertiary",
@@ -979,26 +740,6 @@ class CloseButton extends React.Component {
 
 }
 
-/**
- * ModalPanel is  the content container.
- *
- * **Implementation notes:**
- *
- * If you are creating a custom Dialog, make sure to follow these guidelines:
- * - Make sure to add this component inside the [ModalDialog](/#modaldialog).
- * - If needed, you can also add a [ModalHeader](/#modalheader) using the
- *   `header` prop. Same goes for [ModalFooter](/#modalfooter).
- * - If you need to create e2e tests, make sure to pass a `testId` prop. This
- *   will be passed down to this component using a sufix: e.g.
- *   `some-random-id-ModalPanel`. This scope will be propagated to the
- *   CloseButton element as well: e.g. `some-random-id-CloseButton`.
- *
- * ```js
- * <ModalDialog>
- *      <ModalPanel content={"custom content goes here"} />
- * </ModalDialog>
- * ```
- */
 class ModalPanel extends React.Component {
   renderMainContent() {
     const {
@@ -1006,19 +747,14 @@ class ModalPanel extends React.Component {
       footer,
       scrollOverflow
     } = this.props;
-    const mainContent = ModalContent.isClassOf(content) ? content : /*#__PURE__*/React.createElement(ModalContent, null, content);
+    const mainContent = ModalContent.isClassOf(content) ? content : React.createElement(ModalContent, null, content);
 
     if (!mainContent) {
       return mainContent;
     }
 
-    return /*#__PURE__*/React.cloneElement(mainContent, {
-      // Pass the scrollOverflow and header in to the main content
+    return React.cloneElement(mainContent, {
       scrollOverflow,
-      // We override the styling of the main content to help position
-      // it if there is a footer or close button being
-      // shown. We have to do this here as the ModalContent doesn't
-      // know about things being positioned around it.
       style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
   }
@@ -1034,15 +770,15 @@ class ModalPanel extends React.Component {
       testId
     } = this.props;
     const mainContent = this.renderMainContent();
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: [styles.wrapper, !light && styles.dark, style],
       testId: testId && `${testId}-panel`
-    }, closeButtonVisible && /*#__PURE__*/React.createElement(CloseButton, {
+    }, closeButtonVisible && React.createElement(CloseButton, {
       light: !light,
       onClick: onClose,
       style: styles.closeButton,
       testId: testId && `${testId}-close`
-    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : /*#__PURE__*/React.createElement(ModalFooter, null, footer));
+    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React.createElement(ModalFooter, null, footer));
   }
 
 }
@@ -1067,8 +803,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     right: Spacing.medium_16,
     top: Spacing.medium_16,
-    // This is to allow the button to be tab-ordered before the modal
-    // content but still be above the header and content.
     zIndex: 1
   },
   dark: {
@@ -1080,12 +814,6 @@ const styles = StyleSheet.create({
   }
 });
 
-/**
- * This is the standard layout for most straightforward modal experiences.
- *
- * The ModalHeader is required, but the ModalFooter is optional.
- * The content of the dialog itself is fully customizable, but the left/right/top/bottom padding is fixed.
- */
 class OnePaneDialog extends React.Component {
   renderHeader(uniqueId) {
     const {
@@ -1096,21 +824,21 @@ class OnePaneDialog extends React.Component {
     } = this.props;
 
     if (breadcrumbs) {
-      return /*#__PURE__*/React.createElement(ModalHeader, {
+      return React.createElement(ModalHeader, {
         title: title,
         breadcrumbs: breadcrumbs,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
       });
     } else if (subtitle) {
-      return /*#__PURE__*/React.createElement(ModalHeader, {
+      return React.createElement(ModalHeader, {
         title: title,
         subtitle: subtitle,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
       });
     } else {
-      return /*#__PURE__*/React.createElement(ModalHeader, {
+      return React.createElement(ModalHeader, {
         title: title,
         titleId: uniqueId,
         testId: testId && `${testId}-header`
@@ -1131,21 +859,21 @@ class OnePaneDialog extends React.Component {
       titleId,
       role
     } = this.props;
-    return /*#__PURE__*/React.createElement(MediaLayout, {
+    return React.createElement(MediaLayout, {
       styleSheets: styleSheets
     }, ({
       styles
-    }) => /*#__PURE__*/React.createElement(IDProvider, {
+    }) => React.createElement(IDProvider, {
       id: titleId,
       scope: "modal"
-    }, uniqueId => /*#__PURE__*/React.createElement(ModalDialog, {
+    }, uniqueId => React.createElement(ModalDialog, {
       style: [styles.dialog, style],
       above: above,
       below: below,
       testId: testId,
       "aria-labelledby": uniqueId,
       role: role
-    }, /*#__PURE__*/React.createElement(ModalPanel, {
+    }, React.createElement(ModalPanel, {
       onClose: onClose,
       header: this.renderHeader(uniqueId),
       content: content,
@@ -1177,14 +905,6 @@ const styleSheets = {
   })
 };
 
-/**
- * From a given element, finds its next ancestor that is a modal launcher portal
- * element.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The nearest parent modal launcher portal.
- */
-
 function maybeGetNextAncestorModalLauncherPortal(element) {
   let candidateElement = element && element.parentElement;
 
@@ -1194,15 +914,6 @@ function maybeGetNextAncestorModalLauncherPortal(element) {
 
   return candidateElement;
 }
-/**
- * From a given element, finds the next modal host that has been mounted in
- * a modal portal.
- * @param {?(Element | Text)} element The element whose ancestors are to be
- * walked.
- * @returns {?Element} The next portal-mounted modal host element.
- * TODO(kevinb): look into getting rid of this
- */
-
 
 function maybeGetPortalMountedModalHostElement(element) {
   return maybeGetNextAncestorModalLauncherPortal(element);

package/dist/index.js

@@ -380,7 +380,8 @@ class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       children,
       testId,
-      "aria-labelledby": ariaLabelledBy
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel
     } = this.props;
     const contextValue = {
       ssrSize: "large",
@@ -400,6 +401,7 @@ class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
       style: styles.dialog,
       testId: testId
     }, children), above && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.3.0",
+  "version": "2.3.3",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,15 +16,15 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.29",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.31",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.5",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.29",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.8",
+    "@khanacademy/wonder-blocks-layout": "^1.4.10",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-toolbar": "^2.1.30",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-toolbar": "^2.1.32",
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "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/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -232,6 +232,25 @@ exports[`wonder-blocks-modal example 3 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"

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

@@ -38,10 +38,6 @@ const exampleModalWithButtons = (
 );
 
 describe("ModalBackdrop", () => {
-    beforeEach(() => {
-        jest.useRealTimers();
-    });
-
     afterEach(() => {
         unmountAll();
         if (document.body) {

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

@@ -25,10 +25,6 @@ const exampleModal = (
 );
 
 describe("ModalLauncher", () => {
-    beforeEach(() => {
-        jest.useRealTimers();
-    });
-
     afterEach(() => {
         unmountAll();
         if (document.body) {

package/src/components/modal-dialog.js

@@ -78,6 +78,7 @@ export default class ModalDialog extends React.Component<Props> {
             children,
             testId,
             "aria-labelledby": ariaLabelledBy,
+            "aria-label": ariaLabel,
         } = this.props;
 
         const contextValue: MediaLayoutContextValue = {
@@ -95,6 +96,7 @@ export default class ModalDialog extends React.Component<Props> {
                                 role={role}
                                 aria-modal="true"
                                 aria-labelledby={ariaLabelledBy}
+                                aria-label={ariaLabel}
                                 style={styles.dialog}
                                 testId={testId}
                             >

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

@@ -81,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",
@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     },
 
     below: {
-        background: "url(/modal-below.png)",
+        background: "url(./modal-below.png)",
         width: 868,
         height: 521,
         position: "absolute",