@khanacademy/wonder-blocks-popover 3.0.23 → 3.1.1

package/src/components/focus-manager.tsx

@@ -52,6 +52,8 @@ export default class FocusManager extends React.Component<Props> {
     }
 
     componentDidUpdate() {
+        // Ensure that the event listeners are not duplicated.
+        this.removeEventListeners();
         this.addEventListeners();
     }
 
@@ -59,32 +61,26 @@ export default class FocusManager extends React.Component<Props> {
      * Remove keydown listeners
      */
     componentWillUnmount() {
-        const {anchorElement} = this.props;
-
-        if (anchorElement) {
-            // wait for styles to applied, then return the focus to the anchor
-            setTimeout(() => anchorElement.focus(), 0);
-
-            anchorElement.removeEventListener(
-                "keydown",
-                this.handleKeydownPreviousFocusableElement,
-                true,
-            );
-        }
+        // Reset focusability
+        this.changeFocusabilityInsidePopover(true);
 
-        if (this.nextElementAfterPopover) {
-            this.nextElementAfterPopover.removeEventListener(
-                "keydown",
-                this.handleKeydownNextFocusableElement,
-                true,
-            );
-        }
+        this.removeEventListeners();
     }
 
     /**
      * List of focusable elements within the popover content
      */
-    focusableElementsInPopover: Array<HTMLElement> = [];
+    elementsThatCanBeFocusableInsidePopover: Array<HTMLElement> = [];
+
+    /**
+     * The first focusable element inside the popover (if it exists)
+     */
+    firstFocusableElementInPopover: HTMLElement | null | undefined = null;
+
+    /**
+     * The last focusable element inside the popover (if it exists)
+     */
+    lastFocusableElementInPopover: HTMLElement | null | undefined = null;
 
     /**
      * Add keydown listeners
@@ -96,22 +92,113 @@ export default class FocusManager extends React.Component<Props> {
             anchorElement.addEventListener(
                 "keydown",
                 this.handleKeydownPreviousFocusableElement,
-                true,
             );
         }
 
+        if (this.rootNode) {
+            // store the list of possible focusable elements inside the popover
+            this.elementsThatCanBeFocusableInsidePopover = findFocusableNodes(
+                this.rootNode,
+            );
+
+            // find the first and last focusable elements inside the popover
+            this.firstFocusableElementInPopover =
+                this.elementsThatCanBeFocusableInsidePopover[0];
+            this.lastFocusableElementInPopover =
+                this.elementsThatCanBeFocusableInsidePopover[
+                    this.elementsThatCanBeFocusableInsidePopover.length - 1
+                ];
+        }
+
         // tries to get the next focusable element outside of the popover
         this.nextElementAfterPopover = this.getNextFocusableElement();
 
+        // NOTE: This is only needed when the trigger element is the last
+        // focusable element in the document. It's specially useful for when the
+        // focus is set in the address bar and the user presses `shift+tab` to
+        // focus back on the document.
+        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,
             );
         }
     };
 
+    removeEventListeners() {
+        const {anchorElement} = this.props;
+
+        if (anchorElement) {
+            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,
+            );
+        }
+    }
+
+    handleKeydownFirstFocusableElement: (e: KeyboardEvent) => void = (e) => {
+        // It will try focus only if the user is pressing `Shift+tab`
+        if (e.key === "Tab" && e.shiftKey) {
+            e.preventDefault();
+            this.props.anchorElement?.focus();
+        }
+    };
+
+    handleKeydownLastFocusableElement: (e: KeyboardEvent) => void = (e) => {
+        // It will try focus only if the user is pressing `Shift+tab`
+        if (this.nextElementAfterPopover && e.key === "Tab" && !e.shiftKey) {
+            e.preventDefault();
+            this.nextElementAfterPopover?.focus();
+        }
+    };
+
     /**
      * Gets the next focusable element after the anchor element
      */
@@ -125,18 +212,27 @@ export default class FocusManager extends React.Component<Props> {
         // get the total list of focusable elements within the document
         const focusableElements = findFocusableNodes(document);
 
+        const focusableElementsOutside = focusableElements.filter((element) => {
+            const index =
+                this.elementsThatCanBeFocusableInsidePopover.indexOf(element);
+            return index < 0;
+        });
+
         // get anchor element index
-        const anchorIndex = focusableElements.indexOf(anchorElement);
+        const anchorIndex = focusableElementsOutside.indexOf(anchorElement);
 
-        if (anchorIndex >= 0) {
+        if (
+            anchorIndex >= 0 &&
+            anchorIndex !== focusableElementsOutside.length - 1
+        ) {
             // guess next focusable element index
             const nextElementIndex =
-                anchorIndex < focusableElements.length - 1
+                anchorIndex < focusableElementsOutside.length - 1
                     ? anchorIndex + 1
                     : 0;
 
             // get next element's DOM reference
-            return focusableElements[nextElementIndex];
+            return focusableElementsOutside[nextElementIndex];
         }
 
         return;
@@ -161,9 +257,6 @@ export default class FocusManager extends React.Component<Props> {
         }
 
         this.rootNode = rootNode as HTMLElement;
-
-        // store the list of possible focusable elements inside the popover
-        this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
     };
 
     /**
@@ -176,6 +269,21 @@ export default class FocusManager extends React.Component<Props> {
         }
     };
 
+    /**
+     * Toggle focusability for all the focusable elements inside the popover.
+     * This is useful to prevent the user from tabbing into the popover when it
+     * reaches to the last focusable element within the document.
+     */
+    changeFocusabilityInsidePopover = (enabled = true) => {
+        const tabIndex = enabled ? "0" : "-1";
+
+        // Enable/disable focusability for all the focusable elements inside the
+        // popover.
+        this.elementsThatCanBeFocusableInsidePopover.forEach((element) => {
+            element.setAttribute("tabIndex", tabIndex);
+        });
+    };
+
     /**
      * Triggered when the focus is set to the last sentinel. This way, the focus
      * will be redirected to next element after the anchor element.
@@ -195,7 +303,7 @@ export default class FocusManager extends React.Component<Props> {
         // It will try focus only if the user is pressing `tab`
         if (e.key === "Tab" && !e.shiftKey) {
             e.preventDefault();
-            this.focusableElementsInPopover[0].focus();
+            this.firstFocusableElementInPopover?.focus();
         }
     };
 
@@ -207,8 +315,7 @@ export default class FocusManager extends React.Component<Props> {
         // It will try focus only if the user is pressing `Shift+tab`
         if (e.key === "Tab" && e.shiftKey) {
             e.preventDefault();
-            const lastElementIndex = this.focusableElementsInPopover.length - 1;
-            this.focusableElementsInPopover[lastElementIndex].focus();
+            this.lastFocusableElementInPopover?.focus();
         }
     };
 
@@ -216,28 +323,22 @@ export default class FocusManager extends React.Component<Props> {
         const {children} = this.props;
 
         return (
-            <React.Fragment>
-                {/* First sentinel
-                 * We set the sentinels to be position: fixed to make sure
-                 * they're always in view, this prevents page scrolling when
-                 * tabbing. */}
-                <div
-                    tabIndex={0}
-                    onFocus={this.handleFocusPreviousFocusableElement}
-                    style={{position: "fixed"}}
-                />
-                <div ref={this.getComponentRootNode}>
-                    <InitialFocus initialFocusId={this.props.initialFocusId}>
-                        {children}
-                    </InitialFocus>
-                </div>
-                {/* last sentinel */}
-                <div
-                    tabIndex={0}
-                    onFocus={this.handleFocusNextFocusableElement}
-                    style={{position: "fixed"}}
-                />
-            </React.Fragment>
+            <div
+                ref={this.getComponentRootNode}
+                onClick={() => {
+                    this.changeFocusabilityInsidePopover(true);
+                }}
+                onFocus={() => {
+                    this.changeFocusabilityInsidePopover(true);
+                }}
+                onBlur={() => {
+                    this.changeFocusabilityInsidePopover(false);
+                }}
+            >
+                <InitialFocus initialFocusId={this.props.initialFocusId}>
+                    {children}
+                </InitialFocus>
+            </div>
         );
     }
 }

package/src/components/popover-content-core.tsx

@@ -2,9 +2,8 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import Colors from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import CloseButton from "./close-button";
 
@@ -105,13 +104,13 @@ export default class PopoverContentCore extends React.Component<Props> {
 
 const styles = StyleSheet.create({
     content: {
-        borderRadius: Spacing.xxxSmall_4,
-        border: `solid 1px ${Colors.offBlack16}`,
-        backgroundColor: Colors.white,
-        boxShadow: `0 ${Spacing.xSmall_8}px ${Spacing.xSmall_8}px 0 ${Colors.offBlack8}`,
+        borderRadius: spacing.xxxSmall_4,
+        border: `solid 1px ${color.offBlack16}`,
+        backgroundColor: color.white,
+        boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
         margin: 0,
-        maxWidth: Spacing.medium_16 * 18, // 288px
-        padding: Spacing.large_24,
+        maxWidth: spacing.medium_16 * 18, // 288px
+        padding: spacing.large_24,
         overflow: "hidden",
         justifyContent: "center",
     },
@@ -119,13 +118,13 @@ const styles = StyleSheet.create({
      * Theming
      */
     blue: {
-        backgroundColor: Colors.blue,
-        color: Colors.white,
+        backgroundColor: color.blue,
+        color: color.white,
     },
 
     darkBlue: {
-        backgroundColor: Colors.darkBlue,
-        color: Colors.white,
+        backgroundColor: color.darkBlue,
+        color: color.white,
     },
 
     /**
@@ -134,8 +133,8 @@ const styles = StyleSheet.create({
     closeButton: {
         margin: 0,
         position: "absolute",
-        right: Spacing.xxxSmall_4,
-        top: Spacing.xxxSmall_4,
+        right: spacing.xxxSmall_4,
+        top: spacing.xxxSmall_4,
         // Allows the button to be above the title and/or custom content
         zIndex: 1,
     },

package/src/components/popover-content.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import {addStyle, View} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
 
 import type {PopoverContextType} from "./popover-context";
@@ -265,7 +265,7 @@ const styles = StyleSheet.create({
      * Shared styles
      */
     actions: {
-        marginTop: Spacing.large_24,
+        marginTop: spacing.large_24,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "flex-end",
@@ -276,7 +276,7 @@ const styles = StyleSheet.create({
     },
 
     title: {
-        marginBottom: Spacing.xSmall_8,
+        marginBottom: spacing.xSmall_8,
     },
 
     /**
@@ -285,10 +285,10 @@ const styles = StyleSheet.create({
     iconContainer: {
         alignItems: "center",
         justifyContent: "center",
-        height: Spacing.xxxLarge_64,
-        width: Spacing.xxxLarge_64,
-        minWidth: Spacing.xxxLarge_64,
-        marginRight: Spacing.medium_16,
+        height: spacing.xxxLarge_64,
+        width: spacing.xxxLarge_64,
+        minWidth: spacing.xxxLarge_64,
+        marginRight: spacing.medium_16,
         overflow: "hidden",
     },
 
@@ -304,16 +304,16 @@ const styles = StyleSheet.create({
      * Illustration styles
      */
     image: {
-        marginBottom: Spacing.large_24,
-        marginLeft: -Spacing.large_24,
-        marginRight: -Spacing.large_24,
-        marginTop: -Spacing.large_24,
-        width: `calc(100% + ${Spacing.large_24 * 2}px)`,
+        marginBottom: spacing.large_24,
+        marginLeft: -spacing.large_24,
+        marginRight: -spacing.large_24,
+        marginTop: -spacing.large_24,
+        width: `calc(100% + ${spacing.large_24 * 2}px)`,
     },
 
     imageToBottom: {
-        marginBottom: -Spacing.large_24,
-        marginTop: Spacing.large_24,
+        marginBottom: -spacing.large_24,
+        marginTop: spacing.large_24,
         order: 1,
     },
 });

package/src/components/popover-dialog.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TooltipTail} from "@khanacademy/wonder-blocks-tooltip";
-import Color from "@khanacademy/wonder-blocks-color";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
 import type {
@@ -83,7 +83,7 @@ export default class PopoverDialog extends React.Component<Props> {
         const contentProps = children.props as any;
 
         // extract the background color from the popover content
-        const color: keyof typeof Color = contentProps.emphasized
+        const color: keyof typeof tokens.color = contentProps.emphasized
             ? "blue"
             : contentProps.color;
 

package/src/components/popover-event-listener.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import {isFocusable} from "../util/util";
 
 import PopoverContent from "./popover-content";
 import PopoverContentCore from "./popover-content-core";
@@ -8,7 +9,7 @@ type Props = {
     /**
      * Called when `esc` is pressed
      */
-    onClose: () => unknown;
+    onClose: (shouldReturnFocus: boolean) => unknown;
     /**
      * Popover Content ref.
      * Will close the popover when clicking outside this element.
@@ -59,7 +60,9 @@ export default class PopoverEventListener extends React.Component<
             // unexpectedly cancels multiple things.
             e.preventDefault();
             e.stopPropagation();
-            this.props.onClose();
+            // In the case of the Escape key, we should return focus to the
+            // trigger button.
+            this.props.onClose(true);
         }
     };
 
@@ -77,7 +80,13 @@ export default class PopoverEventListener extends React.Component<
             // Only allow click to cancel one thing at a time.
             e.preventDefault();
             e.stopPropagation();
-            this.props.onClose();
+
+            // Determine if the focus must go to a focusable/interactive
+            // element.
+            const shouldReturnFocus = !isFocusable(e.target as any);
+            // If that's the case, we need to prevent the default behavior of
+            // returning the focus to the trigger button.
+            this.props.onClose(shouldReturnFocus);
         }
     };
 

package/src/components/popover.tsx

@@ -69,6 +69,12 @@ type Props = AriaProps &
          *
          */
         id?: string;
+        /**
+         * The selector for the element that will be focused after the popover
+         * dialog closes. When not set, the element that triggered the popover
+         * will be used.
+         */
+        closedFocusId?: string;
         /**
          * The selector for the element that will be focused when the popover
          * content shows. When not set, the first focusable element within the
@@ -171,12 +177,42 @@ export default class Popover extends React.Component<Props, State> {
     contentRef: React.RefObject<PopoverContent | PopoverContentCore> =
         React.createRef();
 
+    /**
+     * Returns focus to a given element.
+     */
+    maybeReturnFocus = () => {
+        const {anchorElement} = this.state;
+        const {closedFocusId} = this.props;
+
+        // Focus on the specified element after dismissing the popover.
+        if (closedFocusId) {
+            const focusElement = ReactDOM.findDOMNode(
+                document.getElementById(closedFocusId),
+            ) as any;
+
+            focusElement?.focus();
+            return;
+        }
+
+        // If no element is specified, focus on the element that triggered the
+        // popover.
+        if (anchorElement) {
+            anchorElement.focus();
+        }
+    };
+
     /**
      * Popover dialog closed
      */
-    handleClose: () => void = () => {
+    handleClose: (shouldReturnFocus?: boolean) => void = (
+        shouldReturnFocus = true,
+    ) => {
         this.setState({opened: false}, () => {
             this.props.onClose?.();
+
+            if (shouldReturnFocus) {
+                this.maybeReturnFocus();
+            }
         });
     };
 
@@ -185,7 +221,7 @@ export default class Popover extends React.Component<Props, State> {
      */
     handleOpen: () => void = () => {
         if (this.props.dismissEnabled && this.state.opened) {
-            this.setState({opened: false});
+            this.handleClose(true);
         } else {
             this.setState({opened: true});
         }

package/src/util/__tests__/util.test.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+import {isFocusable} from "../util";
+
+describe("isFocusable", () => {
+    it("should mark a button as focusable", () => {
+        // Arrange
+        render(<button>Open popover</button>);
+
+        // Act
+        const result = isFocusable(screen.getByRole("button"));
+
+        // Assert
+        expect(result).toBe(true);
+    });
+
+    it("should mark a div as non-focusable", () => {
+        // Arrange
+        render(<div>placeholder</div>);
+
+        // Act
+        const result = isFocusable(screen.getByText("placeholder"));
+
+        // Assert
+        expect(result).toBe(false);
+    });
+
+    it("should mark a div with tabIndex greater than -1 as focusable", () => {
+        // Arrange
+        render(<div tabIndex={0}>placeholder</div>);
+
+        // Act
+        const result = isFocusable(screen.getByText("placeholder"));
+
+        // Assert
+        expect(result).toBe(true);
+    });
+});

package/src/util/util.ts

@@ -10,3 +10,11 @@ export function findFocusableNodes(
 ): Array<HTMLElement> {
     return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
+
+/**
+ * Checks if an element is focusable
+ * @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
+ */
+export function isFocusable(element: HTMLElement): boolean {
+    return element.matches(FOCUSABLE_ELEMENTS);
+}

package/tsconfig-build.json

@@ -6,12 +6,11 @@
         "rootDir": "src",
     },
     "references": [
-        {"path": "../wonder-blocks-color/tsconfig-build.json"},
         {"path": "../wonder-blocks-core/tsconfig-build.json"},
         {"path": "../wonder-blocks-icon/tsconfig-build.json"},
         {"path": "../wonder-blocks-icon-button/tsconfig-build.json"},
         {"path": "../wonder-blocks-modal/tsconfig-build.json"},
-        {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
         {"path": "../wonder-blocks-tooltip/tsconfig-build.json"},
         {"path": "../wonder-blocks-typography/tsconfig-build.json"},
     ]