@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts

@@ -87,23 +87,30 @@ async function runState(
   });
 }
 
-test('every window-splitter expectation is exercised by a ResizeHandle state', async ({
-  page,
-}) => {
-  // One test mounts and checks every binding state in turn: about 20s on an
-  // idle machine, three times that when the contract run shares a runner's
-  // cores, so the default 60s ran out mid-loop on whichever state it reached.
-  // Budget it like the other whole-inventory sweeps (Button, Checkbox).
-  test.setTimeout(3 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every window-splitter expectation is exercised by a ResizeHandle state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of RESIZE_HANDLE_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(RESIZE_HANDLE_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      RESIZE_HANDLE_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(
+      unmatchedKnownFailures(RESIZE_HANDLE_KNOWN_FAILURES, results),
+    ).toEqual([]);
+  });
 });
 
 for (const state of RESIZE_HANDLE_BINDING_STATES) {

package/src/Resizable/useResizable.test.ts

@@ -1680,3 +1680,46 @@ describe('ResizableProps source compatibility (AST-010 API5)', () => {
     expect(prePr._onResizeCancel).toBeUndefined();
   });
 });
+
+describe('useResizable window reads after a commit', () => {
+  // React re-reads a useSyncExternalStore snapshot after the commit whenever
+  // getSnapshot is a new function, and a window size read after the DOM has
+  // changed forces a layout of the whole page. A re-render with unchanged
+  // inputs reads the window during render only.
+  function readsAfterCommit(direction: 'horizontal' | 'vertical') {
+    const reads = {count: 0};
+    const width = vi.spyOn(window, 'innerWidth', 'get');
+    const height = vi.spyOn(window, 'innerHeight', 'get');
+    width.mockImplementation(() => {
+      reads.count += 1;
+      return 1024;
+    });
+    height.mockImplementation(() => {
+      reads.count += 1;
+      return 768;
+    });
+    function Region({tick}: {tick: number}) {
+      useResizable({defaultSize: 240, direction});
+      // Runs in the commit, before passive effects: every read counted
+      // after it happened after the DOM changed.
+      useLayoutEffect(() => {
+        reads.count = 0;
+      });
+      return createElement('div', {'data-tick': tick});
+    }
+    const {rerender} = render(createElement(Region, {tick: 0}));
+    act(() => rerender(createElement(Region, {tick: 1})));
+    const count = reads.count;
+    width.mockRestore();
+    height.mockRestore();
+    return count;
+  }
+
+  it('reads the window width again only during render, not after the commit', () => {
+    expect(readsAfterCommit('horizontal')).toBe(0);
+  });
+
+  it('reads the window height again only during render, not after the commit', () => {
+    expect(readsAfterCommit('vertical')).toBe(0);
+  });
+});

package/src/Resizable/useResizable.ts

@@ -306,6 +306,34 @@ const SERVER_BASIS = 1200;
 
 /** A store that never changes on its own; the snapshot is re-read on render. */
 const noopSubscribe = () => () => {};
+
+// The window snapshots are module functions, so their identity is stable:
+// React re-reads a snapshot after the commit whenever getSnapshot is a new
+// function, and a window size read after the DOM changed forces a layout of
+// the whole page. With these, the window is read during render only.
+
+/** The viewport width, the basis without a container. */
+function readViewportBasis(): number {
+  return typeof window === 'undefined' ? SERVER_BASIS : window.innerWidth;
+}
+
+function readServerBasis(): number {
+  return SERVER_BASIS;
+}
+
+/** The window's extent along a horizontal hook's axis. */
+function readWindowWidth(): number | null {
+  return typeof window === 'undefined' ? null : window.innerWidth;
+}
+
+/** The window's extent along a vertical hook's axis. */
+function readWindowHeight(): number | null {
+  return typeof window === 'undefined' ? null : window.innerHeight;
+}
+
+function readNoWindowExtent(): null {
+  return null;
+}
 const DEFAULT_SIZE_FALLBACK = 250;
 const RESIZABLE_SIZE_GUIDANCE =
   'Use a non-negative number of pixels, an exact "Npx" string, an exact ' +
@@ -698,8 +726,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   );
   const viewportBasis = useSyncExternalStore(
     subscribeToViewport,
-    () => (typeof window === 'undefined' ? SERVER_BASIS : window.innerWidth),
-    () => SERVER_BASIS,
+    readViewportBasis,
+    readServerBasis,
   );
 
   // The window's extent along the hook's axis, for the REPORTED maximum of an
@@ -710,13 +738,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   // (component:Resizable Performance and resources).
   const windowExtent = useSyncExternalStore(
     noopSubscribe,
-    () =>
-      typeof window === 'undefined'
-        ? null
-        : direction === 'vertical'
-          ? window.innerHeight
-          : window.innerWidth,
-    () => null,
+    direction === 'vertical' ? readWindowHeight : readWindowWidth,
+    readNoWindowExtent,
   );
 
   // With a container, its content box is the basis; without one, the released

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -562,6 +562,90 @@ describe('SegmentedControl disabled state', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it("does not run a caller's onClick on a disabled segment", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+    const handleChange = vi.fn();
+
+    render(
+      <SegmentedControl value="grid" onChange={handleChange} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem
+          value="list"
+          label="List"
+          isDisabled
+          onClick={handleClick}
+        />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).not.toHaveBeenCalled();
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it("does not run a caller's onClick when the whole group is disabled", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        isDisabled>
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" onClick={handleClick} />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("does not run a caller's onClick on a focusable disabled segment", async () => {
+    // A group disabled with a reason keeps its selected segment in the tab
+    // order, so Enter and Space can reach it and synthesize a click.
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        isDisabled
+        disabledMessage="Choose a project to switch views">
+        <SegmentedControlItem value="grid" label="Grid" onClick={handleClick} />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+
+    const selected = screen.getByRole('radio', {name: 'Grid'});
+    selected.focus();
+    expect(selected).toHaveFocus();
+    await user.keyboard('{Enter}');
+    await user.keyboard(' ');
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("still runs a caller's onClick on an enabled segment", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+    const handleChange = vi.fn();
+
+    render(
+      <SegmentedControl value="grid" onChange={handleChange} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" onClick={handleClick} />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith('list');
+  });
+
   it('skips disabled items during keyboard navigation', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -210,11 +210,17 @@ export function SegmentedControlItem({
 
   // Consumer-first: a consumer onClick can call preventDefault() to opt out of
   // selection; otherwise selection proceeds when enabled and not selected.
-  const handleClick = composeEventHandlers(onClickProp, () => {
-    if (!isItemDisabled && !isSelected) {
-      ctx.onChange(value);
-    }
-  });
+  // A disabled segment invokes no caller callback (spec:AST-085 FR2), so the
+  // consumer onClick is left out while it is disabled, including the selected
+  // segment of a group disabled with a reason, which stays focusable.
+  const handleClick = composeEventHandlers(
+    isItemDisabled ? undefined : onClickProp,
+    () => {
+      if (!isItemDisabled && !isSelected) {
+        ctx.onChange(value);
+      }
+    },
+  );
 
   const iconElement = icon ? (
     <span {...stylex.props(styles.icon, iconSizeStyles[size])}>{icon}</span>

package/src/Selector/Selector.test.tsx

@@ -9,7 +9,15 @@
  * SYNC: When Selector.tsx API changes, update these tests.
  */
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {
   act,
@@ -61,6 +69,15 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
 }
 
 // Mock showPopover and hidePopover methods since they're not implemented in jsdom
+// The bottom-sheet presentation renders BottomSheet through React.lazy. Its
+// first import transforms the BottomSheet module tree, which on a loaded
+// runner takes longer than a query's 1 s wait, so the first sheet test timed
+// out before the dialog existed. Load the module once up front: lazy() then
+// resolves from the module cache and every sheet test waits only on the open.
+beforeAll(async () => {
+  await import('../BottomSheet/BottomSheet');
+});
+
 beforeEach(() => {
   // The live regions are a document-level singleton; start each test clean.
   __resetLiveRegionsForTest();
@@ -276,6 +293,13 @@ function expectSilentBusySpinner() {
   expect(screen.queryByRole('status', {name: 'Loading'})).toBeNull();
 }
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each test's open waits only for the open.
+beforeAll(async () => {
+  await import('../BottomSheet/BottomSheet');
+});
+
 describe('Selector', () => {
   it('uses a bottom sheet and closes after a selection when requested', async () => {
     const user = userEvent.setup();
@@ -4271,6 +4295,71 @@ describe('Selector popup theme target', () => {
   });
 });
 
+describe('Selector light dismiss focus (spec:Popover AR4)', () => {
+  function closeByLightDismiss() {
+    const popover = document.querySelector('[popover]') as HTMLElement;
+    act(() => {
+      popover.dispatchEvent(
+        Object.assign(new Event('toggle'), {
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+  }
+
+  it('leaves focus on the field a press moved it to', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+          placement="below"
+        />
+        <input aria-label="Notes" />
+      </>,
+    );
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    // The press on another field focuses it before the browser's light
+    // dismiss closes the list.
+    const notes = screen.getByRole('textbox', {name: 'Notes'});
+    act(() => {
+      notes.focus();
+    });
+    closeByLightDismiss();
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(notes).toHaveFocus();
+  });
+
+  it('returns focus to the trigger when the press lands on nothing focusable', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        placement="below"
+      />,
+    );
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+    act(() => {
+      (document.activeElement as HTMLElement | null)?.blur();
+    });
+    closeByLightDismiss();
+
+    expect(trigger).toHaveFocus();
+  });
+});
+
 describe('Selector option-row theme target', () => {
   const ROW_OPTIONS = ['Apple', 'Banana', 'Orange'];
 

package/src/Selector/__tests__/Selector.combobox.a11y.test.tsx

@@ -4,7 +4,7 @@
 
 import {cleanup, render, screen, waitFor, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {describe, expect, it} from 'vitest';
+import {beforeAll, describe, expect, it} from 'vitest';
 import {
   COMBOBOX_PATTERN,
   expectAccessibilitySpec,
@@ -20,6 +20,13 @@ import {SELECTOR_COMBOBOX_KNOWN_FAILURES} from './Combobox.a11y.known-failures';
 
 installListboxDialogStubs();
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each scenario's open waits only for the open.
+beforeAll(async () => {
+  await import('../../BottomSheet/BottomSheet');
+});
+
 const hidden = {hidden: true} as const;
 
 function subjectFor(scenario: SelectorComboboxScenario): HTMLElement {

package/src/Selector/__tests__/Selector.listbox.a11y.test.tsx

@@ -9,7 +9,7 @@
 
 import {cleanup, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {describe, expect, it} from 'vitest';
+import {beforeAll, describe, expect, it} from 'vitest';
 import {
   expectAccessibilitySpec,
   LISTBOX_PATTERN,
@@ -20,6 +20,13 @@ import {installListboxDialogStubs} from './Listbox.a11y.dom';
 
 installListboxDialogStubs();
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each scenario's open waits only for the open.
+beforeAll(async () => {
+  await import('../../BottomSheet/BottomSheet');
+});
+
 const scenarios = LISTBOX_SCENARIOS.filter(
   scenario => scenario.component === 'Selector',
 );

package/src/Selector/useSelectorPresentation.ts

@@ -34,6 +34,13 @@ interface UseSelectorPresentationOptions {
   onShow: () => void;
   popoverOptions: Omit<UsePopoverOptions, 'onHide' | 'onShow'>;
   triggerRef: RefObject<HTMLElement | null>;
+  /**
+   * Return focus to the trigger on every close, even when a press already
+   * moved focus to another element. A caller-rendered trigger needs this
+   * (spec:AST-055 AR3); the built-in trigger leaves focus where the press put
+   * it (spec:Popover AR4).
+   */
+  isFocusReturnAlways?: boolean;
 }
 
 interface SelectorPresentationController {
@@ -55,6 +62,7 @@ export function useSelectorPresentation({
   onShow,
   popoverOptions,
   triggerRef,
+  isFocusReturnAlways = false,
 }: UseSelectorPresentationOptions): SelectorPresentationController {
   const resolvedPresentation = useAdaptivePresentation(presentation);
   const activePresentationRef =
@@ -68,6 +76,9 @@ export function useSelectorPresentation({
   const onHideRef = useRef(onHide);
   const onShowRef = useRef(onShow);
   const didShowPopoverRef = useRef(false);
+  // The open list's container, read when the popover hides to tell focus that
+  // is still inside the list from focus that moved to another element.
+  const popoverContentRef = useRef<HTMLDivElement | null>(null);
   const {
     isFocusRingSuppressed,
     onFocusReturnTargetFocus,
@@ -78,10 +89,26 @@ export function useSelectorPresentation({
   onShowRef.current = onShow;
 
   const handlePopoverHide = useCallback(() => {
-    prepareFocusReturn();
     onHideRef.current();
-    triggerRef.current?.focus();
-  }, [prepareFocusReturn, triggerRef]);
+    const trigger = triggerRef.current;
+    // A light dismiss caused by pressing another focusable element has already
+    // moved focus there; taking it back would leave the next key on this
+    // closed Selector (spec:Popover AR4 returns focus only when it would
+    // otherwise be lost). Escape, a choice in the list, or a press on nothing
+    // focusable still returns focus to the trigger.
+    const active = document.activeElement;
+    const focusLandedElsewhere =
+      !isFocusReturnAlways &&
+      active instanceof HTMLElement &&
+      active !== document.body &&
+      active !== trigger &&
+      !popoverContentRef.current?.contains(active);
+    if (focusLandedElsewhere) {
+      return;
+    }
+    prepareFocusReturn();
+    trigger?.focus();
+  }, [isFocusReturnAlways, prepareFocusReturn, triggerRef]);
   const handlePopoverShow = useCallback(() => {
     didShowPopoverRef.current = true;
     resetFocusReturn();
@@ -92,6 +119,7 @@ export function useSelectorPresentation({
     onHide: handlePopoverHide,
     onShow: handlePopoverShow,
   });
+  popoverContentRef.current = popover.contentRef.current;
   const {hide: hidePopover, show: showPopover} = popover;
 
   const show = useCallback((): boolean => {

package/src/SideNav/SideNav.test.tsx

@@ -492,6 +492,33 @@ describe('SideNavHeading', () => {
       );
     });
 
+    it('moves focus one item per arrow key in a NavHeadingMenu (APG menu)', async () => {
+      __resetMenuPressForTest();
+      const user = userEvent.setup();
+      render(
+        <SideNavHeading
+          heading="My App"
+          menu={
+            <NavHeadingMenu>
+              <NavHeadingMenuItem label="One" onClick={() => {}} />
+              <NavHeadingMenuItem label="Two" onClick={() => {}} />
+              <NavHeadingMenuItem label="Three" onClick={() => {}} />
+            </NavHeadingMenu>
+          }
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Open menu'}));
+      const item = (name: string) =>
+        screen.getByRole('menuitem', {name, hidden: true});
+      item('One').focus();
+      fireEvent.keyDown(item('One'), {key: 'ArrowDown'});
+      expect(item('Two')).toHaveFocus();
+      fireEvent.keyDown(item('Two'), {key: 'ArrowDown'});
+      expect(item('Three')).toHaveFocus();
+      fireEvent.keyDown(item('Three'), {key: 'ArrowUp'});
+      expect(item('Two')).toHaveFocus();
+    });
+
     it('closes when a mouse pressed on a NavHeadingMenu item is released outside the menu (useMenuPress FR3)', async () => {
       __resetMenuPressForTest();
       const user = userEvent.setup();