@astryxdesign/core 0.7.5 → 0.7.6-canary.bb18c81

package/src/Avatar/__tests__/AvatarForcedColors.a11y.chromium.spec.ts

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope ^packages/core/src/Avatar/ ^apps/storybook/stories/Avatar
+
+/**
+ * @file AvatarForcedColors.a11y.chromium.spec.ts
+ * @input The built Avatar "Initials Fallback" story in real Chromium, with
+ *   forced colors emulated and without
+ * @output Browser evidence that, in forced colors, a lone Avatar's initials
+ *   take the color around them: CanvasText by default, GrayText inside a control
+ *   that paints itself disabled, HighlightText inside a
+ *   selected one, while grouped faces keep CanvasText on the group's ring;
+ *   outside forced colors they keep the theme's color
+ * @position Regression proof for Avatar's fallback color (Chromium only:
+ *   Playwright's WebKit matches the forced-colors query but forces nothing)
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/**
+ * The initials' color, with `around` painted on `host`: the Avatar's own box
+ * for a lone Avatar, the group's for grouped ones.
+ */
+async function initialsColor(
+  page: Page,
+  forcedColors: 'active' | 'none',
+  around: string | null,
+  {
+    story = 'core-avatar--initials-fallback',
+    host = '.astryx-avatar',
+  }: {story?: string; host?: string} = {},
+): Promise<{initials: string; reference: string}> {
+  await page.emulateMedia({forcedColors});
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story`);
+  await page.locator('.astryx-avatar-fallback').first().waitFor();
+  if (around != null) {
+    await page.addStyleTag({content: `${host} { ${around} }`});
+  }
+  return page.evaluate(() => {
+    const initials = document.querySelector('.astryx-avatar-fallback');
+    // A probe painted with the system color the initials should show.
+    const probe = document.createElement('span');
+    document.body.append(probe);
+    const read = (color: string) => {
+      probe.style.color = color;
+      return getComputedStyle(probe).color;
+    };
+    const result = {
+      initials: initials == null ? '' : getComputedStyle(initials).color,
+      reference: JSON.stringify({
+        CanvasText: read('CanvasText'),
+        GrayText: read('GrayText'),
+        HighlightText: read('HighlightText'),
+      }),
+    };
+    probe.remove();
+    return result;
+  });
+}
+
+test('in forced colors the initials are CanvasText by default', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(page, 'active', null);
+  expect(initials).toBe(JSON.parse(reference).CanvasText);
+});
+
+test('in forced colors the initials take GrayText inside a control that paints itself disabled', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'color: GrayText;',
+  );
+  expect(initials).toBe(JSON.parse(reference).GrayText);
+});
+
+test('in forced colors the initials take HighlightText inside a selected control', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'forced-color-adjust: none; background: Highlight; color: HighlightText;',
+  );
+  expect(initials).toBe(JSON.parse(reference).HighlightText);
+});
+
+test("outside forced colors the initials keep the theme's color, whatever is around them", async ({
+  page,
+}) => {
+  const plain = await initialsColor(page, 'none', null);
+  const around = await initialsColor(page, 'none', 'color: rgb(200, 0, 0);');
+  expect(around.initials).toBe(plain.initials);
+  expect(plain.initials).not.toBe('rgb(200, 0, 0)');
+});
+
+test("in forced colors grouped initials keep CanvasText on the group's ring", async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'color: GrayText;',
+    {
+      story: 'core-avatargroup--initials-fallback',
+      host: '.astryx-avatar-group',
+    },
+  );
+  expect(initials).toBe(JSON.parse(reference).CanvasText);
+});

package/src/BottomSheet/BottomSheet.test.tsx

@@ -1045,6 +1045,52 @@ describe('BottomSheet', () => {
   });
 
   describe('swipe to dismiss', () => {
+    it("a sheet opened from inside another sheet's content drags to dismiss by its own handle, and the covered host neither drags nor takes the pointer (FR6, FR7)", () => {
+      const onInnerOpenChange = vi.fn();
+      const onOuterOpenChange = vi.fn();
+      render(
+        <BottomSheet isOpen onOpenChange={onOuterOpenChange} label="Outer">
+          Outer content
+          <BottomSheet isOpen onOpenChange={onInnerOpenChange} label="Inner">
+            Inner content
+          </BottomSheet>
+        </BottomSheet>,
+      );
+      const dialogs = screen.getAllByRole('dialog', {hidden: true});
+      expect(dialogs).toHaveLength(2);
+      const [outerDialog, innerDialog] = dialogs;
+      // The inner sheet's dialog is rendered inside the outer sheet's body,
+      // so its events bubble through the outer body's gesture listeners.
+      expect(outerDialog.contains(innerDialog)).toBe(true);
+      const outerPanel = outerDialog.querySelector<HTMLElement>(
+        ':scope > .astryx-bottom-sheet',
+      )!;
+      const outerBody = outerPanel.querySelector<HTMLElement>(
+        ':scope > :not([aria-hidden])',
+      )!;
+      const innerHandle = innerDialog.querySelector<HTMLElement>(
+        '.astryx-bottom-sheet > [aria-hidden="true"]',
+      )!;
+      // `setPointerCapture` is a prototype stub here, so record who captures.
+      const captured: Element[] = [];
+      const capture = vi
+        .spyOn(Element.prototype, 'setPointerCapture')
+        .mockImplementation(function (this: Element) {
+          captured.push(this);
+        });
+      drag(innerHandle, [{y: 0}, {y: 40}, {y: 120}], 'touch');
+      capture.mockRestore();
+      // The inner sheet's own drag ran to its dismissal.
+      expect(onInnerOpenChange).toHaveBeenCalledWith(false);
+      // The covered host saw the same pointer bubble up and did nothing with
+      // it: no drag of its own (its panel keeps its resting transform) and no
+      // pointer capture, which would have cancelled the inner handle's drag.
+      expect(onOuterOpenChange).not.toHaveBeenCalled();
+      expect(captured).toContain(innerHandle);
+      expect(captured).not.toContain(outerBody);
+      expect(outerPanel.style.transform).toBe('');
+    });
+
     it('requests close when dragged past the dismiss threshold', () => {
       const onOpenChange = vi.fn();
       render(

package/src/BottomSheet/BottomSheet.tsx

@@ -99,7 +99,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useScrollLock} from '../hooks/useScrollLock';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {useModalOutlet} from '../Layer/modalOutlet';

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -48,7 +48,8 @@ import {
   sizeVars,
   spacingVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, themeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
+import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';

package/src/BottomSheet/useSheetGestures.test.ts

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {act, renderHook} from '@testing-library/react';
 import {
+  isInsideNestedLayer,
   useSheetGestures,
   type UseSheetGesturesOptions,
 } from './useSheetGestures';
@@ -106,6 +107,27 @@ function up(hook: Hook, y: number, t: number, target: HTMLElement) {
   );
 }
 
+describe('isInsideNestedLayer', () => {
+  it("is true for a target inside a <dialog> rendered within the body, and false for the body's own content", () => {
+    const body = document.createElement('div');
+    const own = document.createElement('button');
+    body.append(own);
+    const nested = document.createElement('dialog');
+    const nestedHandle = document.createElement('div');
+    nested.append(nestedHandle);
+    body.append(nested);
+    expect(isInsideNestedLayer(own, body)).toBe(false);
+    expect(isInsideNestedLayer(body, body)).toBe(false);
+    expect(isInsideNestedLayer(nestedHandle, body)).toBe(true);
+    expect(isInsideNestedLayer(nested, body)).toBe(true);
+    // A dialog above the body (the sheet's own) does not count.
+    const ownDialog = document.createElement('dialog');
+    ownDialog.append(body);
+    expect(isInsideNestedLayer(own, body)).toBe(false);
+    expect(isInsideNestedLayer(null, body)).toBe(false);
+  });
+});
+
 describe('useSheetGestures', () => {
   it('dismisses on a fast downward flick (swipe-to-close)', () => {
     const {hook, onDismiss} = setup({snapHeights: () => [200]});
@@ -1213,6 +1235,36 @@ describe('useSheetGestures', () => {
       expect(hook.result.current.isDragging).toBe(true);
     });
 
+    it('leaves a touch that starts inside a nested <dialog> to that layer', () => {
+      // A sheet opened from this sheet's content renders its <dialog> inside
+      // the body, so its touches bubble here. The same pull-down from the
+      // body's own content promotes (see above); from the nested layer it
+      // must not.
+      const {hook} = setup({snapHeights: () => [200]});
+      const {body} = makeNested({
+        bodyScrollTop: 0,
+        innerScrollTop: 0,
+        innerScrollHeight: 200,
+      });
+      const nested = document.createElement('dialog');
+      const nestedHandle = document.createElement('div');
+      nested.appendChild(nestedHandle);
+      body.appendChild(nested);
+      act(() => hook.result.current.sheetRef(body));
+      act(() => hook.result.current.bodyProps.ref(body));
+      let start: Event | undefined;
+      let pull: Event | undefined;
+      act(() => {
+        start = touchOn(nestedHandle, body, 'touchstart', 100);
+        pull = touchOn(nestedHandle, body, 'touchmove', 160);
+      });
+      expect(start?.defaultPrevented).toBe(false);
+      expect(pull?.defaultPrevented).toBe(false);
+      expect(hook.result.current.isDragging).toBe(false);
+      expect(liveOffset(hook)).toBe(0);
+      expect(body.style.transform).toBe('');
+    });
+
     it('leaves a pull-up to a nested scroller with content below', () => {
       const {hook} = setup({snapHeights: () => [200]});
       const {body, tile} = makeNested({bodyScrollTop: 0, innerScrollTop: 100});

package/src/BottomSheet/useSheetGestures.ts

@@ -235,6 +235,33 @@ function isBlockScroller(element: HTMLElement): boolean {
   return overflowY === 'auto' || overflowY === 'scroll';
 }
 
+/**
+ * Whether a gesture that lands on `target` began inside another layer
+ * rendered in this sheet's content — a `<dialog>` between the target and the
+ * body. A sheet opened from inside a sheet's content, a Dialog opened there,
+ * renders its dialog as a descendant of the host's body, so its pointer and
+ * touch events bubble through the host's gesture listeners. That gesture is
+ * the layer's own: the host must neither arm a drag on it nor take pointer
+ * capture for it, which would cancel the drag the layer's own handle began
+ * (`component:BottomSheet` FR7: a swipe reaches only the top sheet of a
+ * stack; FR6: a covered sheet is blocked).
+ */
+export function isInsideNestedLayer(
+  target: EventTarget | null,
+  body: HTMLElement,
+): boolean {
+  for (
+    let element = target instanceof Element ? target : null;
+    element != null && element !== body;
+    element = element.parentElement
+  ) {
+    if (element.localName === 'dialog') {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * The scrollers a gesture that lands on `target` can scroll, innermost first
  * and the body last: every scrollable box between the target and the body,
@@ -1328,10 +1355,13 @@ export function useSheetGestures({
     if (event.button !== 0 || !event.isPrimary) {
       return;
     }
-    const scrollers = scrollChainUnder(
-      event.target,
-      event.currentTarget as HTMLElement,
-    );
+    const body = event.currentTarget as HTMLElement;
+    // A gesture inside a layer this sheet hosts belongs to that layer.
+    if (isInsideNestedLayer(event.target, body)) {
+      armedBodyRef.current = null;
+      return;
+    }
+    const scrollers = scrollChainUnder(event.target, body);
     if (!chainAtTop(scrollers)) {
       armedBodyRef.current = null;
       return;
@@ -1465,8 +1495,9 @@ export function useSheetGestures({
       // At the top, a pull DOWN hands off (collapse); at the bottom, a pull UP
       // hands off (expand). A gesture that starts mid-content is an ordinary
       // scroll, but it is tracked all the same: the scroller can run out of
-      // content while the finger is still down (see onTouchMove).
-      if (!touch) {
+      // content while the finger is still down (see onTouchMove). A touch
+      // inside a layer this sheet hosts is that layer's, never tracked here.
+      if (!touch || isInsideNestedLayer(event.target, body)) {
         touchDragRef.current = null;
         return;
       }

package/src/Breadcrumbs/__tests__/Breadcrumbs.a11y.chromium.spec.ts

@@ -97,15 +97,27 @@ async function runState(
   });
 }
 
-test('every Breadcrumb expectation is exercised by at least one state', async ({
-  page,
-}) => {
-  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 Breadcrumb expectation is exercised by at least one state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of BREADCRUMB_A11Y_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([]);
+
+  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(
+      BREADCRUMB_A11Y_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+  });
 });
 
 for (const state of BREADCRUMB_A11Y_STATES) {

package/src/Button/Button.tsx

@@ -43,8 +43,8 @@ import {
   shadowVars,
   focusVars,
 } from '../theme/tokens.stylex';
-import {Spinner} from '../Spinner';
-import {VisuallyHidden} from '../VisuallyHidden';
+import {Spinner} from '../Spinner/Spinner';
+import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
 import {IconDefaultSizeProvider} from '../Icon/IconDefaultSizeContext';
 import {iconBoxSizeStyles, type IconSize} from '../Icon/IconSize.stylex';
 
@@ -57,7 +57,7 @@ import {
   groupStyles as inputGroupStyles,
   inputGroupItemProps,
 } from '../InputGroup/groupStyles';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
@@ -65,7 +65,7 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useTranslator} from '../i18n';
+import {useTranslator} from '../i18n/useTranslator';
 import type {ButtonVariantMap} from './index';
 
 /**