@astryxdesign/core 0.7.2 → 0.7.3-canary.0bf23bd

package/src/DropdownMenu/__tests__/SubMenuHeaderFooter.a11y.chromium.spec.ts

@@ -0,0 +1,267 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SubMenuHeaderFooter.a11y.chromium.spec.ts
+ * @input The built Storybook "Submenu / header and footer" story (a Labels
+ *   sub-menu with a filter field above its checkbox rows and a "Create label"
+ *   button below them) and real Chromium, once as a laptop (fine pointer) and
+ *   once as a phone (coarse pointer, touch).
+ * @output Evidence for component:DropdownMenu FR20: a sub-menu's header and
+ *   footer sit with its rows in a modal dialog named by its row, beside every
+ *   menu element rather than inside one; the row says it opens a dialog; Tab
+ *   and Shift+Tab walk field, rows and button and wrap; typing filters the
+ *   rows and Escape returns to the row; a pick keeps the sub-menu open. On a
+ *   phone the drilled-in view holds the same regions while the root menu
+ *   steps aside. On the "Submenu / header with a choice" story, a flyout the
+ *   pointer has left stays open while an arrow moves the header's radio choice.
+ * @position Browser proof behind the jsdom suite: the accessibility tree, real
+ *   Tab order and the pointer decision are what jsdom cannot exercise.
+ */
+
+import {devices, expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+const storyId = 'core-dropdownmenu--sub-menu-header-and-footer';
+
+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=${storyId}&viewMode=story`,
+  );
+  await expect(page.getByTestId('submenu-regions-fixture')).toBeVisible();
+}
+
+/** Whether the element sits inside any role="menu" element. */
+async function isInsideAMenu(page: Page, testName: string): Promise<boolean> {
+  return page
+    .getByRole('dialog', {name: testName})
+    .evaluate(el => el.parentElement?.closest('[role="menu"]') != null);
+}
+
+async function bounds(locator: Locator) {
+  const rect = await locator.boundingBox();
+  if (rect == null) {
+    throw new Error('no rendered bounds');
+  }
+  return rect;
+}
+
+test.describe('on a laptop (fine pointer)', () => {
+  test('the sub-menu opens a dialog beside the menu, named by its row, holding field, rows and button', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await expect(row).toHaveAttribute('aria-haspopup', 'dialog');
+    await row.click();
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toHaveAttribute('aria-modal', 'true');
+    await expect(row).toHaveAttribute(
+      'aria-controls',
+      (await dialog.getAttribute('id')) ?? '',
+    );
+    expect(await isInsideAMenu(page, 'Labels')).toBe(false);
+    // The sub-menu's own menu holds only its rows.
+    const menu = dialog.getByRole('menu', {name: 'Labels'});
+    expect(
+      await menu.evaluate(el =>
+        Array.from(el.querySelectorAll('[role]')).map(child =>
+          child.getAttribute('role'),
+        ),
+      ),
+    ).toEqual(Array(5).fill('menuitemcheckbox'));
+    await expect(
+      dialog.getByRole('textbox', {name: 'Filter labels'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('button', {name: 'Create label'}),
+    ).toBeVisible();
+  });
+
+  test('Tab and Shift+Tab walk field, rows and button and wrap; typing filters; Escape returns to the row', async ({
+    page,
+  }) => {
+    await mount(page);
+    const trigger = page.getByRole('button', {name: 'Session'});
+    await trigger.focus();
+    await page.keyboard.press('Enter');
+    // A keyboard open lands on the first row; let it land before moving on.
+    await expect(page.getByRole('menuitem', {name: 'Rename'})).toBeFocused();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await page.keyboard.press('ArrowDown');
+    await expect(row).toBeFocused();
+    await page.keyboard.press('ArrowRight');
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    const field = dialog.getByRole('textbox', {name: 'Filter labels'});
+    const create = dialog.getByRole('button', {name: 'Create label'});
+    const menu = dialog.getByRole('menu', {name: 'Labels'});
+    // A keyboard open lands on the first row, not the field.
+    await expect(
+      dialog.getByRole('menuitemcheckbox', {name: 'Bug'}),
+    ).toBeFocused();
+
+    await page.keyboard.press('Tab');
+    await expect(create).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(field).toBeFocused();
+    await page.keyboard.press('Tab');
+    await expect(menu).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(field).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await expect(create).toBeFocused();
+    await expect(dialog).toBeVisible();
+
+    // The field keeps its keys: letters type and filter the rows, and the
+    // arrow that closes a sub-menu from a row moves the caret instead.
+    await field.focus();
+    await page.keyboard.type('doc');
+    await page.keyboard.press('ArrowLeft');
+    await expect(field).toHaveValue('doc');
+    await expect(dialog.getByRole('menuitemcheckbox')).toHaveText([
+      'Documentation',
+    ]);
+
+    await page.keyboard.press('Escape');
+    await expect(dialog).toBeHidden();
+    await expect(row).toBeFocused();
+    await expect(page.getByRole('menu', {name: 'Session'})).toBeVisible();
+  });
+
+  test('a pick keeps the sub-menu open; the button acts without closing anything', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    await page.getByRole('menuitem', {name: 'Labels'}).click();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await dialog.getByRole('menuitemcheckbox', {name: 'Feature'}).click();
+    await expect(page.getByTestId('picked')).toHaveText('Bug, Feature');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', {name: 'Create label'}).click();
+    await expect(page.getByTestId('created')).toHaveText('1');
+    await expect(dialog).toBeVisible();
+  });
+});
+
+test.describe('the press model', () => {
+  test('a press on the row, dragged into the flyout and released on a row, picks it', async ({
+    page,
+  }) => {
+    await mount(page);
+    await page.getByRole('button', {name: 'Session'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await row.hover();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    const feature = dialog.getByRole('menuitemcheckbox', {name: 'Feature'});
+    const [from, to] = await Promise.all([row, feature].map(bounds));
+    await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(from.x + from.width - 4, from.y + from.height / 2, {
+      steps: 4,
+    });
+    await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2, {
+      steps: 8,
+    });
+    await page.mouse.up();
+    await expect(page.getByTestId('picked')).toHaveText('Bug, Feature');
+    // A checkbox pick keeps the sub-menu, and the menu, open.
+    await expect(dialog).toBeVisible();
+  });
+});
+
+test.describe('on a phone (coarse pointer)', () => {
+  const {defaultBrowserType: _browser, ...phone} = devices['Pixel 7'];
+  test.use(phone);
+
+  test('the drilled-in view holds field, rows and button beside the root menu, which steps aside', async ({
+    page,
+  }) => {
+    await mount(page);
+    const trigger = page.getByRole('button', {name: 'Session'});
+    await trigger.tap();
+    const rootMenu = page.getByRole('menu', {name: 'Session'});
+    await expect(rootMenu).toBeVisible();
+    await page.getByRole('menuitem', {name: 'Labels'}).tap();
+
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    await expect(rootMenu).toBeHidden();
+    expect(await isInsideAMenu(page, 'Labels')).toBe(false);
+    // Same popover: the view replaces the root's rows in place.
+    expect(
+      await dialog.evaluate(
+        el =>
+          el.closest('[popover]') ===
+          document
+            .querySelector('[role="menu"][aria-label="Session"]')
+            ?.closest('[popover]'),
+      ),
+    ).toBe(true);
+    await expect(
+      dialog.getByRole('menuitem', {name: 'Back to Session'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('textbox', {name: 'Filter labels'}),
+    ).toBeVisible();
+    await expect(
+      dialog.getByRole('button', {name: 'Create label'}),
+    ).toBeVisible();
+
+    await dialog.getByRole('menuitem', {name: 'Back to Session'}).tap();
+    await expect(dialog).toBeHidden();
+    await expect(rootMenu).toBeVisible();
+  });
+});
+
+test.describe('a header with a choice', () => {
+  test('a flyout the pointer has left stays open while an arrow moves the choice in its header', async ({
+    page,
+  }) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=core-dropdownmenu--sub-menu-header-choice&viewMode=story`,
+    );
+    await expect(page.getByTestId('submenu-choice-fixture')).toBeVisible();
+    await page.getByRole('button', {name: 'Filters'}).click();
+    const row = page.getByRole('menuitem', {name: 'Labels'});
+    await row.hover();
+    const dialog = page.getByRole('dialog', {name: 'Labels'});
+    await expect(dialog).toBeVisible();
+    const anyLabel = dialog.getByRole('radio', {name: 'Any label'});
+    const allLabels = dialog.getByRole('radio', {name: 'All labels'});
+    await anyLabel.click();
+    await expect(anyLabel).toBeFocused();
+
+    // The pointer leaves the flyout and the menu, and its hide delay runs out
+    // with focus still inside.
+    const viewport = page.viewportSize() ?? {width: 1280, height: 720};
+    await page.mouse.move(viewport.width - 8, viewport.height - 8, {steps: 4});
+    await page.waitForTimeout(500);
+    await expect(dialog).toBeVisible();
+
+    // The browser moves focus and the choice for the arrow itself.
+    await page.keyboard.press('ArrowDown');
+    await expect(allLabels).toBeFocused();
+    await expect(allLabels).toBeChecked();
+    await expect(page.getByTestId('match')).toHaveText('all');
+    await expect(dialog).toBeVisible();
+  });
+});

package/src/DropdownMenu/menuRegionStops.ts

@@ -8,8 +8,8 @@
  * @output `tabbablesIn`, `focusRegionControl`, `moveRegionsTab`: the Tab stops
  *   of a header or footer region and the walk through a menu with regions,
  *   with a named radio group as one stop
- * @position Internal; DropdownMenu's walk through its header and footer, in a
- *   module of its own so another menu level with regions can share it.
+ * @position Internal; used by DropdownMenu (the root menu's header and footer)
+ *   and DropdownMenuSubMenu (a sub-menu's header and footer).
  *
  * A menu with a header or footer is a dialog: Tab and Shift+Tab walk the
  * header's controls, the menu as one stop, then the footer's controls, and

package/src/DropdownMenu/modules/useMenuPress.spec.md

@@ -163,6 +163,14 @@ Consumer migration instructions belong in consumer docs and release notes.
   claimed by the innermost root carrying `data-astryx-menu-press` (a flyout
   before its parent); the outermost root decides what counts as "inside the
   menu" for the release.
+- **ORD1a (proposed) — A menu beside the root.** A root carrying
+  `data-astryx-menu-press-surface`, which names another root's `id`, is nested
+  in that root for ORD1, as a flyout inside the root's DOM is: a release on
+  its rows is inside the menu. Only the menu of a sub-menu with a header or
+  footer, which the root renders beside itself (`component:DropdownMenu`
+  FR20), carries it. Anything else beside the root, a header field or a picker
+  placed in a region say, is outside the menu, as the root's own regions are,
+  and a picker there stays its own root. Pending owner review.
 - **ORD2 — Release resolution.** Enabled row under the point → `act`; inside
   the menu or on the trigger with no row → `settle` (stray click swallowed,
   menu stays); outside → `settle` with `dismiss` only for a mouse.
@@ -238,6 +246,7 @@ owned by the item components.
 | FR4 (scroll)           | `MenuPress.a11y.chromium.spec.ts` (real Chromium)                                                                          | Chromium touch pan in an overflowing menu; touch-action by overflow; finger slide and its stray click                                                    | Not provable in jsdom; a pan that acts on a row, or a slide that acts on the press row, fails                                   |
 | FR4 (pinch)            | `MenuPinchZoom.a11y.chromium.spec.ts` (real Chromium, phone emulation)                                                     | two-finger pinch over a menu whose rows fit, over one that scrolls, and over a picker listbox                                                            | Not provable in jsdom; a pinch that leaves the page at scale 1, or acts on a row, fails                                         |
 | FR8, FR9 (proposed)    | `menuPressGesture.test.ts` trigger states; `useMenuPress.test.tsx` trigger suite; `DropdownMenu.test.tsx` press-open cases | mouse opens at once, finger tap, held finger, settle before/after, cancel; press-open + drag-release, unsettled release, trigger toggle, held touch, tap | A menu that does not open on a mouse press, an unsettled release that acts, or a trigger that reopens in the same gesture fails |
+| ORD1a (proposed)       | `DropdownMenuSubMenu.test.tsx` press cases; `SubMenuHeaderFooter.a11y.chromium.spec.ts` press-drag case                    | a mouse press on a menu row released on a row of a sub-menu rendered beside the menu; the same press released on that sub-menu's header field            | A release on such a row that acts on nothing or closes the menu, or a release on its header field that acts, fails.             |
 
 ## Decision log
 

package/src/FieldStatus/FieldStatus.spec.md

@@ -38,7 +38,8 @@ detached presentations; consumer usage remains documented in
 
 - Released default preserved: `yes`
 - Compatibility class: additive documentation only; runtime, DOM, styling, and
-  public API remain unchanged
+  public API remain unchanged, except that delivery inside a mounted live
+  container follows `spec:AST-086` FR4
 - Controlled/uncontrolled behavior: not applicable
 - Migration decision: direct `FieldStatus variant="tooltip"` support is rejected.
   `tooltip` remains a field-family sentinel that MUST be handled before rendering
@@ -127,7 +128,7 @@ intentional decision.
 - **AR1 — Programmatic announcement channel.** Errors MUST update the persistent
   assertive region; warnings and successes MUST update the persistent polite
   region, including on first mount and when message or type changes, without
-  moving focus.
+  moving focus. Inside a mounted live container, `spec:AST-086` FR4 applies.
 - **AR5 — Assistive-technology output.** Claims about whether, when, or how the
   message is spoken or presented in braille MUST be verified through the real-AT
   evidence process in `spec:AST-009`; DOM and accessibility-tree checks prove

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)',