@astryxdesign/core 0.4.1 → 0.4.2-canary.356d2f9

package/src/hooks/useContainerReveal.test.tsx

@@ -4,13 +4,16 @@
  * @file useContainerReveal.test.tsx
  * @input Uses vitest, @testing-library/react, useContainerReveal
  * @output Unit tests for the enabled/disabled contract, the dynamic isEnabled
- *   prop, the content-option → style-block mapping, and the promise that a
- *   large flat list mounts without dev warnings.
+ *   prop, the container options (hoverDelay, forceState), the per-element
+ *   option → style-block mapping, and the promise that a large flat list
+ *   mounts without dev warnings.
  * @position Testing; validates useContainerReveal.ts.
  *
  * Nesting isolation is a cascade behavior jsdom does not implement, so it is
  * verified in a real browser (Storybook's NestedIsolation story) rather than
- * asserted here.
+ * asserted here. The same goes for what the dwell and the forced states
+ * actually paint: these tests assert the wiring, the browser proves the pixels
+ * (HoverIntentDelay, ForcedVisibility).
  *
  * SYNC: When useContainerReveal.ts changes, update these tests.
  */
@@ -74,6 +77,70 @@ describe('useContainerReveal', () => {
     expect(clipped).not.toBe(preserved);
   });
 
+  it('forceState pins each end of the container to its own style block', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const auto = result.current.getContainerProps().className;
+    const inactive = result.current.getContainerProps({
+      forceState: 'inactive',
+    }).className;
+    const active = result.current.getContainerProps({
+      forceState: 'active',
+    }).className;
+    expect(new Set([auto, inactive, active]).size).toBe(3);
+  });
+
+  it('forceVisibility pins one element, independent of its reveal mode', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const auto = result.current.getContentRevealProps().className;
+    const shown = result.current.getContentRevealProps({
+      forceVisibility: 'shown',
+    }).className;
+    const hidden = result.current.getContentRevealProps({
+      forceVisibility: 'hidden',
+    }).className;
+    expect(new Set([auto, shown, hidden]).size).toBe(3);
+
+    // The layout-preserved variant has no position to flip, so hidden maps to
+    // its own opacity-only block.
+    expect(
+      result.current.getContentRevealProps({
+        forceVisibility: 'hidden',
+        isLayoutPreserved: true,
+      }).className,
+    ).not.toBe(hidden);
+  });
+
+  it('hoverDelay publishes the dwell as an inline custom property', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const {style} = result.current.getContainerProps({hoverDelay: 120});
+    expect(Object.values(style ?? {})).toContain('120ms');
+    expect(result.current.getContainerProps({hoverDelay: 0}).style).toEqual(
+      result.current.getContainerProps().style,
+    );
+  });
+
+  it('hoverDelay and forceState compose on one container', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const props = result.current.getContainerProps({
+      hoverDelay: 120,
+      forceState: 'inactive',
+    });
+    expect(Object.values(props.style ?? {})).toContain('120ms');
+    expect(props.className).not.toBe(
+      result.current.getContainerProps({hoverDelay: 120}).className,
+    );
+  });
+
+  it('ignores container options while disabled', () => {
+    const {result} = renderHook(() => useContainerReveal({isEnabled: false}));
+    expect(
+      result.current.getContainerProps({
+        hoverDelay: 120,
+        forceState: 'inactive',
+      }),
+    ).toEqual({});
+  });
+
   it('mounts a large flat list without a dev warning', () => {
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
     function Row() {

package/src/hooks/useContainerReveal.ts

@@ -20,10 +20,21 @@
  * container shadows its ancestor's state for its own subtree. See
  * containerReveal.stylex.ts.
  *
+ * Two levers sit on top of the pointer, both still CSS-only. On the container:
+ * `hoverDelay` (dwell before the reveal starts — the Tooltip / HoverCard
+ * intent gate applied to a reveal) and `forceState` (pin the trigger state a
+ * caller owns: a motion gate, a scroll, an open menu). On a single piece of
+ * content: `forceVisibility`, which pins how THAT element looks. State belongs
+ * to the container because one container feeds children whose looks are
+ * opposite; appearance belongs to the element, where it is unambiguous.
+ * Neither lever can hide content from a keyboard user — see ACCESSIBILITY.
+ *
  * ACCESSIBILITY (WCAG 2.2 by construction):
  * - Revealed content is visually hidden at rest via position + opacity, so it
  *   stays in the accessibility tree and tab order — never display:none.
- * - Keyboard: revealed on :focus-within, so tabbing in shows it.
+ * - Keyboard: revealed on :focus-within, so tabbing in shows it — with no dwell
+ *   to wait through, and neither an inactive container nor a forced-hidden
+ *   element can keep it dark.
  * - Touch: always visible on coarse pointers; never gated behind hover.
  * - Concealed (inverted) content is a mouse-only visual swap: it ignores
  *   :focus-within (a keyboard user must never watch content vanish) and stays
@@ -50,6 +61,36 @@ export interface UseContainerRevealOptions {
   isEnabled?: boolean;
 }
 
+export interface ContainerRevealOptions {
+  /**
+   * Pin the container's trigger state instead of letting the pointer drive it.
+   * `'active'` reads as pointed-at and `'inactive'` as at rest; omit it — the
+   * default — to leave the container on hover and focus.
+   *
+   * State, not appearance: what each child then looks like is the child's own
+   * business (revealed content fades in on `'active'`, inverted content fades
+   * out). This is the lever for state a caller owns — a motion gate over a
+   * list, a scroll in progress, a row whose menu is open and must stay lit.
+   *
+   * `'inactive'` never overrides keyboard focus or a coarse pointer: the
+   * container still reveals on :focus-within and stays revealed on touch, so
+   * it cannot hide content from a keyboard or touch user.
+   */
+  forceState?: 'active' | 'inactive';
+  /**
+   * Hover-intent gate, in milliseconds: how long the pointer must rest on the
+   * container before the reveal starts. A pointer that passes through leaves
+   * nothing painted behind it, which is what keeps a list of rows quiet while
+   * the cursor sweeps across it.
+   *
+   * Mouse-only, like Tooltip's and HoverCard's `delay`: keyboard focus and
+   * touch reveal immediately. It survives `prefers-reduced-motion` — an intent
+   * gate is timing, not motion.
+   * @default 0
+   */
+  hoverDelay?: number;
+}
+
 export interface ContentRevealOptions {
   /**
    * Conceal-on-hover instead of reveal-on-hover: content is visible at rest
@@ -64,11 +105,27 @@ export interface ContentRevealOptions {
    * @default false
    */
   isLayoutPreserved?: boolean;
+  /**
+   * Pin THIS element's appearance, whatever the container's state: `'shown'`
+   * keeps it visible, `'hidden'` keeps it out. Omit it — the default — to
+   * follow the container.
+   *
+   * Appearance, not state: it says how one element looks, so it is unambiguous
+   * where the container's `forceState` cannot be (a container feeds revealed
+   * and inverted children at once).
+   *
+   * `'hidden'` yields to focus — a forced-hidden element is still mounted and
+   * tabbable, so it reappears when focus lands inside it.
+   */
+  forceVisibility?: 'shown' | 'hidden';
 }
 
 export interface UseContainerRevealReturn {
   /** Spread onto the container whose hover/focus-within drives the reveal. */
-  getContainerProps: () => {className?: string; style?: CSSProperties};
+  getContainerProps: (options?: ContainerRevealOptions) => {
+    className?: string;
+    style?: CSSProperties;
+  };
   /** Spread onto each revealed / concealed child. */
   getContentRevealProps: (options?: ContentRevealOptions) => {
     className?: string;
@@ -87,7 +144,11 @@ const EMPTY = Object.freeze({});
  *   isEnabled: revealOn === 'hover',
  * });
  *
- * <div {...mergeProps(getContainerProps(), stylex.props(styles.row))}>
+ * <div
+ *   {...mergeProps(
+ *     getContainerProps({hoverDelay: 120, forceState: gateState}),
+ *     stylex.props(styles.row),
+ *   )}>
  *   {label}
  *   <span {...mergeProps(getContentRevealProps(), stylex.props(styles.actions))}>
  *     {actions}
@@ -108,10 +169,21 @@ export function useContainerReveal(
       };
     }
     return {
-      getContainerProps: () => stylex.props(styles.container),
+      getContainerProps: (containerOptions: ContainerRevealOptions = {}) => {
+        const {forceState, hoverDelay = 0} = containerOptions;
+        return stylex.props(
+          styles.container,
+          hoverDelay > 0 && styles.hoverDelay(`${hoverDelay}ms`),
+          forceState === 'inactive' && styles.stateInactive,
+          forceState === 'active' && styles.stateActive,
+        );
+      },
       getContentRevealProps: (contentOptions: ContentRevealOptions = {}) => {
-        const {isRevealInverted = false, isLayoutPreserved = false} =
-          contentOptions;
+        const {
+          isRevealInverted = false,
+          isLayoutPreserved = false,
+          forceVisibility,
+        } = contentOptions;
         const style = isRevealInverted
           ? isLayoutPreserved
             ? styles.concealLayoutPreserved
@@ -119,7 +191,14 @@ export function useContainerReveal(
           : isLayoutPreserved
             ? styles.revealLayoutPreserved
             : styles.reveal;
-        return stylex.props(style);
+        return stylex.props(
+          style,
+          forceVisibility === 'shown' && styles.contentShown,
+          forceVisibility === 'hidden' &&
+            (isLayoutPreserved
+              ? styles.contentHiddenLayoutPreserved
+              : styles.contentHidden),
+        );
       },
     };
   }, [isEnabled]);

package/src/hooks/useFocusTrap.test.tsx

@@ -192,6 +192,22 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
     fireEvent.keyDown(document, {key: 'Tab'});
     expect(screen.getByTestId('first')).toHaveFocus();
   });
+
+  it('keeps a programmatic focus target when the trap has no tabbable controls', () => {
+    render(
+      <Trap>
+        <div tabIndex={-1} data-testid="programmatic-target">
+          Read-only dialog content
+        </div>
+      </Trap>,
+    );
+    const target = screen.getByTestId('programmatic-target');
+    target.focus();
+
+    expect(fireEvent.keyDown(target, {key: 'Tab'})).toBe(false);
+    expect(target).toHaveFocus();
+    expect(screen.getByTestId('outside')).not.toHaveFocus();
+  });
 });
 
 describe('FOCUSABLE_SELECTOR href matching', () => {

package/src/hooks/useFocusTrap.ts

@@ -332,12 +332,21 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
         lastFocusRef.current = target as Element;
       } else if (isKeyboardNavigationRef.current) {
         // Focus escaped via keyboard - redirect it back
-        focusFirstDescendant(container);
+        const focusedFirst = focusFirstDescendant(container);
 
         // If we're back at the same element (Shift+Tab from first element),
         // try focusing the last element instead
-        if (lastFocusRef.current === document.activeElement) {
+        if (focusedFirst && lastFocusRef.current === document.activeElement) {
           focusLastDescendant(container);
+        } else if (
+          !focusedFirst &&
+          lastFocusRef.current instanceof HTMLElement &&
+          container.contains(lastFocusRef.current)
+        ) {
+          // A modal surface may intentionally have no tabbable controls and
+          // place initial focus on a tabIndex={-1} heading or panel. Preserve
+          // that programmatic focus target instead of letting Tab escape.
+          attemptFocus(lastFocusRef.current);
         }
 
         lastFocusRef.current = document.activeElement;
@@ -410,6 +419,15 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
 
         const focusable = getFocusableElements(container);
         if (focusable.length === 0) {
+          // 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;
+          }
+          isKeyboardNavigationRef.current = false;
           return;
         }
 

package/src/hooks/useMenuHover.test.tsx

@@ -0,0 +1,364 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useMenuHover.test.tsx
+ * @input Uses vitest, @testing-library/react, TopNavMenu (a real consumer)
+ * @output Unit tests for the shared hover-menu interaction contract (#3121)
+ * @position Testing; exercised through TopNavMenu rather than a synthetic
+ *           harness, so the hook cannot drift from how consumers wire it
+ *
+ * SYNC: When useMenuHover changes, update tests to match new behavior
+ */
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {TopNavMenu} from '../TopNav/TopNavMenu';
+
+const items = [
+  {title: 'Analytics', description: 'Track user behavior', href: '/analytics'},
+  {title: 'Messaging', description: 'Real-time comms', href: '/messaging'},
+];
+
+/** A touchscreen: no hover-capable pointer. */
+function mockPointerlessDevice() {
+  vi.spyOn(window, 'matchMedia').mockImplementation(
+    (query: string) =>
+      ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+  );
+}
+
+function renderMenu() {
+  render(<TopNavMenu label="Products" items={items} />);
+  return screen.getByRole('button', {name: 'Products'});
+}
+
+function firstMenuItem() {
+  return document.querySelector<HTMLElement>('[role="menuitem"]');
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe('useMenuHover — hover/click guard', () => {
+  it('opens on hover after the show delay', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('keeps the menu open when a hover-open is immediately clicked', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('pins a confirmed menu so leaving the trigger no longer closes it', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    await user.click(trigger);
+
+    await user.unhover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('closes on a click that lands well after the hover-open', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    // Past the guard: a deliberate dismissal, not a follow-on.
+    act(() => {
+      vi.advanceTimersByTime(1200);
+    });
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('closes a transient (hover-opened) menu when the pointer leaves', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    await user.unhover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('re-entering the trigger of an open menu does not re-arm the guard', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    // Click-open pins the menu.
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    // Re-entering must not un-pin it, nor make the next click a "confirm".
+    await user.unhover(trigger);
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('stays closed when the panel vanishing puts the trigger back under the pointer', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    // Without suppression, the mouseenter fired when the panel stops covering
+    // the trigger reopens the menu — which made Escape look inert.
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('reopens on a deliberate re-hover once the suppression window passes', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.unhover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('toggles cleanly for click-only interaction', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+describe('useMenuHover — focus management', () => {
+  it('leaves focus on the trigger for a hover-open', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(firstMenuItem()).not.toHaveFocus();
+  });
+
+  it('moves focus to the first item on a click-open, synchronously', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+
+    // No waitFor and no timer flush: a deferred (rAF) focus fails here, which
+    // is the point of the assertion.
+    expect(firstMenuItem()).toHaveFocus();
+  });
+
+  it('moves focus into the menu when a hover-open is confirmed by click', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(firstMenuItem()).not.toHaveFocus();
+
+    await user.click(trigger);
+    expect(firstMenuItem()).toHaveFocus();
+  });
+
+  it('returns focus to the trigger when a click closes the menu', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    expect(firstMenuItem()).toHaveFocus();
+
+    await user.click(trigger);
+    expect(trigger).toHaveFocus();
+  });
+
+  it('returns focus to the trigger on Escape', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    expect(firstMenuItem()).toHaveFocus();
+
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe('useMenuHover — keyboard activation', () => {
+  it('opens on Enter and moves focus into the menu', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+    trigger.focus();
+
+    await user.keyboard('{Enter}');
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(firstMenuItem()).toHaveFocus();
+  });
+
+  it('opens on Space', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+    trigger.focus();
+
+    await user.keyboard(' ');
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('never toggles an open menu closed — it moves focus in instead', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    // A hover-open is the only state where a keyboard user can activate the
+    // trigger of an open menu; closing on Enter would strand them.
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    trigger.focus();
+
+    await user.keyboard('{Enter}');
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(firstMenuItem()).toHaveFocus();
+  });
+
+  it('arrow keys walk the menu items', async () => {
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    const menuItems =
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(menuItems[0]).toHaveFocus();
+
+    await user.keyboard('{ArrowDown}');
+    expect(menuItems[1]).toHaveFocus();
+  });
+});
+
+describe('useMenuHover — devices without hover', () => {
+  it('does not open on a synthetic mouseenter from a tap', async () => {
+    mockPointerlessDevice();
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
+    const trigger = renderMenu();
+
+    // Taps emit a compatibility mouseenter; opening on it leaves a menu
+    // hanging open behind the tap.
+    await user.hover(trigger);
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('still opens and closes on click', async () => {
+    mockPointerlessDevice();
+    const user = userEvent.setup();
+    const trigger = renderMenu();
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+describe('useMenuHover — native invoker wiring', () => {
+  it('registers the trigger as the panel it controls', () => {
+    const trigger = renderMenu();
+
+    // jsdom implements neither light dismiss nor invokers, so this asserts the
+    // wiring; the behavior itself is browser-verified.
+    expect(trigger).toHaveAttribute(
+      'popovertarget',
+      trigger.getAttribute('aria-controls'),
+    );
+  });
+});