@khanacademy/wonder-blocks-modal 2.1.42 → 2.2.0

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

@@ -38,7 +38,7 @@ const customViewports = {
 };
 
 export default {
-    title: "OnePaneDialog",
+    title: "Floating/Modal/OnePaneDialog",
     parameters: {
         viewport: {
             viewports: customViewports,
@@ -50,7 +50,7 @@ export default {
     },
 };
 
-export const simple: StoryComponentType = () => {
+export const Simple: StoryComponentType = () => {
     const modal = (
         <OnePaneDialog
             testId="one-pane-dialog-above"
@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
     },
 });
 
-export const kitchenSink: StoryComponentType = () => {
+export const KitchenSink: StoryComponentType = () => {
     const modal = (
         <OnePaneDialog
             title="Single-line title"
@@ -142,7 +142,7 @@ export const kitchenSink: StoryComponentType = () => {
     );
 };
 
-export const withOpener: StoryComponentType = () => {
+export const WithOpener: StoryComponentType = () => {
     type MyModalProps = {|
         closeModal: () => void,
     |};
@@ -191,14 +191,12 @@ export const withOpener: StoryComponentType = () => {
     );
 };
 
-withOpener.story = {
-    parameters: {
-        viewport: {
-            defaultViewport: null,
-        },
-        chromatic: {
-            // Don't take screenshots of this story since it would only show a button.
-            disable: true,
-        },
+WithOpener.parameters = {
+    viewport: {
+        defaultViewport: null,
+    },
+    chromatic: {
+        // Don't take screenshots of this story since it would only show a button.
+        disableSnapshot: true,
     },
 };

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {ModalLauncherPortalAttributeName} from "./constants.js";
 import maybeGetPortalMountedModalHostElement from "./maybe-get-portal-mounted-modal-host-element.js";
@@ -108,9 +109,8 @@ describe("maybeGetPortalMountedModalHostElement", () => {
                 if (node) {
                     // Act
                     const candidateElement = ReactDOM.findDOMNode(node);
-                    const result = maybeGetPortalMountedModalHostElement(
-                        candidateElement,
-                    );
+                    const result =
+                        maybeGetPortalMountedModalHostElement(candidateElement);
 
                     // Assert
                     expect(result).toBeTruthy();

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.