@astryxdesign/core 0.7.2 → 0.7.3-canary.02f5fe4

package/src/FileInput/FileInput.test.tsx

@@ -243,12 +243,35 @@ describe('FileInput', () => {
     expect(trigger).not.toHaveAttribute('aria-required');
   });
 
-  it('sets disabled attribute when isDisabled is true', () => {
+  it('keeps a disabled input focusable and out of form submission', async () => {
+    const user = userEvent.setup();
     render(
-      <FileInput label="Upload" isDisabled value={null} onChange={() => {}} />,
+      <form>
+        <FileInput
+          label="Upload"
+          isRequired
+          isDisabled
+          value={null}
+          onChange={() => {}}
+        />
+      </form>,
     );
-    const input = document.querySelector('input[type="file"]')!;
-    expect(input).toBeDisabled();
+    const input =
+      document.querySelector<HTMLInputElement>('input[type="file"]')!;
+    const trigger = screen.getByRole('button', {name: 'Upload'});
+    expect(input).not.toHaveAttribute('disabled');
+    expect(trigger).not.toHaveAttribute('disabled');
+    expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    const openPicker = vi.spyOn(input, 'click');
+    await user.tab();
+    expect(trigger).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(openPicker).not.toHaveBeenCalled();
+    expect(input.form).toBeNull();
+    expect(trigger.closest('form')!.checkValidity()).toBe(true);
+    // A label click activates the hidden input directly; it is canceled so
+    // the picker never opens (fireEvent returns false when prevented).
+    expect(fireEvent.click(input)).toBe(false);
   });
 
   it('sets aria-invalid when status type is error', () => {
@@ -1095,7 +1118,7 @@ describe('FileInput', () => {
       expect(clickSpy).not.toHaveBeenCalled();
     });
 
-    it('keeps the trigger non-focusable when disabled without a reason', () => {
+    it('keeps the trigger focusable when disabled without a reason', () => {
       render(
         <FileInput
           label="Resume"
@@ -1105,8 +1128,8 @@ describe('FileInput', () => {
         />,
       );
       const trigger = screen.getByRole('button');
-      expect(trigger).toHaveAttribute('tabindex', '-1');
-      expect(trigger).not.toHaveAttribute('aria-disabled');
+      expect(trigger).toHaveAttribute('tabindex', '0');
+      expect(trigger).toHaveAttribute('aria-disabled', 'true');
     });
   });
 });

package/src/FileInput/FileInput.tsx

@@ -179,7 +179,12 @@ const styles = stylex.create({
   dropzoneDisabled: {
     cursor: 'default',
     opacity: 0.5,
-    borderColor: colorVars['--color-border-emphasized'],
+    // Keeps the :focus-within border: a focused disabled trigger still shows
+    // focus (spec:AST-085 FR6).
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':focus-within': colorVars['--color-accent'],
+    },
   },
   compact: {
     boxSizing: 'border-box',
@@ -221,7 +226,12 @@ const styles = stylex.create({
   compactDisabled: {
     cursor: 'default',
     opacity: 0.5,
-    borderColor: colorVars['--color-border-emphasized'],
+    // Keeps the :focus-within border: a focused disabled trigger still shows
+    // focus (spec:AST-085 FR6).
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':focus-within': colorVars['--color-accent'],
+    },
   },
   hiddenInput: {
     position: 'absolute',
@@ -857,14 +867,9 @@ export function FileInput({
         <VisuallyHidden>
           <button
             type="button"
-            // With a disabledMessage the trigger keeps focusability via
-            // aria-disabled so the reason is focus-discoverable; opening the
-            // picker is still blocked by the isDisabled guards in the handlers.
-            // Otherwise the native disabled attribute removes it from the tab
-            // order.
-            disabled={isDisabled && !showsDisabledMessage}
-            tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
-            aria-disabled={showsDisabledMessage ? 'true' : undefined}
+            // A disabled trigger keeps its Tab stop (spec:AST-085 FR1).
+            tabIndex={0}
+            aria-disabled={isDisabled ? 'true' : undefined}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             // aria-label suppresses child content from the accessible name, so
@@ -888,7 +893,12 @@ export function FileInput({
           type="file"
           accept={accept}
           multiple={isMultiple}
-          disabled={isDisabled}
+          // Detached from its form while disabled, so selected files are not
+          // submitted and `required` does not block submission (FR3).
+          form={isDisabled ? '' : undefined}
+          // A label or description click activates this input directly; cancel
+          // it so a disabled input never opens the picker (FR2).
+          onClick={isDisabled ? event => event.preventDefault() : rest.onClick}
           onChange={handleInputChange}
           // The visually-hidden native input is never focused (tabIndex={-1});
           // its describedby/required/invalid live on the trigger button.

package/src/Link/Link.test.tsx

@@ -58,10 +58,25 @@ describe('Link', () => {
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
-  it('button fallback supports isDisabled', () => {
-    render(<Link isDisabled>Disabled Action</Link>);
+  it('button fallback stays focusable and inert when isDisabled', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Link isDisabled onClick={onClick}>
+        Disabled Action
+      </Link>,
+    );
     const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    const nativeClick = vi.fn();
+    button.addEventListener('click', nativeClick);
+    await user.tab();
+    expect(button).toHaveFocus();
+    await user.keyboard('{Enter} ');
+    expect(nativeClick).not.toHaveBeenCalled();
+    fireEvent.click(button);
+    expect(onClick).not.toHaveBeenCalled();
   });
 
   it('button fallback has type="button"', () => {
@@ -156,11 +171,10 @@ describe('Link', () => {
         Disabled Link
       </Link>,
     );
-    // An href-less anchor has no implicit `link` role, so query by text.
-    const link = screen.getByText('Disabled Link').closest('a');
-    expect(link).not.toBeNull();
+    // The href-less anchor keeps a Tab stop and an explicit link role.
+    const link = screen.getByRole('link', {name: 'Disabled Link'});
     expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).toHaveAttribute('tabIndex', '-1');
+    expect(link).toHaveAttribute('tabIndex', '0');
     // Visual classes are preserved in the disabled state.
     expect(link?.className).toContain('astryx-link');
   });

package/src/Link/Link.tsx

@@ -48,6 +48,7 @@ import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {useTranslator} from '../i18n';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 
 /**
  * Base link styles
@@ -174,9 +175,8 @@ export interface LinkProps extends BaseProps<
   /**
    * Whether the link is disabled.
    * A disabled link renders as a plain anchor without an href (and without
-   * target/rel/onClick), so it cannot be focused or activated — no
-   * navigation and no onClick, even via programmatic focus or assistive
-   * technology activation.
+   * target/rel/onClick), so it cannot navigate or run onClick. It keeps a tab
+   * stop and is announced as a disabled link.
    * @default false
    */
   isDisabled?: boolean;
@@ -264,15 +264,6 @@ export interface LinkProps extends BaseProps<
   children: ReactNode;
 }
 
-/**
- * Click handler for disabled links. The disabled anchor renders without an
- * href, so there is no navigation to block in practice; preventDefault is a
- * defensive guard against synthetic/programmatic clicks.
- */
-function preventDefaultClick(event: React.MouseEvent<HTMLAnchorElement>): void {
-  event.preventDefault();
-}
-
 /**
  * A styled anchor link component.
  *
@@ -367,8 +358,6 @@ export function Link({
         {...(isDisabled ? undefined : pressable)}
         aria-label={label || undefined}
         aria-disabled={isDisabled || undefined}
-        tabIndex={isDisabled ? -1 : undefined}
-        disabled={isDisabled}
         {...mergeProps(
           themeProps('link', {color}),
           focusOutlineProps.focusVisible(
@@ -386,24 +375,26 @@ export function Link({
           className,
           style,
         )}
-        {...props}>
+        {...props}
+        // Focusable while disabled (spec:AST-085 FR1), but inert (FR2).
+        {...(isDisabled ? disabledInteractionProps(props.onKeyDown) : null)}>
         {sharedContent}
       </button>
     );
   } else if (isDisabled) {
-    // A disabled link renders as a plain <a> with no href: an href-less
-    // anchor is not focusable and exposes no link affordance, so programmatic
-    // focus + Enter, AT activation commands, and middle-click cannot navigate
-    // or fire the consumer onClick. The router LinkComponent is deliberately
-    // skipped — a disabled link performs no navigation, and custom router
-    // links may require a live href. target/rel are omitted with the href.
+    // A disabled link renders as an <a> with no href, so nothing can navigate
+    // and the consumer onClick never fires. It keeps a Tab stop and the link
+    // role so keyboard and screen-reader users still find it (spec:AST-085
+    // FR1, FR5). The router LinkComponent is deliberately skipped — a disabled
+    // link performs no navigation, and custom router links may require a live
+    // href. target/rel are omitted with the href.
     linkElement = (
       <a
         ref={ref as React.Ref<HTMLAnchorElement>}
-        onClick={preventDefaultClick}
+        role="link"
         aria-label={label || undefined}
         aria-disabled={true}
-        tabIndex={-1}
+        tabIndex={0}
         {...mergeProps(
           themeProps('link', {color}),
           focusOutlineProps.focusVisible(
@@ -417,7 +408,8 @@ export function Link({
           className,
           style,
         )}
-        {...props}>
+        {...props}
+        {...disabledInteractionProps(props.onKeyDown)}>
         {sharedContent}
       </a>
     );

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

@@ -73,7 +73,7 @@ export const LINK_A11Y_EXCLUSIONS = [
   {
     owner: 'Link component tests and family:navigation-destinations FR7',
     reason:
-      'A disabled Link renders an href-less anchor that is neither a link nor focusable. That disabled semantics is member-owned, so disabled states are not bound to this available-link contract.',
+      'A disabled Link renders a focusable, href-less anchor with an explicit link role and aria-disabled, so it cannot navigate. That disabled semantics is member-owned, so disabled states are not bound to this available-link contract.',
   },
   {
     owner: 'Link component tests (button rendering)',

package/src/Markdown/Markdown.rerender.test.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Markdown.rerender.test.tsx
+ * @input Uses vitest, @testing-library/react, Markdown, a synthetic long document
+ * @output Tests that an unrelated caller re-render reuses the rendered document
+ * @position Performance regression evidence for long documents. Counting
+ *   renders of a caller-supplied block renderer is deterministic, unlike a
+ *   timing budget, and fails when Markdown rebuilds every block element on a
+ *   re-render that changed nothing it reads.
+ */
+
+import {useState} from 'react';
+import {act, cleanup, fireEvent, render} from '@testing-library/react';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {Markdown} from './Markdown';
+import type {MarkdownComponents} from './Markdown';
+
+afterEach(() => {
+  cleanup();
+});
+
+/** A long, review-style document: headings, prose, lists, a table, code. */
+function longDocument(sections: number): string {
+  return Array.from({length: sections}, (_, i) =>
+    [
+      `## Section ${i}`,
+      '',
+      `Paragraph ${i} with **bold**, *emphasis*, \`code\` and a [link](/docs/${i}).`,
+      '',
+      `- Point ${i}`,
+      `  - Nested point ${i}`,
+      `- [x] Done ${i}`,
+      '',
+      '| Name | Count |',
+      '| --- | ---: |',
+      `| row ${i} | ${i * 3} |`,
+      '',
+      '```ts',
+      `const value${i} = ${i};`,
+      '```',
+    ].join('\n'),
+  ).join('\n\n');
+}
+
+const SECTIONS = 40;
+
+function createCountingComponents(): {
+  components: Partial<MarkdownComponents>;
+  renders: () => number;
+} {
+  let count = 0;
+  function CountingCode({code}: {code: string; language?: string}) {
+    count++;
+    return <pre data-testid="code">{code}</pre>;
+  }
+  return {components: {code: CountingCode}, renders: () => count};
+}
+
+describe('Markdown re-render reuse', () => {
+  it('does not re-render any block when a caller re-render changes nothing Markdown reads', () => {
+    const {components, renders} = createCountingComponents();
+    const source = longDocument(SECTIONS);
+    let bump: () => void = () => {};
+    function Page() {
+      const [tick, setTick] = useState(0);
+      bump = () => setTick(t => t + 1);
+      return (
+        <section data-tick={tick}>
+          {/* A new link handler each render, as inline callers write it. */}
+          <Markdown components={components} onLinkClick={() => {}}>
+            {source}
+          </Markdown>
+        </section>
+      );
+    }
+    const {container} = render(<Page />);
+    const document = container.querySelector('[role="document"]');
+    const html = document?.innerHTML;
+    expect(renders()).toBe(SECTIONS);
+
+    act(() => bump());
+    act(() => bump());
+
+    expect(renders()).toBe(SECTIONS);
+    expect(container.querySelector('[role="document"]')).toBe(document);
+    expect(document?.innerHTML).toBe(html);
+  });
+
+  it('re-renders when the text changes', () => {
+    const {components, renders} = createCountingComponents();
+    const {rerender, getAllByTestId} = render(
+      <Markdown components={components}>{longDocument(2)}</Markdown>,
+    );
+    expect(renders()).toBe(2);
+    rerender(
+      <Markdown components={components}>
+        {`${longDocument(2)}\n\n\`\`\`ts\nconst added = true;\n\`\`\``}
+      </Markdown>,
+    );
+    expect(getAllByTestId('code')).toHaveLength(3);
+    expect(getAllByTestId('code')[2].textContent).toBe('const added = true;');
+  });
+
+  it('re-renders when a rendering prop changes', () => {
+    const {container, rerender} = render(
+      <Markdown headingLevelStart={1}>{'# Title'}</Markdown>,
+    );
+    expect(container.querySelector('h1')).not.toBeNull();
+    rerender(<Markdown headingLevelStart={3}>{'# Title'}</Markdown>);
+    expect(container.querySelector('h1')).toBeNull();
+    expect(container.querySelector('h3')?.textContent).toBe('Title');
+  });
+
+  it('calls the latest link handler after a re-render that reused the document', () => {
+    const first = vi.fn();
+    const latest = vi.fn(() => false as const);
+    const {container, rerender} = render(
+      <Markdown onLinkClick={first}>{'[go](/next)'}</Markdown>,
+    );
+    rerender(<Markdown onLinkClick={latest}>{'[go](/next)'}</Markdown>);
+    const link = container.querySelector('a');
+    expect(link).not.toBeNull();
+    const event = new MouseEvent('click', {bubbles: true, cancelable: true});
+    act(() => {
+      link?.dispatchEvent(event);
+    });
+    expect(first).not.toHaveBeenCalled();
+    expect(latest).toHaveBeenCalledWith('/next', expect.anything());
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('starts and stops handling link clicks when the handler is added or removed', () => {
+    const handler = vi.fn();
+    const {container, rerender} = render(<Markdown>{'[go](/next)'}</Markdown>);
+    rerender(<Markdown onLinkClick={handler}>{'[go](/next)'}</Markdown>);
+    fireEvent.click(container.querySelector('a') as HTMLAnchorElement);
+    expect(handler).toHaveBeenCalledTimes(1);
+    rerender(<Markdown>{'[go](/next)'}</Markdown>);
+    fireEvent.click(container.querySelector('a') as HTMLAnchorElement);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Markdown/Markdown.tsx

@@ -41,6 +41,7 @@ import {TableHeaderCell} from '../Table/TableHeaderCell';
 import {TableHeader} from '../Table/TableHeader';
 import {TableBody} from '../Table/TableBody';
 import {mergeProps} from '../utils';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {useStreamingText} from '../hooks/useStreamingText';
 import {computeBoundaries, computeSegments} from './streaming';
 import type {BaseProps} from '../BaseProps';
@@ -2122,6 +2123,21 @@ export function Markdown<
 }: MarkdownProps<Plugins>): React.ReactElement {
   const t = useTranslator();
   const LinkComponent = useLinkComponent();
+  // Links read the caller's handler when clicked, so a handler recreated on
+  // every caller render does not invalidate the memoized document below.
+  // Only whether a handler exists changes the rendered links.
+  const onLinkClickRef = useRef(onLinkClick);
+  useIsomorphicLayoutEffect(() => {
+    onLinkClickRef.current = onLinkClick;
+  });
+  const hasLinkClick = onLinkClick != null;
+  const stableOnLinkClick = useMemo<MarkdownProps['onLinkClick']>(
+    () =>
+      hasLinkClick
+        ? (href, event) => onLinkClickRef.current?.(href, event)
+        : undefined,
+    [hasLinkClick],
+  );
   // Derive the set of source IDs for the parser (stable across renders when sources don't change)
   const sourceIds = useMemo(
     () => (sources ? new Set(Object.keys(sources)) : undefined),
@@ -2327,19 +2343,80 @@ export function Markdown<
     return next;
   }, [display, smoothedLen, maxSpans]);
 
-  const cursor: StreamingCursor = {
-    offset: 0,
-    boundaries,
-    active: isStreaming,
-  };
-
-  // Build citation context — numbers are assigned in encounter order during rendering.
-  // This is recreated each render so numbering stays consistent with the AST.
-  const citationCtx: CitationContext | null = sources
-    ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+  const contentWidthValue = contentWidth
+    ? typeof contentWidth === 'number'
+      ? `${contentWidth}px`
+      : contentWidth
     : null;
 
+  // The block document is the expensive part of a long Markdown render. It
+  // depends only on these inputs, so a caller re-render that changes none of
+  // them returns the same elements and React skips the whole subtree. The
+  // cursor and citation numbering are rebuilt inside, from the start of the
+  // document, exactly as a full render builds them.
+  const renderedBlocks = useMemo(() => {
+    if (display === 'inline') {
+      return null;
+    }
+    const blockCursor: StreamingCursor = {
+      offset: 0,
+      boundaries,
+      active: isStreaming,
+    };
+    // Numbers are assigned in encounter order during rendering.
+    const blockCitationCtx: CitationContext | null = sources
+      ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+      : null;
+    return blocks.map((block, i) =>
+      renderBlock(
+        block,
+        i,
+        blocks.length,
+        density,
+        headingLevelStart,
+        stableOnLinkClick,
+        blockCursor,
+        blockCitationCtx,
+        contentWidthValue,
+        contentAlign,
+        LinkComponent,
+        inlinePlugins,
+        components,
+        preparedPlugins,
+        t,
+        headingProjection,
+      ),
+    );
+  }, [
+    display,
+    blocks,
+    boundaries,
+    isStreaming,
+    sources,
+    citationStyle,
+    density,
+    headingLevelStart,
+    stableOnLinkClick,
+    contentWidthValue,
+    contentAlign,
+    LinkComponent,
+    inlinePlugins,
+    components,
+    preparedPlugins,
+    t,
+    headingProjection,
+  ]);
+
   if (display === 'inline') {
+    const cursor: StreamingCursor = {
+      offset: 0,
+      boundaries,
+      active: isStreaming,
+    };
+    // Numbers are assigned in encounter order during rendering.
+    const citationCtx: CitationContext | null = sources
+      ? {sources, numberMap: new Map(), nextNumber: 1, style: citationStyle}
+      : null;
     const renderedInline = (
       <span
         ref={ref}
@@ -2357,7 +2434,7 @@ export function Markdown<
           renderInline(
             node,
             i,
-            onLinkClick,
+            stableOnLinkClick,
             cursor,
             citationCtx,
             LinkComponent,
@@ -2391,30 +2468,7 @@ export function Markdown<
         className,
         style,
       )}>
-      {blocks.map((block, i) =>
-        renderBlock(
-          block,
-          i,
-          blocks.length,
-          density,
-          headingLevelStart,
-          onLinkClick,
-          cursor,
-          citationCtx,
-          contentWidth
-            ? typeof contentWidth === 'number'
-              ? `${contentWidth}px`
-              : contentWidth
-            : null,
-          contentAlign,
-          LinkComponent,
-          inlinePlugins,
-          components,
-          preparedPlugins,
-          t,
-          headingProjection,
-        ),
-      )}
+      {renderedBlocks}
     </div>
   );
 

package/src/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.ts

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MultiSelector.disabledFocus.a11y.chromium.spec.ts
+ * @input The `Core/MultiSelector` Default story in a built Storybook.
+ * @output Real-engine proof of `spec:AST-085` FR4: a trigger disabled while it
+ *   holds keyboard focus keeps focus and reports itself disabled.
+ * @position Run with `pnpm test:a11y-contract`; a DOM emulator does not move
+ *   focus off an element that becomes disabled, so it cannot show the loss.
+ */
+
+import {expect, test} 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();
+});
+
+test('a focused trigger keeps focus when it becomes disabled', async ({
+  page,
+}) => {
+  const storyId = 'core-multiselector--default';
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+  );
+  const trigger = page.getByRole('combobox', {name: 'Columns'});
+  await trigger.focus();
+  await expect(trigger).toBeFocused();
+
+  await page.evaluate(id => {
+    const channel = (
+      window as unknown as {
+        __STORYBOOK_ADDONS_CHANNEL__?: {
+          emit: (event: string, payload: unknown) => void;
+        };
+      }
+    ).__STORYBOOK_ADDONS_CHANNEL__;
+    if (channel == null) {
+      throw new Error('Storybook channel is unavailable');
+    }
+    channel.emit('updateStoryArgs', {
+      storyId: id,
+      updatedArgs: {isDisabled: true},
+    });
+  }, storyId);
+
+  // Wait for the disabled re-render in either form, so focus is checked
+  // after it lands.
+  await expect
+    .poll(async () =>
+      trigger.evaluate(
+        el =>
+          el.hasAttribute('disabled') ||
+          el.getAttribute('aria-disabled') === 'true',
+      ),
+    )
+    .toBe(true);
+  await expect(trigger).toBeFocused();
+});