@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/src/Typeahead/TypeaheadItem.tsx

@@ -132,7 +132,11 @@ export function TypeaheadItem<T extends SearchableItem>({
   icon,
   description,
   isDisabled = false,
+  group: _group,
   xstyle,
+  className,
+  style,
+  ...rest
 }: TypeaheadItemProps<T>) {
   // If item has a pre-rendered element, use it
   if (item.element) {
@@ -145,7 +149,10 @@ export function TypeaheadItem<T extends SearchableItem>({
       {...mergeProps(
         themeProps('typeahead-item'),
         stylex.props(styles.container, isDisabled && styles.disabled, xstyle),
-      )}>
+        className,
+        style,
+      )}
+      {...rest}>
       {icon}
       <div {...stylex.props(styles.content)}>
         <span {...stylex.props(styles.label)}>{item.label}</span>

package/src/hooks/index.ts

@@ -56,6 +56,8 @@ export type {UseTypeaheadOptions, UseTypeaheadReturn} from './useTypeahead';
 
 export {useMediaQuery} from './useMediaQuery';
 
+export {useMergedRefs} from './useMergedRefs';
+
 export {useOverflow} from './useOverflow';
 export type {UseOverflowOptions, UseOverflowReturn} from './useOverflow';
 

package/src/hooks/useAnnounce.doc.mjs

@@ -0,0 +1,96 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useAnnounce',
+  displayName: 'useAnnounce',
+  keywords: [
+    'announce',
+    'live region',
+    'aria-live',
+    'screen reader',
+    'accessibility',
+    'a11y',
+    'status',
+    'alert',
+    'polite',
+    'assertive',
+    'visually hidden',
+    'wcag',
+  ],
+  params: [],
+  returns: [
+    {
+      name: 'announce',
+      type: '(message: string, politeness?: "polite" | "assertive") => void',
+      description:
+        'Speaks a message through the shared live region. Politeness defaults to "polite"; an empty message clears any lingering status instead of announcing.',
+    },
+  ],
+  usage: {
+    description:
+      'Imperatively announces a message to screen readers through a visually-hidden live region. Use it for state that is only conveyed visually; search result counts, "no results", loading and saved confirmations, validation errors (WCAG 4.1.3 Status Messages). The polite and assertive regions are created empty on first use and stay mounted, which is what makes announcements reliable: most screen readers ignore a live region that is inserted together with its content. Each message is cleared a couple of seconds after it is announced so stale status does not linger in the accessibility tree.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Reach for this instead of hand-rolling an aria-live div; a region rendered with its content usually does not announce at all.',
+      },
+      {
+        guidance: true,
+        description:
+          'Keep "polite" for status and result counts; reserve "assertive" for errors and time-sensitive alerts, since it interrupts whatever the screen reader is saying.',
+      },
+      {
+        guidance: true,
+        description:
+          'Announce the outcome, not the interaction; "12 results" rather than "search ran".',
+      },
+      {
+        guidance: false,
+        description:
+          'Announce content that is already visible and correctly labeled in the DOM; that doubles up for screen reader users.',
+      },
+    ],
+  },
+  relatedComponents: ['VisuallyHidden', 'Toast'],
+  relatedHooks: ['useClipboard'],
+  importPath: '@astryxdesign/core/hooks',
+  category: 'accessibility',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    'Imperative screen-reader announcements via a visually-hidden live region. Polite + assertive regions created empty on first use + kept mounted, so announcements are reliable (most AT ignore a live region inserted together w/ its content). Messages auto-clear after ~2s.',
+  returnDescriptions: {
+    announce:
+      'speaks message through shared live region. politeness defaults "polite"; empty message clears lingering status.',
+  },
+  usage: {
+    description:
+      'Announces visual-only state to screen readers: result counts, "no results", loading / saved confirmations, validation errors (WCAG 4.1.3). Regions mounted empty up front, so updates announce; text auto-clears so stale status does not linger in a11y tree.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use instead of hand-rolled aria-live div; region rendered w/ its content usually does not announce.',
+      },
+      {
+        guidance: true,
+        description:
+          '"polite" for status / counts; "assertive" only for errors + time-sensitive alerts (it interrupts).',
+      },
+      {
+        guidance: true,
+        description:
+          'Announce outcome, not interaction; "12 results", not "search ran".',
+      },
+      {
+        guidance: false,
+        description:
+          'Announce content already visible + labeled in DOM; doubles up for AT users.',
+      },
+    ],
+  },
+};

package/src/hooks/useContainerReveal.doc.mjs

@@ -24,7 +24,7 @@ export const docs = {
     {
       name: 'getContainerProps',
       type: '(options?: ContainerRevealOptions) => {className?: string; style?: CSSProperties}',
-      description: 'Spread onto the container whose hover/focus-within drives the reveal. Accepts hoverDelay (ms the pointer must dwell before the reveal starts — a hover-intent gate like Tooltip\'s and HoverCard\'s delay, so a cursor sweeping across a list leaves nothing painted behind it) and forceState ("active" | "inactive") to pin the trigger state when a caller owns it — a motion gate, a scroll, a row whose menu is open. "inactive" still yields to keyboard focus and coarse pointers.',
+      description: 'Spread onto the container whose hover/focus-within drives the reveal. Accepts hoverDelay (ms the pointer must dwell before the reveal starts: a hover-intent gate like Tooltip\'s and HoverCard\'s delay, so a cursor sweeping across a list leaves nothing painted behind it) and forceState ("active" | "inactive") to pin the trigger state when a caller owns it: a motion gate, a scroll, or a row whose menu is open. "inactive" still yields to keyboard focus and coarse pointers.',
     },
     {
       name: 'getContentRevealProps',
@@ -61,7 +61,7 @@ export const docsDense = {
     'options.isEnabled': 'when false hook is inert: no container styles, content getters return no styles, content always shown. Read every render, so it can flip after mount.',
   },
   returnDescriptions: {
-    getContainerProps: 'spread onto container whose hover/focus-within drives reveal. Accepts hoverDelay (ms dwell before reveal starts — hover-intent gate like Tooltip / HoverCard delay) + forceState ("active" | "inactive") to pin trigger state when a caller owns it. "inactive" yields to keyboard focus + coarse pointers.',
+    getContainerProps: 'spread onto container whose hover/focus-within drives reveal. Accepts hoverDelay (ms dwell before reveal starts: hover-intent gate like Tooltip / HoverCard delay) + forceState ("active" | "inactive") to pin trigger state when a caller owns it. "inactive" yields to keyboard focus + coarse pointers.',
     getContentRevealProps: 'spread onto each revealed / concealed child. Accepts isRevealInverted (conceal-on-hover), isLayoutPreserved (reserve layout box while hidden) + forceVisibility ("shown" | "hidden") to pin this element regardless of container. "hidden" yields to focus.',
   },
   usage: {

package/src/hooks/useDevWarning.doc.mjs

@@ -0,0 +1,96 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useDevWarning',
+  displayName: 'useDevWarning',
+  keywords: [
+    'warning',
+    'dev',
+    'development',
+    'console',
+    'guardrail',
+    'misuse',
+    'invariant',
+    'debug',
+    'devWarn',
+  ],
+  params: [
+    {
+      name: 'component',
+      type: 'string',
+      description: 'Component or hook name, used as the message prefix.',
+      required: true,
+    },
+    {
+      name: 'message',
+      type: 'string',
+      description: 'What went wrong and how to fix it.',
+      required: true,
+    },
+    {
+      name: 'condition',
+      type: 'boolean',
+      description: 'Whether to warn.',
+      default: 'true',
+    },
+  ],
+  returns: [],
+  usage: {
+    description:
+      'Fires a dev-only "Component: message" console warning once per mount while the condition holds. It is the render-safe way for a component to flag misuse: warning straight from the render body repeats on every render, and gating it with state adds a re-render, so this uses a ref and an effect instead. For a warning outside a component, use the imperative devWarn utility.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Say what is wrong and what the builder should do instead; the message is the whole value of the warning.',
+      },
+      {
+        guidance: true,
+        description:
+          'Warn about combinations the types cannot express, such as two mutually exclusive props being set together.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use it for anything a user could see or for runtime error handling; it is stripped from production builds.',
+      },
+    ],
+  },
+  relatedComponents: [],
+  relatedHooks: [],
+  importPath: '@astryxdesign/core/hooks',
+  category: 'utility',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    'Dev-only "Component: message" console warning, once per mount while condition holds. Ref + effect, so it never repeats per render nor causes a re-render. Outside a component, use the imperative devWarn utility.',
+  paramDescriptions: {
+    component: 'component / hook name, used as message prefix.',
+    message: 'what went wrong + how to fix it.',
+    condition: 'whether to warn.',
+  },
+  usage: {
+    description:
+      'Render-safe guardrail warning from inside a component. Stripped from production builds.',
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Say what is wrong + what to do instead; the message is the value.',
+      },
+      {
+        guidance: true,
+        description:
+          'Warn about combinations types cannot express (mutually exclusive props set together).',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for user-visible problems / runtime error handling; it is dev-only.',
+      },
+    ],
+  },
+};

package/src/hooks/useFocusTrap.test.tsx

@@ -208,6 +208,20 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
     expect(target).toHaveFocus();
     expect(screen.getByTestId('outside')).not.toHaveFocus();
   });
+
+  it('leaves Tab alone when focus is outside a trap with no tabbable controls', () => {
+    render(
+      <Trap>
+        <div role="option" tabIndex={-1} data-testid="option">
+          Option
+        </div>
+      </Trap>,
+    );
+    const outside = screen.getByTestId('outside');
+    outside.focus();
+
+    expect(fireEvent.keyDown(outside, {key: 'Tab'})).toBe(true);
+  });
 });
 
 describe('FOCUSABLE_SELECTOR href matching', () => {

package/src/hooks/useFocusTrap.ts

@@ -19,80 +19,26 @@
 import {useCallback, useEffect, useRef} from 'react';
 
 import {FOCUSABLE_SELECTOR} from './focusableSelector';
-import {isImeKeyEvent} from '../utils/ime';
+import {useLayerDismissal} from '../Layer/useLayerDismissal';
 
-/**
- * Module-level stack of active focus-trap Escape handlers.
- *
- * Every active `useFocusTrap` used to attach its own document-level `keydown`
- * listener with no coordination, so a single Escape press closed *every* open
- * layer at once (e.g. a popover nested inside a Dialog closed both). Tracking
- * traps in a shared stack lets only the top-most trap respond to Escape.
- *
- * "Top-most" is resolved by DOM containment first, push order second. Push
- * order alone is not reliable: React runs child effects before parent
- * effects, so when an outer and an inner (DOM-nested) trap mount in the SAME
- * commit, the inner trap pushes first and the outer trap would wrongly win a
- * pure last-pushed comparison.
- */
-interface EscapeStackEntry {
-  handler: () => void;
-  getContainer: () => HTMLElement | null;
-}
-
-const escapeStack: EscapeStackEntry[] = [];
-
-function pushEscapeHandler(entry: EscapeStackEntry): void {
-  escapeStack.push(entry);
-}
-
-function removeEscapeHandler(handler: () => void): void {
-  for (let i = escapeStack.length - 1; i >= 0; i--) {
-    if (escapeStack[i].handler === handler) {
-      escapeStack.splice(i, 1);
-      return;
-    }
-  }
-}
+// Escape-dismissible focus traps currently mounted. This is the whole state
+// behind `hasActiveFocusTrapEscape`, which predates the shared stack and must
+// keep answering about focus traps alone — the stack now carries families that
+// never trapped focus (tooltips, hover cards), and counting those would tell
+// callers a trap is above them when none is.
+let activeEscapeTrapCount = 0;
 
 /**
- * Resolve the top-most trap: walk the stack in push order, keeping the
- * deepest container by DOM containment. When a later entry's container
- * contains the current candidate's container, the candidate is nested inside
- * it and stays on top; otherwise the later push wins (containment for nested
- * traps, push order as the tiebreaker for unrelated ones).
- */
-function isTopEscapeHandler(handler: () => void): boolean {
-  if (escapeStack.length === 0) {
-    return false;
-  }
-  let top = escapeStack[0];
-  for (let i = 1; i < escapeStack.length; i++) {
-    const entry = escapeStack[i];
-    const topContainer = top.getContainer();
-    const entryContainer = entry.getContainer();
-    if (
-      topContainer != null &&
-      entryContainer != null &&
-      entryContainer !== topContainer &&
-      entryContainer.contains(topContainer)
-    ) {
-      // The current top is nested inside this entry — it stays on top.
-      continue;
-    }
-    top = entry;
-  }
-  return top.handler === handler;
-}
-
-/**
- * Whether any focus-trap Escape handler is currently active (i.e. a popover
- * layer is open). Other overlay primitives that manage their own Escape (e.g.
- * Dialog) can consult this to defer to a popover layered on top of them,
- * giving topmost-only dismissal until a full layer stack exists.
+ * Whether an Escape-dismissible focus trap is currently active — a Popover,
+ * menu or other trapped layer that would take an Escape press.
+ *
+ * @deprecated The focus trap no longer owns Escape coordination — every overlay
+ *   family shares one stack (`useLayerDismissal`), which routes each press to
+ *   the top-most layer. A layer that wants the same ordering should join the
+ *   stack rather than ask whether a trap exists.
  */
 export function hasActiveFocusTrapEscape(): boolean {
-  return escapeStack.length > 0;
+  return activeEscapeTrapCount > 0;
 }
 
 /**
@@ -243,6 +189,38 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
   // Track if focus change was triggered by keyboard (Tab key)
   const isKeyboardNavigationRef = useRef(false);
 
+  // Join the shared layer dismissal stack. The trap no longer listens for
+  // Escape itself: the stack owns one listener and routes each press to the
+  // top-most layer, so a popover inside a Dialog, a submenu inside a menu, and
+  // a modal inside a modal all peel off one at a time. A trap with no
+  // `onEscape` is not dismissible and stays off the stack, so a press flows
+  // past it to whatever is underneath.
+  // One expression drives both the stack registration and the deprecated
+  // `hasActiveFocusTrapEscape` count, so the two can never disagree about
+  // whether this trap is active.
+  const isEscapeTrap = isActive && onEscape != null;
+
+  useLayerDismissal({
+    isActive: isEscapeTrap,
+    onDismiss: () => {
+      onEscape?.();
+    },
+    // The trap renders nothing, so it cannot push a depth provider around its
+    // content; hand the stack the container instead so two DOM-nested traps
+    // still resolve in the right order.
+    getContainer: () => containerRef.current,
+  });
+
+  useEffect(() => {
+    if (!isEscapeTrap) {
+      return;
+    }
+    activeEscapeTrapCount += 1;
+    return () => {
+      activeEscapeTrapCount -= 1;
+    };
+  }, [isEscapeTrap]);
+
   /**
    * Focus the first focusable element.
    */
@@ -353,67 +331,43 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
   }, [isActive]);
 
   /**
-   * Handle Tab key to wrap focus at boundaries, and Escape to close.
-   * Also tracks that keyboard navigation is occurring.
+   * Handle Tab key to wrap focus at boundaries. Also tracks that keyboard
+   * navigation is occurring.
+   *
+   * No Escape here, and no IME guard: the shared stack owns the press, claims
+   * a composing Escape so no close request follows, and dismisses the trap
+   * through `onEscape` above. The trap renders no element of its own, so it
+   * has no `cancel` to answer either.
    */
   useEffect(() => {
     if (!isActive) {
       return;
     }
 
-    // Register this trap on the shared Escape stack so only the top-most
-    // active trap responds to Escape. A stable identity per active period is
-    // enough — we push on activate and remove on cleanup. The container is
-    // read lazily: the ref may not be attached yet at effect time, and the
-    // stack resolves top-most by DOM containment at keydown time.
-    const escapeHandler = () => {
-      onEscape?.();
-    };
-    if (onEscape) {
-      pushEscapeHandler({
-        handler: escapeHandler,
-        getContainer: () => containerRef.current,
-      });
-    }
-
     const handleKeyDown = (event: KeyboardEvent) => {
       const container = containerRef.current;
       if (!container) {
         return;
       }
 
-      if (event.key === 'Escape' && onEscape) {
-        // Ignore Escape that is cancelling an IME composition, already handled
-        // by a nested handler, or not targeting the top-most trap.
-        if (
-          event.defaultPrevented ||
-          isImeKeyEvent(event) ||
-          !isTopEscapeHandler(escapeHandler)
-        ) {
-          return;
-        }
-        // Mark handled and stop propagation so an outer layer (e.g. a Dialog
-        // hosting this popover) does not also dismiss on the same press.
-        event.preventDefault();
-        event.stopPropagation();
-        onEscape();
-        return;
-      }
-
       if (event.key === 'Tab') {
         // Mark that keyboard navigation is happening
         isKeyboardNavigationRef.current = true;
 
         const focusable = getFocusableElements(container);
         if (focusable.length === 0) {
+          const active = document.activeElement;
+          if (!(active instanceof HTMLElement) || !container.contains(active)) {
+            // A layer can be open while focus legitimately sits outside it —
+            // a listbox popup anchored to its own input. Cancelling there
+            // would take Tab away from the whole page.
+            return;
+          }
           // There is nowhere to advance to. Keep focus on the current
           // programmatic target (for example a dialog panel with tabIndex=-1)
           // rather than allowing the browser to move into background content.
           event.preventDefault();
-          const active = document.activeElement;
-          if (active instanceof HTMLElement && container.contains(active)) {
-            lastFocusRef.current = active;
-          }
+          lastFocusRef.current = active;
           isKeyboardNavigationRef.current = false;
           return;
         }
@@ -441,9 +395,6 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
 
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
-      if (onEscape) {
-        removeEscapeHandler(escapeHandler);
-      }
     };
   }, [isActive, onEscape]);
 

package/src/hooks/useFocusTrapEscapeShim.test.tsx

@@ -0,0 +1,165 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useFocusTrapEscapeShim.test.tsx
+ * @input Uses vitest, @testing-library/react, useFocusTrap, Dialog, Lightbox,
+ *   MobileNav, Tooltip, Popover
+ * @output Tests that hasActiveFocusTrapEscape still means what it meant in
+ *   0.4.2 — an Escape-dismissible FOCUS TRAP is active, not "a layer is open"
+ * @position Testing; guards the deprecated public shim in useFocusTrap.ts
+ *
+ * The shim is public API. Its answer must not change now that Escape moved to
+ * the shared stack: `BottomSheetSwitcher` gates its own dismissal on it, so a
+ * shim that also counts tooltips, hover cards and dialogs tells the sheet a
+ * trap is above it when none is, and the sheet stops closing.
+ *
+ * SYNC: When useFocusTrap.ts changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {render} from '@testing-library/react';
+
+import {hasActiveFocusTrapEscape, useFocusTrap} from './useFocusTrap';
+import {Dialog} from '../Dialog/Dialog';
+import {Lightbox} from '../Lightbox/Lightbox';
+import {MobileNav} from '../MobileNav/MobileNav';
+import {Popover} from '../Popover/Popover';
+import {Tooltip} from '../Tooltip/Tooltip';
+import {resetLayerStackForTests} from '../Layer/layerStack';
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement,
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+afterEach(() => {
+  resetLayerStackForTests();
+});
+
+function Trap({
+  isActive = true,
+  hasEscape = true,
+  children,
+}: {
+  isActive?: boolean;
+  hasEscape?: boolean;
+  children?: React.ReactNode;
+}) {
+  const {containerRef} = useFocusTrap<HTMLDivElement>({
+    isActive,
+    onEscape: hasEscape ? () => {} : undefined,
+  });
+  return <div ref={containerRef}>{children}</div>;
+}
+
+describe('hasActiveFocusTrapEscape', () => {
+  it('is false with nothing mounted', () => {
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is true for an active trap with an Escape handler', () => {
+    render(<Trap />);
+    expect(hasActiveFocusTrapEscape()).toBe(true);
+  });
+
+  it('is false for a trap with no Escape handler', () => {
+    render(<Trap hasEscape={false} />);
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is false for an inactive trap', () => {
+    render(<Trap isActive={false} />);
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is true for nested traps, and false again once both unmount', () => {
+    const {unmount} = render(
+      <Trap>
+        <Trap />
+      </Trap>,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(true);
+    unmount();
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is true for an open Popover, which traps focus', () => {
+    render(
+      <Popover
+        isOpen={true}
+        onOpenChange={() => {}}
+        content="Popover body"
+        label="Popover">
+        <button type="button">Open</button>
+      </Popover>,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(true);
+  });
+
+  // The families below are all on the shared dismissal stack and none of them
+  // traps focus. Answering `true` for these is what broke the bottom sheet.
+  it('is false for an open Dialog', () => {
+    render(
+      <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Dialog">
+        Body
+      </Dialog>,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is false for an open Lightbox', () => {
+    render(
+      <Lightbox
+        isOpen={true}
+        onOpenChange={() => {}}
+        media={{src: '/photo.jpg', alt: 'A photo'}}
+      />,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is false for an open MobileNav', () => {
+    render(
+      <MobileNav isOpen={true} onOpenChange={() => {}} label="Drawer">
+        <span>Nav</span>
+      </MobileNav>,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is false for a showing Tooltip', () => {
+    render(
+      <Tooltip content="Tip" isDefaultOpen={true}>
+        <button type="button">Trigger</button>
+      </Tooltip>,
+    );
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+
+  it('is true for a Popover inside a Dialog, and false once the Popover closes', () => {
+    function Scene({isPopoverOpen}: {isPopoverOpen: boolean}) {
+      return (
+        <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Dialog">
+          <Popover
+            isOpen={isPopoverOpen}
+            onOpenChange={() => {}}
+            content="Popover body"
+            label="Popover">
+            <button type="button">Open</button>
+          </Popover>
+        </Dialog>
+      );
+    }
+    const {rerender} = render(<Scene isPopoverOpen={true} />);
+    expect(hasActiveFocusTrapEscape()).toBe(true);
+
+    rerender(<Scene isPopoverOpen={false} />);
+    expect(hasActiveFocusTrapEscape()).toBe(false);
+  });
+});