@khanacademy/wonder-blocks-popover 3.0.22 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-popover
 
+## 3.1.0
+
+### Minor Changes
+
+-   7944c7d3: Add `closedFocusId` prop to manually return focus to a specific element
+
+### Patch Changes
+
+-   e5dd6215: Don't return focus to trigger element if the focus has to go to a different interactive element
+-   163cfca3: Fix tab navigation order
+
+## 3.0.23
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon-button@5.1.8
+-   @khanacademy/wonder-blocks-modal@4.2.1
+-   @khanacademy/wonder-blocks-tooltip@2.1.25
+
 ## 3.0.22
 
 ### Patch Changes

package/dist/components/focus-manager.d.ts

@@ -49,11 +49,22 @@ export default class FocusManager extends React.Component<Props> {
     /**
      * 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;
+    /**
+     * The last focusable element inside the popover (if it exists)
+     */
+    lastFocusableElementInPopover: HTMLElement | null | undefined;
     /**
      * Add keydown listeners
      */
     addEventListeners: () => void;
+    removeEventListeners(): void;
+    handleKeydownFirstFocusableElement: (e: KeyboardEvent) => void;
+    handleKeydownLastFocusableElement: (e: KeyboardEvent) => void;
     /**
      * Gets the next focusable element after the anchor element
      */
@@ -67,6 +78,12 @@ export default class FocusManager extends React.Component<Props> {
      * focus will be redirected to the anchor element.
      */
     handleFocusPreviousFocusableElement: () => void;
+    /**
+     * 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?: boolean) => void;
     /**
      * Triggered when the focus is set to the last sentinel. This way, the focus
      * will be redirected to next element after the anchor element.

package/dist/components/popover-event-listener.d.ts

@@ -5,7 +5,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.

package/dist/components/popover.d.ts

@@ -49,6 +49,12 @@ type Props = AriaProps & Readonly<{
      *
      */
     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
@@ -129,10 +135,14 @@ export default class Popover extends React.Component<Props, State> {
      * Popover content ref
      */
     contentRef: React.RefObject<PopoverContent | PopoverContentCore>;
+    /**
+     * Returns focus to a given element.
+     */
+    maybeReturnFocus: () => void;
     /**
      * Popover dialog closed
      */
-    handleClose: () => void;
+    handleClose: (shouldReturnFocus?: boolean) => void;
     /**
      * Popover dialog opened
      */

package/dist/es/index.js

@@ -133,6 +133,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.Component {
   constructor(...args) {
@@ -180,17 +183,49 @@ class FocusManager extends React.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 = () => {
@@ -201,10 +236,14 @@ class FocusManager extends React.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;
     };
@@ -217,13 +256,18 @@ class FocusManager extends React.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();
@@ -231,15 +275,16 @@ class FocusManager extends React.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();
       }
     };
   }
@@ -247,41 +292,53 @@ class FocusManager extends React.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.createElement(React.Fragment, null, React.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusPreviousFocusableElement,
-      style: {
-        position: "fixed"
+    return React.createElement("div", {
+      ref: this.getComponentRootNode,
+      onClick: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onFocus: () => {
+        this.changeFocusabilityInsidePopover(true);
+      },
+      onBlur: () => {
+        this.changeFocusabilityInsidePopover(false);
       }
-    }), React.createElement("div", {
-      ref: this.getComponentRootNode
     }, React.createElement(InitialFocus, {
       initialFocusId: this.props.initialFocusId
-    }, children)), React.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.handleFocusNextFocusableElement,
-      style: {
-        position: "fixed"
-      }
-    }));
+    }, children));
   }
 }
 
@@ -295,7 +352,7 @@ class PopoverEventListener extends React.Component {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        this.props.onClose(true);
       }
     };
     this._handleClick = e => {
@@ -310,7 +367,8 @@ class PopoverEventListener extends React.Component {
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onClose();
+        const shouldReturnFocus = !isFocusable(e.target);
+        this.props.onClose(shouldReturnFocus);
       }
     };
   }
@@ -335,19 +393,36 @@ class Popover extends React.Component {
       placement: this.props.placement
     };
     this.contentRef = React.createRef();
-    this.handleClose = () => {
+    this.maybeReturnFocus = () => {
+      const {
+        anchorElement
+      } = this.state;
+      const {
+        closedFocusId
+      } = this.props;
+      if (closedFocusId) {
+        const focusElement = ReactDOM.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

package/dist/index.js

@@ -164,6 +164,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 +214,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 +267,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 +287,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 +306,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 +323,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 +383,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 +398,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 +424,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

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.22",
+  "version": "3.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -18,10 +18,10 @@
     "@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.7",
-    "@khanacademy/wonder-blocks-modal": "^4.2.0",
+    "@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.24",
+    "@khanacademy/wonder-blocks-tooltip": "^2.1.25",
     "@khanacademy/wonder-blocks-typography": "^2.1.10"
   },
   "peerDependencies": {