@astryxdesign/core 0.6.2-canary.bfee8a4 → 0.6.2-canary.c8d5849

package/src/Table/__tests__/TableScroll.a11y.chromium.spec.ts

@@ -0,0 +1,137 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file TableScroll.a11y.chromium.spec.ts
+ * @input Built responsive Table story and real Chromium wheel input
+ * @output Browser evidence for conditional inline containment and scroll chaining
+ * @position Table integration proof for the shared useScrollableArea behavior
+ */
+
+import {expect, test, type Locator, 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();
+});
+
+async function mount(page: Page) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=core-table--responsive-scroll&viewMode=story`,
+  );
+  const wrappers = page.locator('.astryx-table-scroll-wrapper');
+  await expect(wrappers).toHaveCount(3);
+  return wrappers;
+}
+
+async function putInsideOuterScroller(
+  page: Page,
+  viewport: Locator,
+  viewportWidth: number,
+  contentWidth: number,
+  tableWidth: number,
+) {
+  await viewport.evaluate(
+    (node, sizes) => {
+      const outer = document.createElement('div');
+      outer.dataset.tableScrollOuter = '';
+      outer.style.inlineSize = `${sizes.viewportWidth}px`;
+      outer.style.overflowX = 'auto';
+      const content = document.createElement('div');
+      content.style.inlineSize = `${sizes.contentWidth}px`;
+      node.parentElement?.insertBefore(outer, node);
+      outer.append(content);
+      content.append(node);
+      (node as HTMLElement).style.inlineSize = `${sizes.tableWidth}px`;
+    },
+    {viewportWidth, contentWidth, tableWidth},
+  );
+  return page.locator('[data-table-scroll-outer]');
+}
+
+async function wheelInline(page: Page, target: Locator) {
+  const box = await target.boundingBox();
+  if (box == null) {
+    throw new Error('Table scroll viewport has no rendered bounds');
+  }
+  await page.mouse.move(box.x + Math.min(box.width / 2, 100), box.y + 20);
+  await page.mouse.wheel(200, 0);
+}
+
+test('an overflowing table contains horizontal wheel input at its edge', async ({
+  page,
+}) => {
+  const wrappers = await mount(page);
+  const tableViewport = wrappers.nth(0);
+  await tableViewport.locator('table').evaluate(table => {
+    const viewport = table.closest<HTMLElement>('.astryx-table-scroll-wrapper');
+    if (viewport != null) {
+      table.style.minWidth = `${viewport.clientWidth + 400}px`;
+    }
+  });
+  await expect(tableViewport).toHaveAttribute('data-scrollable-inline', 'true');
+  await expect(tableViewport).toHaveAttribute('tabindex', '0');
+  await expect
+    .poll(async () =>
+      tableViewport.evaluate(
+        element => getComputedStyle(element).overscrollBehaviorX,
+      ),
+    )
+    .toBe('contain');
+
+  const outer = await putInsideOuterScroller(
+    page,
+    tableViewport,
+    320,
+    800,
+    320,
+  );
+  await tableViewport.evaluate(element => {
+    element.scrollLeft = element.scrollWidth - element.clientWidth;
+  });
+  await wheelInline(page, tableViewport);
+  await expect
+    .poll(async () => outer.evaluate(element => element.scrollLeft))
+    .toBe(0);
+});
+
+test('a fitting table passes horizontal wheel input to its outer scroller', async ({
+  page,
+}) => {
+  const wrappers = await mount(page);
+  const tableViewport = wrappers.nth(2);
+  const outer = await putInsideOuterScroller(
+    page,
+    tableViewport,
+    320,
+    800,
+    800,
+  );
+
+  await expect(tableViewport).not.toHaveAttribute(
+    'data-scrollable-inline',
+    'true',
+  );
+  await expect(tableViewport).not.toHaveAttribute('tabindex');
+  await expect
+    .poll(async () =>
+      tableViewport.evaluate(
+        element => getComputedStyle(element).overscrollBehaviorX,
+      ),
+    )
+    .toBe('auto');
+
+  await wheelInline(page, tableViewport);
+  await expect
+    .poll(async () => outer.evaluate(element => element.scrollLeft))
+    .toBeGreaterThan(0);
+});

package/src/TextArea/TextArea.tsx

@@ -95,9 +95,14 @@ const styles = stylex.create({
     paddingBlock: spacingVars['--spacing-1'],
     paddingInline: 'var(--_textarea-inline-padding)',
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/TextInput/TextInput.test.tsx

@@ -2,7 +2,8 @@
 
 /**
  * @file TextInput.test.tsx
- * @input Uses vitest, @testing-library/react, TextInput component
+ * @input Uses vitest, @testing-library/react, TextInput component, and the
+ *   shared declaredValue StyleX read-back helper
  * @output Unit tests for TextInput component behavior
  * @position Testing; validates TextInput.tsx implementation
  *
@@ -13,6 +14,7 @@ import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TestIcon} from '../__tests__/TestIcon';
+import {declaredValue} from '../__tests__/stylexDeclarations';
 import {InputGroup} from '../InputGroup';
 import {TextInput} from './TextInput';
 
@@ -1113,3 +1115,20 @@ describe('TextInput clear button focus behavior', () => {
     rafSpy.mockRestore();
   });
 });
+
+describe('TextInput text size', () => {
+  it('renders the theme body size outside the iOS zoom gate', () => {
+    // The 16px floor rides `@supports (-webkit-touch-callout: none)` inside
+    // `@media (pointer: coarse)` — iOS Safari is the browser that zooms on
+    // focus under 16px, so the floor targets it alone instead of every
+    // coarse pointer. jsdom's CSSOM drops at-rule-wrapped declarations it
+    // cannot parse, so the gate itself is pinned against the sources in
+    // inputFontFloor.test.ts; what this asserts is the visible result off
+    // the gate: the plain token size, not a floor.
+    render(<TextInput label="Name" value="" onChange={() => {}} />);
+    expect(declaredValue(screen.getByLabelText('Name'), 'font-size')).toBe(
+      'var(--text-body-size)',
+    );
+  });
+});
+

package/src/TextInput/TextInput.tsx

@@ -58,9 +58,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/TimeInput/TimeInput.tsx

@@ -95,9 +95,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/ToggleButton/ToggleButton.test.tsx

@@ -570,6 +570,139 @@ describe('ToggleButtonGroup (multiple)', () => {
   });
 });
 
+// =============================================================================
+// Disabled state — family:buttons FR3 (disabled means non-operable)
+// =============================================================================
+
+/**
+ * Two ways a ToggleButton becomes unavailable, and the rule that binds them:
+ * a group disables everything it contains, and a member can disable itself
+ * while the group stays enabled. Neither source may cancel the other out.
+ *
+ * The tooltip cases are here at the attribute and callback level only. A
+ * tooltip'd disabled toggle carries `aria-disabled` instead of the native
+ * `disabled` attribute, so whether a REAL mouse press is refused is an engine
+ * fact that jsdom's synthetic click cannot settle — that half lives in
+ * ./__tests__/ToggleButton.a11y.chromium.spec.ts.
+ */
+describe('disabled state', () => {
+  it('keeps a member disabled when the group disables nothing', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButtonGroup value={null} onChange={handleChange} label="View mode">
+        <ToggleButton value="list" label="List" isDisabled />
+        <ToggleButton value="grid" label="Grid" />
+      </ToggleButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'List'})).toBeDisabled();
+
+    await user.click(screen.getByRole('button', {name: 'List'}));
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('leaves the rest of an enabled group selectable', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButtonGroup value={null} onChange={handleChange} label="View mode">
+        <ToggleButton value="list" label="List" isDisabled />
+        <ToggleButton value="grid" label="Grid" />
+      </ToggleButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'Grid'})).toBeEnabled();
+
+    await user.click(screen.getByRole('button', {name: 'Grid'}));
+    expect(handleChange).toHaveBeenCalledWith('grid');
+  });
+
+  it('still disables a member that says nothing when the group is disabled', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButtonGroup
+        value={null}
+        onChange={handleChange}
+        label="View mode"
+        isDisabled>
+        <ToggleButton value="list" label="List" />
+      </ToggleButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'List'})).toBeDisabled();
+
+    await user.click(screen.getByRole('button', {name: 'List'}));
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('keeps a tooltip-bearing disabled member focusable but inert', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButtonGroup value={null} onChange={handleChange} label="View mode">
+        <ToggleButton
+          value="list"
+          label="List"
+          tooltip="List view is unavailable for this dataset"
+          isDisabled
+        />
+      </ToggleButtonGroup>,
+    );
+
+    const member = screen.getByRole('button', {name: 'List'});
+    // The tooltip is the disabled reason, so the control stays reachable to
+    // read it: aria-disabled rather than the native attribute, which would
+    // take it out of the tab order along with its own explanation.
+    expect(member).toHaveAttribute('aria-disabled', 'true');
+    expect(member).not.toBeDisabled();
+
+    await user.click(member);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('does not toggle a standalone disabled toggle that carries a tooltip', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButton
+        label="Bold"
+        tooltip="Formatting is locked for this document"
+        isPressed={false}
+        onPressedChange={handleChange}
+        isDisabled
+      />,
+    );
+
+    const toggle = screen.getByRole('button', {name: 'Bold'});
+    expect(toggle).toHaveAttribute('aria-disabled', 'true');
+
+    await user.click(toggle);
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('still toggles an enabled toggle that carries the same tooltip', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <ToggleButton
+        label="Bold"
+        tooltip="Bold the selected text"
+        isPressed={false}
+        onPressedChange={handleChange}
+      />,
+    );
+
+    const toggle = screen.getByRole('button', {name: 'Bold'});
+    expect(toggle).not.toHaveAttribute('aria-disabled');
+
+    await user.click(toggle);
+    expect(handleChange).toHaveBeenCalledWith(true, expect.anything());
+  });
+});
+
 // jsdom cannot emulate forced-colors rendering, so these assert that the
 // compiled output includes the forced-colors rules; visual behavior needs
 // manual verification under Windows High Contrast.

package/src/ToggleButton/ToggleButton.tsx

@@ -154,7 +154,8 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
 
   /**
    * Whether the button is disabled.
-   * When used inside ToggleButtonGroup, the group's isDisabled overrides this.
+   * When used inside ToggleButtonGroup, a disabled group disables this button
+   * too, but an enabled group does not re-enable a button that disables itself.
    * @default false
    */
   isDisabled?: boolean;
@@ -263,7 +264,13 @@ export function ToggleButton({
       ? group.selectedValues.has(value)
       : (isPressedProp ?? false);
   const size = sizeProp ?? group?.size ?? 'md';
-  const isDisabled = group?.isDisabled ?? isDisabledProp;
+  // Either source disabling this button is enough. `??` could not express that:
+  // the group always supplies a boolean (its own prop defaults to false), so the
+  // fallback never ran and an enabled group handed a member that had disabled
+  // itself its availability back. A group still disables everything it contains
+  // — that is the half `??` got right — but it cannot re-enable a member
+  // (family:buttons FR3).
+  const isDisabled = (group?.isDisabled ?? false) || isDisabledProp;
 
   // Track the pressed state optimistically so the button reflects the intended
   // state immediately while an async action is pending. The optimistic update

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

@@ -0,0 +1,209 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ToggleButton.a11y.chromium.spec.ts
+ * @input Uses @playwright/test, the a11y-spec static Storybook server, and the
+ *   checked-in ToggleButtonDisabledA11y stories
+ * @output Real-browser evidence for `docs/families/buttons.md` FR3 — disabled
+ *   means non-operable — across the two ways a ToggleButton becomes disabled,
+ *   plus the enabled control that catches a fix which disables too much.
+ * @position The half of FR3 that jsdom cannot honestly reach. A disabled toggle
+ *   kept focusable by a tooltip carries `aria-disabled` instead of the native
+ *   `disabled` attribute, so whether a real mouse press is refused is an engine
+ *   fact — jsdom's synthetic click does not settle it
+ *   (`docs/specs/AST-013/spec.md`: a browser claim is made in a browser).
+ *
+ * Each state drives a checked-in story rather than a page this file builds, so
+ * the reproduction path for any failure is a URL a person can open
+ * (`docs/specs/AST-009/spec.md` FR30). Each story counts its own activations,
+ * which is what `activationsOn` reads — a toggle that refuses a press leaves no
+ * trace on itself.
+ *
+ * Presses go through `page.mouse` at the control's own centre rather than
+ * `locator.click()`. Playwright's actionability wait would refuse to press a
+ * natively disabled control at all, which would prove nothing about what the
+ * engine does with a press that really lands.
+ *
+ * SYNC: Fixtures live in
+ *   /apps/storybook/stories/ToggleButtonDisabledA11y.stories.tsx.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+const STORY_BASE = 'a11y-togglebutton-disabled-state';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/** Load a story and wait for the control the assertions press. */
+async function mountStory(page: Page, storyId: string): Promise<void> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${STORY_BASE}--${storyId}&viewMode=story`,
+    {waitUntil: 'load'},
+  );
+  await holdMotionStill(page);
+  await page
+    .locator('#storybook-root')
+    .getByRole('button')
+    .first()
+    .waitFor({state: 'attached'});
+}
+
+/**
+ * How many times this story's own handler has run.
+ *
+ * The story publishes the count as an attribute, so this reads a fact the story
+ * renders rather than instrumenting the page from the test — a person opening
+ * the story sees the same number the spec does.
+ */
+async function activationsOn(page: Page): Promise<number> {
+  const raw = await page
+    .locator('[data-a11y-activations]')
+    .first()
+    .getAttribute('data-a11y-activations');
+  return Number(raw ?? '0');
+}
+
+/**
+ * A real mouse press at the control's own centre, landing whether or not
+ * Playwright would consider the control actionable. This is the press the
+ * expectations are about: a user aiming at a control that looks unavailable.
+ */
+async function pressWithMouse(page: Page, name: string): Promise<void> {
+  const control = page
+    .locator('#storybook-root')
+    .getByRole('button', {name, includeHidden: true})
+    .first();
+  const box = await control.boundingBox();
+  if (box == null) {
+    throw new Error(
+      `"${name}" has no layout box, so no mouse press could land on it`,
+    );
+  }
+  await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+}
+
+/**
+ * Whether the engine reports this control as unavailable, by either of the two
+ * spellings FR3 permits: the native attribute, or focusable `aria-disabled`.
+ */
+async function isUnavailable(page: Page, name: string): Promise<boolean> {
+  return page
+    .locator('#storybook-root')
+    .getByRole('button', {name, includeHidden: true})
+    .first()
+    .evaluate(
+      element =>
+        (element as HTMLButtonElement).disabled ||
+        element.getAttribute('aria-disabled') === 'true',
+    );
+}
+
+test('a member that disables itself stays disabled inside an enabled group', async ({
+  page,
+}) => {
+  await mountStory(page, 'group-enabled-member-disabled');
+
+  expect(
+    await isUnavailable(page, 'List'),
+    'the member sets isDisabled, so it must be exposed as unavailable even though the group disables nothing',
+  ).toBe(true);
+
+  await pressWithMouse(page, 'List');
+  expect(
+    await activationsOn(page),
+    'a disabled member must not invoke the group selection callback (family:buttons FR3)',
+  ).toBe(0);
+});
+
+test('an enabled member of the same group still toggles', async ({page}) => {
+  await mountStory(page, 'group-enabled-member-disabled');
+
+  expect(await isUnavailable(page, 'Grid')).toBe(false);
+
+  await pressWithMouse(page, 'Grid');
+  expect(
+    await activationsOn(page),
+    'the sibling says nothing about its own availability and the group disables nothing, so it must still select',
+  ).toBe(1);
+});
+
+test('a group disabled state still disables a member that says nothing', async ({
+  page,
+}) => {
+  await mountStory(page, 'group-disabled-member-silent');
+
+  expect(await isUnavailable(page, 'List')).toBe(true);
+
+  await pressWithMouse(page, 'List');
+  expect(
+    await activationsOn(page),
+    'a group disabled state overrides member availability (family:buttons FR3)',
+  ).toBe(0);
+});
+
+test('a disabled toggle kept focusable by its tooltip refuses a mouse press', async ({
+  page,
+}) => {
+  await mountStory(page, 'disabled-with-tooltip');
+
+  const control = page.locator('#storybook-root').getByRole('button').first();
+
+  // The tooltip is why this control is focusable rather than natively disabled,
+  // so the press has to be made the way a user reaches it: hover first, let the
+  // tip come up, then press. Pressing cold would skip the hover state the
+  // tooltip's own pointer listeners run in.
+  await control.hover();
+  await expect(page.getByRole('tooltip')).toBeVisible();
+
+  expect(
+    await control.evaluate(element => element.getAttribute('aria-disabled')),
+    'a tooltip keeps the reason reachable by making the control focusable rather than natively disabled',
+  ).toBe('true');
+  expect(await control.getAttribute('aria-pressed')).toBe('false');
+
+  await pressWithMouse(page, 'Bold');
+
+  expect(
+    await activationsOn(page),
+    'focusable is not operable: a disabled toggle must not invoke onPressedChange from a mouse press (family:buttons FR3)',
+  ).toBe(0);
+  expect(
+    await control.getAttribute('aria-pressed'),
+    'the pressed state must not flip',
+  ).toBe('false');
+});
+
+test('an enabled toggle with the same tooltip still toggles on a mouse press', async ({
+  page,
+}) => {
+  await mountStory(page, 'enabled-with-tooltip');
+
+  const control = page.locator('#storybook-root').getByRole('button').first();
+  await control.hover();
+  await expect(page.getByRole('tooltip')).toBeVisible();
+  expect(await control.getAttribute('aria-pressed')).toBe('false');
+
+  await pressWithMouse(page, 'Bold');
+
+  expect(
+    await activationsOn(page),
+    'the enabled path must be untouched by the disabled-state fix',
+  ).toBe(1);
+  expect(await control.getAttribute('aria-pressed')).toBe('true');
+});