@astryxdesign/core 0.7.3-canary.b74cf21 → 0.7.3-canary.cb489ff

package/src/Switch/Switch.tsx

@@ -43,7 +43,7 @@ import type {InputStatus} from '../Field/types';
 import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
-import {switchScope} from './switch.markers.stylex';
+import {switchFocusScope, switchScope} from './switch.markers.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -265,12 +265,12 @@ const styles = stylex.create({
   trackFocus: {
     outline: {
       default: 'none',
-      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
+      [stylex.when.ancestor(':has(:focus-visible)', switchFocusScope)]:
         `${focusVars['--focus-outline-width']} ${focusVars['--focus-outline-style']} ${focusVars['--focus-outline-color']}`,
     },
     outlineOffset: {
       default: null,
-      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
+      [stylex.when.ancestor(':has(:focus-visible)', switchFocusScope)]:
         focusVars['--focus-outline-offset'],
     },
   },
@@ -637,17 +637,13 @@ export function Switch({
         id={id}
         type="checkbox"
         role="switch"
-        // Withhold the name while disabled: with a disabledMessage the
-        // input stays focusable (not natively disabled), and a disabled
-        // control must not submit.
+        // Withhold the name while disabled: the input stays focusable (not
+        // natively disabled), and a disabled control must not submit.
         name={isDisabled ? undefined : htmlName}
         checked={isOn}
-        // With a disabledMessage the switch keeps focusability via aria-disabled
-        // so the reason is focus-discoverable; toggling is still blocked by the
-        // isDisabled guard in onChange below.
-        disabled={isDisabled && !showsDisabledMessage}
-        aria-disabled={showsDisabledMessage ? 'true' : undefined}
-        form={showsDisabledMessage ? '' : undefined}
+        // Focusable but detached from the form while disabled (spec:AST-085).
+        aria-disabled={isDisabled ? 'true' : undefined}
+        form={isDisabled ? '' : undefined}
         required={isRequired}
         aria-required={isEffectivelyRequired ? 'true' : undefined}
         onChange={e => {
@@ -693,7 +689,7 @@ export function Switch({
             styles.track,
             trackSizeStyles[size],
             isOn ? styles.trackOn : styles.trackOff,
-            !isDisabled && styles.trackFocus,
+            styles.trackFocus,
             isDisabled && styles.trackDisabled,
             isDisabled && !isOn && styles.trackDisabledOff,
           ),
@@ -747,7 +743,9 @@ export function Switch({
         className,
         style,
       )}
-      {...rest}>
+      {...rest}
+      // Native `disabled` suppressed clicks on the switch (spec:AST-085 FR2).
+      onClick={isDisabled ? undefined : rest.onClick}>
       <div
         ref={el => {
           // Interaction (hover/focus) listeners for the disabled-message
@@ -764,6 +762,7 @@ export function Switch({
           isLabelHidden && styles.containerLabelHidden,
           labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
+          switchFocusScope,
           // The touch press's strength and release live on the row the
           // controller writes to; the track and thumb inherit and paint it.
           !isDisabled && interactionOverlayStyles.pressedAlpha,

package/src/Switch/__tests__/Switch.a11y.states.ts

@@ -147,7 +147,7 @@ export const SWITCH_BINDING_STATES: ReadonlyArray<SwitchBindingState> = [
   },
   {
     id: 'disabled',
-    summary: 'a natively disabled switch, out of the tab sequence',
+    summary: 'a disabled switch that keeps its tab stop',
     storyId: 'core-switch--disabled',
     visibleLabel: 'Premium feature',
     props: {
@@ -159,7 +159,7 @@ export const SWITCH_BINDING_STATES: ReadonlyArray<SwitchBindingState> = [
     facts: {
       checked: false,
       operable: false,
-      focusable: false,
+      focusable: true,
       disabled: true,
       described: true,
       required: false,

package/src/Switch/switch.markers.stylex.ts

@@ -8,3 +8,7 @@ import * as stylex from '@stylexjs/stylex';
  */
 export const switchScope: ReturnType<typeof stylex.defineMarker> =
   stylex.defineMarker();
+
+/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
+export const switchFocusScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/Table/plugins/selection/useTableSelection.test.tsx

@@ -195,9 +195,11 @@ describe('useTableSelection', () => {
   it('disables checkbox for disabled rows', () => {
     render(<SelectionTable getIsItemEnabled={item => !item.isLocked} />);
     const rowCheckboxes = screen.getAllByLabelText('Select row');
-    expect(rowCheckboxes[0]).not.toBeDisabled();
-    expect(rowCheckboxes[1]).not.toBeDisabled();
-    expect(rowCheckboxes[2]).toBeDisabled();
+    expect(rowCheckboxes[0]).not.toHaveAttribute('aria-disabled');
+    expect(rowCheckboxes[1]).not.toHaveAttribute('aria-disabled');
+    // Focusable disabled (spec:AST-085 FR1): aria-disabled, no native disabled.
+    expect(rowCheckboxes[2]).toHaveAttribute('aria-disabled', 'true');
+    expect(rowCheckboxes[2]).not.toHaveAttribute('disabled');
   });
 
   it('prepends selection <td> to each body row', () => {

package/src/TimeInput/TimeInput.doc.mjs

@@ -212,7 +212,7 @@ export const docs = {
       name: 'increment',
       type: 'number',
       description:
-        'Number of minutes to add or subtract when the user presses the up or down arrow key.',
+        'Number of minutes to add or subtract when the user presses the up or down arrow key. Steps are whole minutes; a fractional value leaves the time unchanged.',
       default: '1',
     },
     {
@@ -392,7 +392,8 @@ export const docsZh = {
     {
       name: 'increment',
       type: 'number',
-      description: '用户按上或下方向键时增加或减少的分钟数。',
+      description:
+        '用户按上或下方向键时增加或减少的分钟数。步长为整分钟；传入小数时时间保持不变。',
       default: '1',
     },
     {
@@ -623,7 +624,8 @@ export const docsDense = {
     hasClear: 'Shows clear button when value set+not disabled.',
     hourFormat:
       "Display format. '12h' shows AM/PM; '24h' uses 24-hour notation.",
-    increment: 'Minutes to add/subtract on arrow up/down.',
+    increment:
+      'Minutes to add/subtract on arrow up/down. Whole minutes only; a fractional value leaves the time unchanged.',
     presentation:
       "picker surface: 'adaptive-native' (default) = typed field fine / browser/OS coarse (hasSeconds or increment!=1 retains typed); 'native' = browser/OS always, no fallback; 'adaptive-bottom-sheet' = typed fine / Astryx wheel sheet coarse; 'bottom-sheet' = sheet always; 'text-input'/'popover' = typed field only.",
     nativePicker:

package/src/TimeInput/TimeInput.test.tsx

@@ -65,6 +65,26 @@ describe('TimeInput', () => {
     expect(onChange).toHaveBeenCalledWith('14:31');
   });
 
+  it('does not step into a fractional minute when increment is fractional', () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        increment={0.5}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText('Time');
+
+    // `increment` is documented as minutes and typed `number`. A fractional one
+    // used to reach formatISOTime unrounded, which pads "30.5" to two
+    // characters and leaves it, so the arrow key handed the consumer a value
+    // that is no longer a time at all.
+    fireEvent.keyDown(input, {key: 'ArrowUp'});
+    expect(onChange).toHaveBeenCalledWith('14:30');
+  });
+
   it('displays formatted time in 12h format', () => {
     render(
       <TimeInput

package/src/TimeInput/TimeInput.tsx

@@ -286,7 +286,8 @@ export interface TimeInputProps extends Omit<
   hourFormat?: TimeInputHourFormat;
 
   /**
-   * Increment in minutes when using arrow keys.
+   * Increment in minutes when using arrow keys. Steps are whole minutes: a
+   * fractional value leaves the time unchanged.
    * @default 1
    */
   increment?: number;

package/src/Tooltip/Tooltip.test.tsx

@@ -25,6 +25,7 @@ import {
   fireEvent,
   waitFor,
 } from '@testing-library/react';
+import {useRef} from 'react';
 import {Tooltip} from './Tooltip';
 import {useTooltip} from './useTooltip';
 import {__resetInteractionModalityForTest} from '../utils/interactionModality';
@@ -84,17 +85,15 @@ describe('Tooltip', () => {
     expect(screen.getByRole('button', {name: 'Trigger'})).toBeInTheDocument();
   });
 
-  it('gives the tooltip layer role="tooltip" linked from the trigger', () => {
+  it('renders the content prop inside the tooltip layer', () => {
     render(
       <Tooltip content="Tooltip text">
         <button type="button">Trigger</button>
       </Tooltip>,
     );
-    const layer = screen.getByRole('tooltip', {hidden: true});
-    expect(layer).toHaveTextContent('Tooltip text');
-    // ARIA tooltip pattern: trigger references the layer via aria-describedby.
-    const trigger = screen.getByRole('button', {name: 'Trigger'});
-    expect(trigger.getAttribute('aria-describedby')).toBe(layer.id);
+    expect(screen.getByRole('tooltip', {hidden: true})).toHaveTextContent(
+      'Tooltip text',
+    );
   });
 
   it('calls onOpenChange(true) when shown via hover', async () => {
@@ -604,3 +603,49 @@ describe('Tooltip', () => {
     });
   });
 });
+
+describe('Tooltip sibling mode (anchorRef)', () => {
+  // SideNavItem's collapsed rail tooltip renders the Tooltip inside the very
+  // element anchorRef points at. React attaches an ancestor's ref after its
+  // descendants' layout effects, so on mount the tooltip's effect used to see
+  // a null anchor and never retried (#7692).
+  it('attaches to an anchor it is rendered inside of', async () => {
+    const onOpenChange = vi.fn();
+    function AnchorInside() {
+      const anchorRef = useRef<HTMLDivElement>(null);
+      return (
+        <div ref={anchorRef}>
+          <button type="button">Inner</button>
+          <Tooltip
+            content="Sibling tooltip"
+            anchorRef={anchorRef}
+            delay={0}
+            onOpenChange={onOpenChange}
+          />
+        </div>
+      );
+    }
+
+    const {unmount} = render(<AnchorInside />);
+    const anchor = screen.getByRole('button', {name: 'Inner'})
+      .parentElement as HTMLElement;
+
+    // The anchor is described by the tooltip once the commit has attached refs.
+    await waitFor(() => {
+      expect(anchor.getAttribute('aria-describedby')).not.toBe('');
+    });
+    const layer = screen.getByRole('tooltip', {hidden: true});
+    expect(anchor.getAttribute('aria-describedby')).toBe(layer.id);
+
+    // Hovering the anchor opens the tooltip: the interaction listeners were
+    // attached to the late anchor too.
+    fireEvent.mouseEnter(anchor);
+    await waitFor(() => {
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+
+    // Unmounting detaches: the aria-describedby the tooltip added is removed.
+    unmount();
+    expect(anchor.getAttribute('aria-describedby')).toBe(null);
+  });
+});

package/src/Tooltip/Tooltip.tsx

@@ -242,28 +242,51 @@ export function Tooltip({
       return;
     }
 
+    const attach = (el: HTMLElement) => {
+      // Use combined ref for position + interaction
+      tooltip.ref(el);
+
+      // Set aria-describedby, merging with existing
+      const existingDescribedBy = el.getAttribute('aria-describedby');
+      el.setAttribute(
+        'aria-describedby',
+        mergeIds(existingDescribedBy, tooltip.describedBy) ?? '',
+      );
+
+      return () => {
+        tooltip.ref(null);
+        if (existingDescribedBy) {
+          el.setAttribute('aria-describedby', existingDescribedBy);
+        } else {
+          el.removeAttribute('aria-describedby');
+        }
+      };
+    };
+
     const el = anchorRef.current;
-    if (!el) {
-      return;
+    if (el) {
+      return attach(el);
     }
 
-    // Use combined ref for position + interaction
-    tooltip.ref(el);
-
-    // Set aria-describedby, merging with existing
-    const existingDescribedBy = el.getAttribute('aria-describedby');
-    el.setAttribute(
-      'aria-describedby',
-      mergeIds(existingDescribedBy, tooltip.describedBy) ?? '',
-    );
-
-    return () => {
-      tooltip.ref(null);
-      if (existingDescribedBy) {
-        el.setAttribute('aria-describedby', existingDescribedBy);
-      } else {
-        el.removeAttribute('aria-describedby');
+    // React attaches an ancestor's ref after its descendants' layout effects,
+    // so a tooltip rendered inside its own anchor (SideNavItem's collapsed
+    // rail tooltip) still sees null here on mount, and this effect's deps
+    // never change to re-run it. Re-check once the commit has attached all
+    // refs; if the anchor is still gone, this tooltip has no anchor, as before.
+    let detach: (() => void) | undefined;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) {
+        return;
       }
+      const el = anchorRef.current;
+      if (el) {
+        detach = attach(el);
+      }
+    });
+    return () => {
+      cancelled = true;
+      detach?.();
     };
   }, [anchorRef, tooltip.ref, tooltip.describedBy]);
 

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

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Tooltip.a11y.chromium.spec.ts
+ * @input Built tooltip stories and TOOLTIP_PATTERN in real Chromium
+ * @output Browser evidence for every tooltip expectation across Tooltip's and useTooltip's representative states
+ * @position Chromium lane of the Tooltip binding
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  TOOLTIP_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  type BindingResult,
+} from '@astryxdesign/a11y-spec';
+import {
+  createChromiumHarness,
+  holdMotionStill,
+} from '@astryxdesign/a11y-spec/chromium';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+import {
+  TOOLTIP_BINDING_STATES,
+  type TooltipBindingState,
+} from './Tooltip.a11y.states';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+function storyUrl(storyId: string): string {
+  return `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`;
+}
+
+async function mountState(
+  page: Page,
+  state: TooltipBindingState,
+): Promise<{subject: Locator; related: Record<string, Locator>}> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  const root = page.locator('#storybook-root');
+  const subject =
+    state.triggerRole == null
+      ? root.getByText(state.triggerText, {exact: true})
+      : root.getByRole(state.triggerRole, {
+          name: state.triggerText,
+          exact: true,
+        });
+  await expect(subject).toBeVisible();
+  return {
+    subject,
+    related: {
+      // The layer may mount the tooltip outside the story root, and it stays
+      // in the page while hidden, so it is found page-wide, hidden included.
+      tooltip: page.getByRole('tooltip', {includeHidden: true}),
+      before: root.getByRole('button', {
+        name: 'Before the trigger',
+        exact: true,
+      }),
+      after: root.getByRole('button', {
+        name: 'After the trigger',
+        exact: true,
+      }),
+    },
+  };
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: TooltipBindingState,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: TOOLTIP_PATTERN,
+    binding: 'Tooltip',
+    state: state.id,
+    facts: state.facts,
+    mount: async () => {
+      const {subject, related} = await mountState(page, state);
+      return createChromiumHarness({page, cdp, subject, related});
+    },
+  });
+}
+
+test('every tooltip expectation is exercised by a Tooltip state', async ({
+  page,
+}) => {
+  test.setTimeout(3 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of TOOLTIP_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+});
+
+for (const state of TOOLTIP_BINDING_STATES) {
+  test(`Tooltip [${state.id}] — ${state.summary}`, async ({page}) => {
+    test.setTimeout(2 * 60 * 1000);
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(TOOLTIP_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/Tooltip/__tests__/Tooltip.a11y.renders.tsx

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Tooltip.a11y.renders.tsx
+ * @input One tooltip binding state from Tooltip.a11y.states.ts
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook): a page button before the trigger, the trigger and its tooltip, and a page button after it
+ * @position Shared fixture for the Tooltip and useTooltip binding
+ */
+
+import {useRef, type ReactElement} from 'react';
+import {Button} from '../../Button/Button';
+import {isRenderable} from '../../utils/isRenderable';
+import {Tooltip} from '../Tooltip';
+import {useTooltip} from '../useTooltip';
+import type {TooltipBindingState} from './Tooltip.a11y.states';
+
+const HINT_ID = 'tooltip-a11y-hint';
+
+type TriggerState = Pick<
+  TooltipBindingState,
+  'attachment' | 'triggerText' | 'content' | 'hint'
+>;
+
+/** A caller button the tooltip attaches to through `anchorRef`. */
+function AnchorRefTrigger({state}: {state: TriggerState}): ReactElement {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  return (
+    <>
+      <button
+        ref={anchorRef}
+        type="button"
+        aria-describedby={state.hint == null ? undefined : HINT_ID}>
+        {state.triggerText}
+      </button>
+      <Tooltip anchorRef={anchorRef} content={state.content} />
+    </>
+  );
+}
+
+/** A caller button wired by hand through `useTooltip`. */
+function HookTrigger({state}: {state: TriggerState}): ReactElement {
+  const tooltip = useTooltip();
+  return (
+    <>
+      <button
+        ref={tooltip.ref}
+        type="button"
+        aria-describedby={tooltip.describedBy}>
+        {state.triggerText}
+      </button>
+      {tooltip.renderTooltip(state.content)}
+    </>
+  );
+}
+
+function Trigger({state}: {state: TriggerState}): ReactElement {
+  switch (state.attachment) {
+    case 'wrapped-element':
+      return (
+        <Tooltip content={state.content}>
+          <Button label={state.triggerText} />
+        </Tooltip>
+      );
+    case 'text':
+      return <Tooltip content={state.content}>{state.triggerText}</Tooltip>;
+    case 'anchor-ref':
+      return <AnchorRefTrigger state={state} />;
+    case 'hook':
+      return <HookTrigger state={state} />;
+  }
+}
+
+export function renderTooltipState(state: TriggerState): ReactElement {
+  return (
+    <div style={{padding: 64}}>
+      <button type="button">Before the trigger</button>{' '}
+      <Trigger state={state} />
+      {isRenderable(state.hint) ? (
+        <span id={HINT_ID}> {state.hint}</span>
+      ) : null}{' '}
+      <button type="button">After the trigger</button>
+    </div>
+  );
+}