@khanacademy/wonder-blocks-popover 3.0.23 → 3.1.1

package/dist/index.js

@@ -8,9 +8,8 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTooltip = require('@khanacademy/wonder-blocks-tooltip');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var aphrodite = require('aphrodite');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var Colors = require('@khanacademy/wonder-blocks-color');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 
@@ -36,8 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
-var Colors__default = /*#__PURE__*/_interopDefaultLegacy(Colors);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
@@ -164,6 +161,9 @@ const FOCUSABLE_ELEMENTS = 'button, [href], input, select, textarea, [tabindex]:
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
+function isFocusable(element) {
+  return element.matches(FOCUSABLE_ELEMENTS);
+}
 
 class InitialFocus extends React__namespace.Component {
   constructor(...args) {
@@ -211,17 +211,49 @@ class FocusManager extends React__namespace.Component {
     super(...args);
     this.nextElementAfterPopover = void 0;
     this.rootNode = void 0;
-    this.focusableElementsInPopover = [];
+    this.elementsThatCanBeFocusableInsidePopover = [];
+    this.firstFocusableElementInPopover = null;
+    this.lastFocusableElementInPopover = null;
     this.addEventListeners = () => {
       const {
         anchorElement
       } = this.props;
       if (anchorElement) {
-        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement);
+      }
+      if (this.rootNode) {
+        this.elementsThatCanBeFocusableInsidePopover = findFocusableNodes(this.rootNode);
+        this.firstFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[0];
+        this.lastFocusableElementInPopover = this.elementsThatCanBeFocusableInsidePopover[this.elementsThatCanBeFocusableInsidePopover.length - 1];
       }
       this.nextElementAfterPopover = this.getNextFocusableElement();
+      if (!this.nextElementAfterPopover) {
+        window.addEventListener("blur", () => {
+          this.changeFocusabilityInsidePopover(true);
+        });
+      }
+      if (this.firstFocusableElementInPopover) {
+        this.firstFocusableElementInPopover.addEventListener("keydown", this.handleKeydownFirstFocusableElement);
+      }
+      if (this.lastFocusableElementInPopover) {
+        this.lastFocusableElementInPopover.addEventListener("keydown", this.handleKeydownLastFocusableElement);
+      }
       if (this.nextElementAfterPopover) {
-        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement);
+      }
+    };
+    this.handleKeydownFirstFocusableElement = e => {
+      if (e.key === "Tab" && e.shiftKey) {
+        var _this$props$anchorEle;
+        e.preventDefault();
+        (_this$props$anchorEle = this.props.anchorElement) == null ? void 0 : _this$props$anchorEle.focus();
+      }
+    };
+    this.handleKeydownLastFocusableElement = e => {
+      if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
+        var _this$nextElementAfte;
+        e.preventDefault();
+        (_this$nextElementAfte = this.nextElementAfterPopover) == null ? void 0 : _this$nextElementAfte.focus();
       }
     };
     this.getNextFocusableElement = () => {
@@ -232,10 +264,14 @@ class FocusManager extends React__namespace.Component {
         return;
       }
       const focusableElements = findFocusableNodes(document);
-      const anchorIndex = focusableElements.indexOf(anchorElement);
-      if (anchorIndex >= 0) {
-        const nextElementIndex = anchorIndex < focusableElements.length - 1 ? anchorIndex + 1 : 0;
-        return focusableElements[nextElementIndex];
+      const focusableElementsOutside = focusableElements.filter(element => {
+        const index = this.elementsThatCanBeFocusableInsidePopover.indexOf(element);
+        return index < 0;
+      });
+      const anchorIndex = focusableElementsOutside.indexOf(anchorElement);
+      if (anchorIndex >= 0 && anchorIndex !== focusableElementsOutside.length - 1) {
+        const nextElementIndex = anchorIndex < focusableElementsOutside.length - 1 ? anchorIndex + 1 : 0;
+        return focusableElementsOutside[nextElementIndex];
       }
       return;
     };
@@ -248,13 +284,18 @@ class FocusManager extends React__namespace.Component {
         throw new Error("Assertion error: root node should exist after mount");
       }
       this.rootNode = rootNode;
-      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
     };
     this.handleFocusPreviousFocusableElement = () => {
       if (this.props.anchorElement) {
         this.props.anchorElement.focus();
       }
     };
+    this.changeFocusabilityInsidePopover = (enabled = true) => {
+      const tabIndex = enabled ? "0" : "-1";
+      this.elementsThatCanBeFocusableInsidePopover.forEach(element => {
+        element.setAttribute("tabIndex", tabIndex);
+      });
+    };
     this.handleFocusNextFocusableElement = () => {
       if (this.nextElementAfterPopover) {
         this.nextElementAfterPopover.focus();
@@ -262,15 +303,16 @@ class FocusManager extends React__namespace.Component {
     };
     this.handleKeydownPreviousFocusableElement = e => {
       if (e.key === "Tab" && !e.shiftKey) {
+        var _this$firstFocusableE;
         e.preventDefault();
-        this.focusableElementsInPopover[0].focus();
+        (_this$firstFocusableE = this.firstFocusableElementInPopover) == null ? void 0 : _this$firstFocusableE.focus();
       }
     };
     this.handleKeydownNextFocusableElement = e => {
       if (e.key === "Tab" && e.shiftKey) {
+        var _this$lastFocusableEl;
         e.preventDefault();
-        const lastElementIndex = this.focusableElementsInPopover.length - 1;
-        this.focusableElementsInPopover[lastElementIndex].focus();
+        (_this$lastFocusableEl = this.lastFocusableElementInPopover) == null ? void 0 : _this$lastFocusableEl.focus();
       }
     };
   }
@@ -278,41 +320,53 @@ class FocusManager extends React__namespace.Component {
     this.addEventListeners();
   }
   componentDidUpdate() {
+    this.removeEventListeners();
     this.addEventListeners();
   }
   componentWillUnmount() {
+    this.changeFocusabilityInsidePopover(true);
+    this.removeEventListeners();
+  }
+  removeEventListeners() {
     const {
       anchorElement
     } = this.props;
     if (anchorElement) {
-      setTimeout(() => anchorElement.focus(), 0);
-      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
+      anchorElement.removeEventListener("keydown", this.handleKeydownPreviousFocusableElement);
+    }
+    if (!this.nextElementAfterPopover) {
+      window.removeEventListener("blur", () => {
+        this.changeFocusabilityInsidePopover(true);
+      });
+    }
+    if (this.firstFocusableElementInPopover) {
+      this.firstFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownFirstFocusableElement);
+    }
+    if (this.lastFocusableElementInPopover) {
+      this.lastFocusableElementInPopover.removeEventListener("keydown", this.handleKeydownLastFocusableElement);
     }
     if (this.nextElementAfterPopover) {
-      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
+      this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement);
     }
   }
   render() {
     const {
       children
     } = this.props;
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusPreviousFocusableElement,
-      style: {
-        position: "fixed"
+    return React__namespace.createElement("div", {
+      ref: this.getComponentRootNode,
+      onClick: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onFocus: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onBlur: () => {
+        this.changeFocusabilityInsidePopover(false);
       }
-    }), React__namespace.createElement("div", {
-      ref: this.getComponentRootNode
     }, React__namespace.createElement(InitialFocus, {
       initialFocusId: this.props.initialFocusId
-    }, children)), React__namespace.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusNextFocusableElement,
-      style: {
-        position: "fixed"
-      }
-    }));
+    }, children));
   }
 }
 
@@ -326,7 +380,7 @@ class PopoverEventListener extends React__namespace.Component {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        this.props.onClose(true);
       }
     };
     this._handleClick = e => {
@@ -341,7 +395,8 @@ class PopoverEventListener extends React__namespace.Component {
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        const shouldReturnFocus = !isFocusable(e.target);
+        this.props.onClose(shouldReturnFocus);
       }
     };
   }
@@ -366,19 +421,36 @@ class Popover extends React__namespace.Component {
       placement: this.props.placement
     };
     this.contentRef = React__namespace.createRef();
-    this.handleClose = () => {
+    this.maybeReturnFocus = () => {
+      const {
+        anchorElement
+      } = this.state;
+      const {
+        closedFocusId
+      } = this.props;
+      if (closedFocusId) {
+        const focusElement = ReactDOM__namespace.findDOMNode(document.getElementById(closedFocusId));
+        focusElement == null ? void 0 : focusElement.focus();
+        return;
+      }
+      if (anchorElement) {
+        anchorElement.focus();
+      }
+    };
+    this.handleClose = (shouldReturnFocus = true) => {
       this.setState({
         opened: false
       }, () => {
         var _this$props$onClose, _this$props;
         (_this$props$onClose = (_this$props = this.props).onClose) == null ? void 0 : _this$props$onClose.call(_this$props);
+        if (shouldReturnFocus) {
+          this.maybeReturnFocus();
+        }
       });
     };
     this.handleOpen = () => {
       if (this.props.dismissEnabled && this.state.opened) {
-        this.setState({
-          opened: false
-        });
+        this.handleClose(true);
       } else {
         this.setState({
           opened: true
@@ -531,29 +603,29 @@ PopoverContentCore.defaultProps = {
 };
 const styles$1 = aphrodite.StyleSheet.create({
   content: {
-    borderRadius: Spacing__default["default"].xxxSmall_4,
-    border: `solid 1px ${Colors__default["default"].offBlack16}`,
-    backgroundColor: Colors__default["default"].white,
-    boxShadow: `0 ${Spacing__default["default"].xSmall_8}px ${Spacing__default["default"].xSmall_8}px 0 ${Colors__default["default"].offBlack8}`,
+    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
+    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
+    backgroundColor: wonderBlocksTokens.color.white,
+    boxShadow: `0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,
     margin: 0,
-    maxWidth: Spacing__default["default"].medium_16 * 18,
-    padding: Spacing__default["default"].large_24,
+    maxWidth: wonderBlocksTokens.spacing.medium_16 * 18,
+    padding: wonderBlocksTokens.spacing.large_24,
     overflow: "hidden",
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: Colors__default["default"].blue,
-    color: Colors__default["default"].white
+    backgroundColor: wonderBlocksTokens.color.blue,
+    color: wonderBlocksTokens.color.white
   },
   darkBlue: {
-    backgroundColor: Colors__default["default"].darkBlue,
-    color: Colors__default["default"].white
+    backgroundColor: wonderBlocksTokens.color.darkBlue,
+    color: wonderBlocksTokens.color.white
   },
   closeButton: {
     margin: 0,
     position: "absolute",
-    right: Spacing__default["default"].xxxSmall_4,
-    top: Spacing__default["default"].xxxSmall_4,
+    right: wonderBlocksTokens.spacing.xxxSmall_4,
+    top: wonderBlocksTokens.spacing.xxxSmall_4,
     zIndex: 1
   }
 });
@@ -667,7 +739,7 @@ PopoverContent.defaultProps = {
 };
 const styles = aphrodite.StyleSheet.create({
   actions: {
-    marginTop: Spacing__default["default"].large_24,
+    marginTop: wonderBlocksTokens.spacing.large_24,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end"
@@ -676,15 +748,15 @@ const styles = aphrodite.StyleSheet.create({
     justifyContent: "center"
   },
   title: {
-    marginBottom: Spacing__default["default"].xSmall_8
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
   iconContainer: {
     alignItems: "center",
     justifyContent: "center",
-    height: Spacing__default["default"].xxxLarge_64,
-    width: Spacing__default["default"].xxxLarge_64,
-    minWidth: Spacing__default["default"].xxxLarge_64,
-    marginRight: Spacing__default["default"].medium_16,
+    height: wonderBlocksTokens.spacing.xxxLarge_64,
+    width: wonderBlocksTokens.spacing.xxxLarge_64,
+    minWidth: wonderBlocksTokens.spacing.xxxLarge_64,
+    marginRight: wonderBlocksTokens.spacing.medium_16,
     overflow: "hidden"
   },
   icon: {
@@ -694,15 +766,15 @@ const styles = aphrodite.StyleSheet.create({
     flexDirection: "row"
   },
   image: {
-    marginBottom: Spacing__default["default"].large_24,
-    marginLeft: -Spacing__default["default"].large_24,
-    marginRight: -Spacing__default["default"].large_24,
-    marginTop: -Spacing__default["default"].large_24,
-    width: `calc(100% + ${Spacing__default["default"].large_24 * 2}px)`
+    marginBottom: wonderBlocksTokens.spacing.large_24,
+    marginLeft: -wonderBlocksTokens.spacing.large_24,
+    marginRight: -wonderBlocksTokens.spacing.large_24,
+    marginTop: -wonderBlocksTokens.spacing.large_24,
+    width: `calc(100% + ${wonderBlocksTokens.spacing.large_24 * 2}px)`
   },
   imageToBottom: {
-    marginBottom: -Spacing__default["default"].large_24,
-    marginTop: Spacing__default["default"].large_24,
+    marginBottom: -wonderBlocksTokens.spacing.large_24,
+    marginTop: wonderBlocksTokens.spacing.large_24,
     order: 1
   }
 });

package/dist/util/util.d.ts

@@ -1 +1,6 @@
 export declare function findFocusableNodes(root: HTMLElement | Document): Array<HTMLElement>;
+/**
+ * Checks if an element is focusable
+ * @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
+ */
+export declare function isFocusable(element: HTMLElement): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "3.0.23",
+  "version": "3.1.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,12 +16,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-color": "^3.0.0",
     "@khanacademy/wonder-blocks-core": "^6.3.1",
-    "@khanacademy/wonder-blocks-icon-button": "^5.1.8",
-    "@khanacademy/wonder-blocks-modal": "^4.2.1",
-    "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-tooltip": "^2.1.25",
+    "@khanacademy/wonder-blocks-icon-button": "^5.1.9",
+    "@khanacademy/wonder-blocks-modal": "^4.2.2",
+    "@khanacademy/wonder-blocks-tokens": "^0.2.0",
+    "@khanacademy/wonder-blocks-tooltip": "^2.1.26",
     "@khanacademy/wonder-blocks-typography": "^2.1.10"
   },
   "peerDependencies": {

package/src/components/__tests__/focus-manager.test.tsx

@@ -1,31 +1,19 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import FocusManager from "../focus-manager";
-import {findFocusableNodes} from "../../util/util";
 
 describe("FocusManager", () => {
     it("should focus on the first focusable element inside the popover", async () => {
         // Arrange
-        const ref = await new Promise((resolve: any) => {
-            const nodes = (
-                <div ref={resolve}>
-                    <button>Open popover</button>
-                    <button>Next focusable element outside</button>
-                </div>
-            );
-            render(nodes);
-        });
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-        const domNode = ReactDOM.findDOMNode(ref) as HTMLElement;
-
-        // mock focusable elements in document
-        // eslint-disable-next-line testing-library/no-node-access
-        global.document.querySelectorAll = jest
-            .fn()
-            .mockImplementation(() => findFocusableNodes(domNode));
+        const externalNodes = (
+            <div>
+                <button>Open popover</button>
+                <button>Next focusable element outside</button>
+            </div>
+        );
+        render(externalNodes);
 
         // get the anchor reference to be able pass it to the FocusManager
         const anchorElementNode = screen.getByRole("button", {
@@ -58,23 +46,13 @@ describe("FocusManager", () => {
 
     it("should focus on the last focusable element inside the popover", async () => {
         // Arrange
-        const ref = await new Promise((resolve: any) => {
-            const nodes = (
-                <div ref={resolve}>
-                    <button>Open popover</button>
-                    <button>Next focusable element outside</button>
-                </div>
-            );
-            render(nodes);
-        });
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'ReactInstance | null | undefined'.
-        const domNode = ReactDOM.findDOMNode(ref) as HTMLElement;
-
-        // mock focusable elements in document
-        // eslint-disable-next-line testing-library/no-node-access
-        global.document.querySelectorAll = jest
-            .fn()
-            .mockImplementation(() => findFocusableNodes(domNode));
+        const externalNodes = (
+            <div>
+                <button>Open popover</button>
+                <button>Next focusable element outside</button>
+            </div>
+        );
+        render(externalNodes);
 
         // get the anchor reference to be able pass it to the FocusManager
         const anchorElementNode = screen.getByRole("button", {
@@ -109,4 +87,105 @@ describe("FocusManager", () => {
         // Assert
         expect(lastFocusableElementInside).toHaveFocus();
     });
+
+    it("should allow flowing the focus correctly", async () => {
+        // Arrange
+        const externalNodes = (
+            <div>
+                <button>Prev focusable element outside</button>
+                <button>Open popover</button>
+                <button>Next focusable element outside</button>
+            </div>
+        );
+        render(externalNodes);
+
+        // get the anchor reference to be able pass it to the FocusManager
+        const anchorElementNode = screen.getByRole("button", {
+            name: "Open popover",
+        });
+
+        render(
+            <FocusManager anchorElement={anchorElementNode}>
+                <div>
+                    <button>first focusable element inside</button>
+                </div>
+            </FocusManager>,
+        );
+
+        // Act
+        // 1. focus on the previous element before the popover
+        userEvent.tab();
+
+        // 2. focus on the anchor element
+        userEvent.tab();
+
+        // 3. focus on focusable element inside the popover
+        userEvent.tab();
+
+        // 4. focus on the next focusable element outside the popover (this will
+        //    be the first focusable element outside the popover)
+        userEvent.tab();
+
+        // NOTE: At this point, the focus moves to the document body, so we need
+        // to press tab again to move the focus to the next focusable element.
+        userEvent.tab();
+
+        // 5. Finally focus on the first element in the document
+        userEvent.tab();
+
+        // find previous focusable element outside the popover
+        const prevFocusableElementOutside = screen.getByRole("button", {
+            name: "Prev focusable element outside",
+        });
+
+        // Assert
+        expect(prevFocusableElementOutside).toHaveFocus();
+    });
+
+    it("should disallow focusability on internal elements if the user focus out of the focus manager", async () => {
+        // Arrange
+        const externalNodes = (
+            <div>
+                <button>Prev focusable element outside</button>
+                <button>Open popover</button>
+                <button>Next focusable element outside</button>
+            </div>
+        );
+        render(externalNodes);
+
+        // get the anchor reference to be able pass it to the FocusManager
+        const anchorElementNode = screen.getByRole("button", {
+            name: "Open popover",
+        });
+
+        render(
+            <FocusManager anchorElement={anchorElementNode}>
+                <div>
+                    <button>first focusable element inside</button>
+                </div>
+            </FocusManager>,
+        );
+
+        // Act
+        // 1. focus on the previous element before the popover
+        userEvent.tab();
+
+        // 2. focus on the anchor element
+        userEvent.tab();
+
+        // 3. focus on focusable element inside the popover
+        userEvent.tab();
+
+        // 4. focus on the next focusable element outside the popover (this will
+        //    be the first focusable element outside the popover)
+        userEvent.tab();
+
+        // The elements inside the focus manager should not be focusable anymore.
+        const focusableElementInside = screen.getByRole("button", {
+            name: "first focusable element inside",
+        });
+
+        // Assert
+        expect(focusableElementInside).toHaveAttribute("tabIndex", "-1");
+    });
 });