@astryxdesign/core 0.7.3 → 0.7.4-canary.1a552f2

package/src/DateInput/DateInputTouch.test.tsx

@@ -666,6 +666,51 @@ describe('DateInput — field parity', () => {
     resolve();
   });
 
+  it('announces a busy start from a pick inside the open sheet, not behind it (spec:AST-086 FR8, Platform support)', async () => {
+    // The stubbed showModal() opens the dialog but jsdom cannot match
+    // `:modal`; stand in for the sheet the browser presents modally.
+    const matches = Element.prototype.matches;
+    const modalSpy = vi
+      .spyOn(Element.prototype, 'matches')
+      .mockImplementation(function (this: Element, selector: string) {
+        return selector === ':modal'
+          ? this instanceof HTMLDialogElement && this.open
+          : matches.call(this, selector);
+      });
+    const changeAction = vi.fn(async () => new Promise<void>(() => {}));
+    withLayout(() => {
+      render(
+        <DateInput
+          nativePicker="never"
+          label="Ship date"
+          value="2026-03-10"
+          min="2026-03-01"
+          max="2026-03-31"
+          onChange={() => {}}
+          changeAction={changeAction}
+        />,
+      );
+      fireEvent.click(field());
+      fireEvent.click(
+        within(pane('March 2026')).getByRole('button', {
+          name: /March 25, 2026/,
+        }),
+      );
+    });
+    const sheet = document.querySelector('dialog[open]');
+    expect(sheet).not.toBeNull();
+    await waitFor(() => {
+      expect(
+        sheet!.querySelector('[data-astryx-modal-busy-region]'),
+      ).toHaveTextContent('Loading');
+    });
+    expect(
+      document.querySelector('[data-astryx-live-region="polite"]')
+        ?.textContent ?? '',
+    ).toBe('');
+    modalSpy.mockRestore();
+  });
+
   it('drops the Field wrapper inside an InputGroup', () => {
     render(
       <InputGroup label="Range">

package/src/DateInput/NativeDateField.test.tsx

@@ -222,7 +222,11 @@ describe('DateInput nativePicker', () => {
     expect(changeAction).toHaveBeenCalledExactlyOnceWith('2026-03-21');
     expect(getInput()).not.toBeDisabled();
     expect(getInput()).toHaveAttribute('aria-busy', 'true');
-    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    // The busy Spinner is decorative (spec:AST-086 FR8).
+    expect(document.querySelector('.astryx-spinner')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
     expect(screen.getByText('March 21, 2026')).toBeInTheDocument();
 
     fireEvent.change(getInput(), {target: {value: '2026-03-22'}});
@@ -597,7 +601,11 @@ describe('DateInput nativePicker', () => {
 
     expect(calls).toEqual(['onChange', 'changeAction']);
     expect(changeAction).toHaveBeenCalledExactlyOnceWith(undefined);
-    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    // The busy Spinner is decorative (spec:AST-086 FR8).
+    expect(document.querySelector('.astryx-spinner')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
     await act(async () => resolveAction());
   });
 

package/src/DateInput/NativeDateField.tsx

@@ -49,6 +49,7 @@ import {
 } from '../Field';
 import {useInputStatusIcon, useMergedRefs} from '../hooks';
 import {useMediaQuery} from '../hooks/useMediaQuery';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {Icon} from '../Icon';
 import {useLocale, useTranslator} from '../i18n';
@@ -328,6 +329,9 @@ export function NativeDateField({
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), inputRef);
   // Keep the OS picker mounted and focusable while its own Action is pending.
   // Native TimeInput follows the same pattern: commit guards block duplicates,
   // while aria-busy and the Spinner communicate the save without detaching the
@@ -687,7 +691,7 @@ export function NativeDateField({
           onClick={handleClear}
         />
       )}
-      {isBusy && <Spinner size="sm" />}
+      {isBusy && <Spinner size="sm" aria-hidden="true" />}
       {statusIcon}
       {showsDisabledMessage &&
         disabledMessageTooltip.renderTooltip(disabledMessage)}

package/src/DateInput/TouchDateField.tsx

@@ -73,6 +73,7 @@ import {
 } from '../Field';
 import {useInputStatusIcon, useMergedRefs} from '../hooks';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
 import {useLocale, useTranslator} from '../i18n';
@@ -665,6 +666,15 @@ export function TouchDateField({
   );
 
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const sheetBodyRef = useRef<HTMLDivElement | null>(null);
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8). A date picked under a pending changeAction starts it
+  // while the modal sheet is open, so it is announced from inside the sheet.
+  useBusyAnnouncement(
+    isBusy,
+    t('@astryx.spinner.loading'),
+    isSheetOpen ? sheetBodyRef : inputRef,
+  );
   const [isWheelOpen, setIsWheelOpen] = useState(false);
   const scrollerHandleRef = useRef<MonthScrollerHandle | null>(null);
   // Pending focus handoff from the clear button; see handleClear.
@@ -1303,7 +1313,7 @@ export function TouchDateField({
           onClick={handleClear}
         />
       )}
-      {isBusy && <Spinner size="sm" />}
+      {isBusy && <Spinner size="sm" aria-hidden="true" />}
       {statusIcon}
       <BottomSheet
         isOpen={isSheetOpen}
@@ -1314,7 +1324,9 @@ export function TouchDateField({
         height="hug"
         // sheetBody owns the inset, including the band under the grab handle.
         padding={0}>
-        <div {...stylex.props(styles.sheetBody)}>{surface}</div>
+        <div ref={sheetBodyRef} {...stylex.props(styles.sheetBody)}>
+          {surface}
+        </div>
       </BottomSheet>
       {showsDisabledMessage &&
         disabledMessageTooltip.renderTooltip(disabledMessage)}

package/src/DateRangeInput/DateRangeInput.tsx

@@ -75,6 +75,7 @@ import {
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {themeProps} from '../utils/themeProps';
@@ -645,6 +646,9 @@ export function DateRangeInput({
   );
 
   const triggerRef = useRef<HTMLButtonElement>(null);
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), triggerRef);
   const triggerButtonRef = useMergedRefs<HTMLButtonElement>(triggerRef, ref);
 
   const handleClear = useCallback(
@@ -787,7 +791,7 @@ export function DateRangeInput({
             {ariaLabelProp ?? triggerAriaLabel}
           </VisuallyHidden>
         )}
-        {isBusy && <Spinner size="sm" />}
+        {isBusy && <Spinner size="sm" aria-hidden="true" />}
         {statusIcon}
       </div>
       {isEffectivelyRequired && (

package/src/DateTimeInput/DateTimeInput.tsx

@@ -65,6 +65,7 @@ import {useCalendarConstraints} from '../Calendar/hooks';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {useInputContainer} from '../hooks/useInputContainer';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {
   type ISOTimeString,
@@ -709,6 +710,9 @@ function PointerDateTimeField({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isPendingChange = optimisticValue !== value;
   const isBusy = isLoading || isPendingChange;
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), dateInputRef);
   // A native wheel emits several edits while it remains open. Disabling the
   // control after the first optimistic edit detaches the iOS picker, so pending
   // changeAction work stays interactive just like TouchDateTimeField. Explicit
@@ -1801,7 +1805,7 @@ function PointerDateTimeField({
               onClick={handleClear}
             />
           )}
-          {isBusy && <Spinner size="sm" />}
+          {isBusy && <Spinner size="sm" aria-hidden="true" />}
           {statusIcon}
         </div>
 

package/src/DateTimeInput/TouchDateTimeField.tsx

@@ -47,6 +47,7 @@ import {
 } from '../Field';
 import {useInputStatusIcon, useMergedRefs} from '../hooks';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
 import {useTranslator, InternationalizationContext} from '../i18n';
@@ -576,6 +577,15 @@ export function TouchDateTimeField({
   });
 
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const sheetBodyRef = useRef<HTMLDivElement | null>(null);
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8). A change made in the open modal sheet starts it while
+  // the sheet is open, so it is announced from inside the sheet.
+  useBusyAnnouncement(
+    isBusy,
+    t('@astryx.spinner.loading'),
+    isSheetOpen ? sheetBodyRef : dateInputRef,
+  );
   const [activePanel, setActivePanel] = useState<TouchDateTimePanel>('date');
   const [isWheelOpen, setIsWheelOpen] = useState(false);
   const [draftTime, setDraftTime] = useState<ISOTimeString | undefined>(() =>
@@ -1412,7 +1422,7 @@ export function TouchDateTimeField({
               onClick={handleClear}
             />
           )}
-          {isBusy && <Spinner size="sm" />}
+          {isBusy && <Spinner size="sm" aria-hidden="true" />}
           {isRenderable(statusIcon) && statusIcon}
         </div>
 
@@ -1497,7 +1507,9 @@ export function TouchDateTimeField({
           // touchSheetBody owns the inset, including the band under the grab
           // handle.
           padding={0}>
-          <div {...stylex.props(styles.touchSheetBody)}>{surface}</div>
+          <div ref={sheetBodyRef} {...stylex.props(styles.touchSheetBody)}>
+            {surface}
+          </div>
         </BottomSheet>
         {showsDisabledMessage &&
           disabledMessageTooltip.renderTooltip(disabledMessage)}

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -72,6 +72,7 @@ import {Item} from '../Item';
 import {useLayer} from '../Layer/useLayer';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {useListFocus} from '../hooks/useListFocus';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useMenuHover} from '../hooks/useMenuHover';
 import {
   isMenuPressActivation,
@@ -682,6 +683,14 @@ export function DropdownMenuSubMenu(
   // closed from elsewhere is cancelled instead of firing into the hidden
   // menu (#6893).
   const isRootMenuOpen = useDropdownMenuRootOpen();
+  // The loading Spinner on the trigger is decorative; the submenu announces
+  // its busy start instead (spec:AST-086 FR8), once its level is shown: a
+  // closed menu stays mounted but hidden, and announces nothing.
+  useBusyAnnouncement(
+    hasSpinner && isRootMenuOpen,
+    t('@astryx.spinner.loading'),
+    triggerRef,
+  );
   const {triggerProps, contentProps, confirmHoverOpen} =
     useMenuHover<HTMLDivElement>({
       show: showLayer,
@@ -1033,7 +1042,7 @@ export function DropdownMenuSubMenu(
 
   const endAffordance = hasSpinner ? (
     <span {...stylex.props(triggerStyles.caret)}>
-      <Spinner size="sm" />
+      <Spinner size="sm" aria-hidden="true" />
     </span>
   ) : (
     <span {...stylex.props(triggerStyles.caret)}>

package/src/FileInput/FileInput.tsx

@@ -47,6 +47,7 @@ import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {useAnnounce} from '../hooks/useAnnounce';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {useClickableContainer} from '../hooks/useClickableContainer';
 import {useTooltip} from '../Tooltip';
@@ -490,6 +491,20 @@ export function FileInput({
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+  // A pick is one user action, already announced as "file selected"; a busy
+  // period it starts (changeAction, or a caller setting isLoading from
+  // onChange) adds no second message (spec:AST-086 FR6). The mark lasts until
+  // the field is idle again. Other busy starts announce; the Spinner stays
+  // decorative (FR8).
+  const [isPickAnnounced, setIsPickAnnounced] = useState(false);
+  if (isPickAnnounced && !isBusy) {
+    setIsPickAnnounced(false);
+  }
+  useBusyAnnouncement(
+    isBusy && !isPickAnnounced,
+    t('@astryx.spinner.loading'),
+    containerRef,
+  );
 
   // Announce successful file selection to screen readers via a persistent
   // live region (forms-17). Validation errors are announced (assertively) by
@@ -580,6 +595,7 @@ export function FileInput({
       // status mounts, so only announce the attach here (do not
       // double-announce errors).
       if (errors.length === 0) {
+        setIsPickAnnounced(true);
         announce(
           valid.length === 1
             ? t('@astryx.fileInput.fileSelected', {fileName: valid[0].name})
@@ -741,7 +757,7 @@ export function FileInput({
 
   const renderDropzoneContent = () => {
     if (isBusy) {
-      return <Spinner size="md" />;
+      return <Spinner size="md" aria-hidden="true" />;
     }
     if (hasFiles) {
       return (
@@ -772,7 +788,7 @@ export function FileInput({
           <span {...stylex.props(styles.fileNameText)}>
             {fileNames ?? displayPlaceholder}
           </span>
-          <Spinner size="sm" />
+          <Spinner size="sm" aria-hidden="true" />
         </>
       );
     }

package/src/MultiSelector/MultiSelector.test.tsx

@@ -105,6 +105,14 @@ afterEach(() => {
 // "visible" in the accessibility tree. Use hidden: true to find it.
 const h = {hidden: true} as const;
 
+/** A busy control's Spinner is decorative and silent (spec:AST-086 FR8). */
+function expectSilentBusySpinner() {
+  const spinner = document.querySelector('.astryx-spinner');
+  expect(spinner).not.toBeNull();
+  expect(spinner).toHaveAttribute('aria-hidden', 'true');
+  expect(screen.queryByRole('status', {name: 'Loading'})).toBeNull();
+}
+
 describe('MultiSelector', () => {
   const defaultOptions = ['Apple', 'Banana', 'Orange'];
 
@@ -1303,7 +1311,10 @@ describe('MultiSelector', () => {
     // component cannot make; the trigger's spinner carries the state.
     const listbox = screen.getByRole('listbox', h);
     expect(within(listbox).queryByText('No options')).not.toBeInTheDocument();
-    expect(politeRegion()?.textContent ?? '').toBe('');
+    // Only the busy start is spoken (spec:AST-086 FR8), never an empty or
+    // no-results message the panel is suppressing.
+    // (The channel clears its text on a timer, so it may already be empty.)
+    expect(['', 'Loading']).toContain(politeRegion()?.textContent ?? '');
   });
 
   it('announces nothing while isLoading, matching the silent panel', async () => {
@@ -1337,7 +1348,10 @@ describe('MultiSelector', () => {
     expect(
       within(listbox).queryByText('Nothing like that here'),
     ).not.toBeInTheDocument();
-    expect(politeRegion()?.textContent ?? '').toBe('');
+    // Only the busy start is spoken (spec:AST-086 FR8), never an empty or
+    // no-results message the panel is suppressing.
+    // (The channel clears its text on a timer, so it may already be empty.)
+    expect(['', 'Loading']).toContain(politeRegion()?.textContent ?? '');
   });
 
   it('renders emptyText when there are no options and no search input', async () => {
@@ -1555,7 +1569,7 @@ describe('MultiSelector', () => {
       />,
     );
     expect(screen.getByRole('combobox')).toHaveAttribute('aria-busy', 'true');
-    expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+    expectSilentBusySpinner();
   });
 
   it('renders with custom selectAllLabel', async () => {
@@ -2250,7 +2264,7 @@ describe('MultiSelector', () => {
 
       const trigger = screen.getByRole('combobox', {name: 'Fruit'});
       expect(trigger).toHaveAttribute('aria-busy', 'true');
-      expect(screen.getByRole('status', {name: 'Loading'})).toBeInTheDocument();
+      expectSilentBusySpinner();
 
       await user.click(trigger);
       expect(screen.queryByRole('listbox', h)).not.toBeInTheDocument();

package/src/MultiSelector/MultiSelector.tsx

@@ -92,6 +92,7 @@ import {useDevWarning} from '../hooks/useDevWarning';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {mergeRefs} from '../utils/mergeRefs';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
@@ -1203,6 +1204,9 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+  // The busy Spinner is decorative; this control announces its busy start
+  // (spec:AST-086 FR8).
+  useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), triggerRef);
 
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the trigger container (which already exists)
@@ -2643,7 +2647,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           value.map(v => (
             <input key={v} type="hidden" name={htmlName} value={v} />
           ))}
-        {isBusy && <Spinner size="sm" />}
+        {isBusy && <Spinner size="sm" aria-hidden="true" />}
         {hasClear &&
           value.length > 0 &&
           !isDisabled &&

package/src/ProgressBar/ProgressBar.test.tsx

@@ -565,21 +565,6 @@ describe('ProgressBar', () => {
       expect(styleClasses(accentMarks[1])).toBe(styleClasses(errorMarks[1]));
     });
 
-    it('keeps tabbable target marks outside the progressbar subtree', () => {
-      const {container} = render(
-        <ProgressBar
-          value={50}
-          label="Progress"
-          marks={[{value: 80, label: 'Goal'}]}
-        />,
-      );
-      const progressbar = screen.getByRole('progressbar', {name: 'Progress'});
-      const mark = container.querySelector(MARK)!;
-      expect(mark).toHaveAttribute('tabindex', '0');
-      expect(progressbar.querySelector('[tabindex="0"]')).toBeNull();
-      expect(mark.closest('[role="progressbar"]')).toBeNull();
-    });
-
     it('renders every mark as a focusable trigger (label is required, never decorative)', () => {
       const {container} = render(
         <ProgressBar
@@ -637,7 +622,6 @@ describe('ProgressBar', () => {
         />,
       );
       const progressbar = screen.getByRole('progressbar');
-      expect(progressbar.querySelector(MARK)).toBeNull();
       expect(progressbar.querySelector('[role="img"]')).toBeNull();
       expect(progressbar.querySelector('[aria-label]')).toBeNull();
       expect(container.querySelectorAll(MARK)).toHaveLength(1);
@@ -655,9 +639,10 @@ describe('ProgressBar', () => {
       expect(progressbar.getAttribute('aria-valuetext')).toBe('50%');
     });
 
-    it('preserves the fill inside the progressbar when marks are rendered outside it', () => {
-      // Only the fill belongs to the semantic track; the focusable marks
-      // remain independently available outside its presentational subtree.
+    it('keeps the fill as the progressbar child when marks are rendered', () => {
+      // Only the fill belongs to the semantic track. That the focusable marks
+      // stay outside its presentational subtree is the progressbar contract's
+      // target-marks state (progressbar.subtree.no-focusable-descendants).
       const {container} = render(
         <ProgressBar
           value={50}
@@ -669,8 +654,6 @@ describe('ProgressBar', () => {
       const fill = progressbar.firstElementChild as HTMLElement;
       expect(fill.style.width).toBe('50%');
       expect(fill.classList.contains('astryx-progress-bar-mark')).toBe(false);
-      const mark = container.querySelector<HTMLElement>(MARK)!;
-      expect(progressbar).not.toContainElement(mark);
       expect(container.querySelectorAll(MARK)).toHaveLength(1);
     });
 

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

@@ -0,0 +1,114 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ProgressBar.a11y.chromium.spec.ts
+ * @input Built ProgressBar stories and PROGRESSBAR_PATTERN in real Chromium
+ * @output Browser evidence for every progressbar expectation across the binding's states, reconciled against the exact known failures
+ * @position Chromium lane of the ProgressBar binding
+ */
+
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
+import {
+  PROGRESSBAR_PATTERN,
+  blockingResults,
+  checkAccessibilitySpec,
+  formatFailures,
+  neverExercised,
+  summarize,
+  unmatchedKnownFailures,
+  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 {PROGRESSBAR_KNOWN_FAILURES} from './ProgressBar.a11y.known-failures';
+import {
+  PROGRESSBAR_BINDING_STATES,
+  type ProgressBarBindingState,
+} from './ProgressBar.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: ProgressBarBindingState,
+): Promise<{subject: Locator; related: Record<string, Locator>}> {
+  await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
+  await holdMotionStill(page);
+  const subject = page
+    .locator('#storybook-root')
+    .getByRole('progressbar', {name: state.facts.name});
+  await subject.waitFor({state: 'attached'});
+  return {subject, related: {}};
+}
+
+async function runState(
+  page: Page,
+  cdp: CDPSession,
+  state: ProgressBarBindingState,
+): Promise<BindingResult> {
+  return checkAccessibilitySpec({
+    spec: PROGRESSBAR_PATTERN,
+    binding: 'ProgressBar',
+    state: state.id,
+    facts: state.facts,
+    knownFailures: PROGRESSBAR_KNOWN_FAILURES,
+    mount: async () => {
+      const {subject, related} = await mountState(page, state);
+      return createChromiumHarness({page, cdp, subject, related});
+    },
+  });
+}
+
+test('every progressbar expectation is exercised by a ProgressBar state', async ({
+  page,
+}) => {
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of PROGRESSBAR_BINDING_STATES) {
+    results.push(await runState(page, cdp, state));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(PROGRESSBAR_KNOWN_FAILURES, results)).toEqual(
+    [],
+  );
+});
+
+for (const state of PROGRESSBAR_BINDING_STATES) {
+  test(`ProgressBar [${state.id}] — ${state.summary}`, async ({page}) => {
+    const cdp = await page.context().newCDPSession(page);
+    const result = await runState(page, cdp, state);
+    const report = summarize(PROGRESSBAR_PATTERN, [result]);
+    // Required rows block (AST-020 FR9); advisory rows and exact known
+    // failures report.
+    expect(formatFailures(blockingResults([result]))).toBe('');
+    expect(report.unrunLayers).toEqual([]);
+    expect(report.counts.unexpectedPass).toBe(0);
+  });
+}

package/src/ProgressBar/__tests__/ProgressBar.a11y.known-failures.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ProgressBar.a11y.known-failures.ts
+ * @input The exact progressbar-contract failures the shipped ProgressBar produces today
+ * @output PROGRESSBAR_KNOWN_FAILURES — records both lanes reconcile against, so a fix shows up as an unexpected pass and any other failure stays a failure
+ * @position Known-failure ledger for the ProgressBar binding
+ */
+
+import type {KnownFailure} from '@astryxdesign/a11y-spec';
+
+export const PROGRESSBAR_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [];

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

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBar.a11y.renders.tsx
+ * @input One ProgressBar binding state
+ * @output The React tree every lane renders for that state (the jsdom test directly, the story through Storybook)
+ * @position Shared fixture for the ProgressBar binding
+ */
+
+import type {ReactElement} from 'react';
+import {ProgressBar} from '../ProgressBar';
+import {
+  formatGigabytes,
+  type ProgressBarBindingState,
+} from './ProgressBar.a11y.states';
+
+export function renderProgressBarState(
+  state: ProgressBarBindingState,
+): ReactElement {
+  return (
+    <ProgressBar
+      style={{width: 320}}
+      label={state.facts.name}
+      // An indeterminate state still passes a value, so the proof shows the
+      // bar withholds it rather than never having had one.
+      value={state.facts.value ?? 50}
+      max={state.facts.max}
+      isLabelHidden={state.isLabelHidden}
+      hasValueLabel={state.hasValueLabel}
+      formatValueLabel={state.formatsValue ? formatGigabytes : undefined}
+      isIndeterminate={state.isIndeterminate}
+      isDisabled={state.isDisabled}
+      marks={state.marks}
+    />
+  );
+}