@astryxdesign/core 0.7.2 → 0.7.3-canary.06872b4

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/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/Selector/Selector.spec.md

@@ -163,17 +163,17 @@ These requirements describe shipped behavior on current `main`.
 
 ### Representative states
 
-| State                    | Required invariant                                                                        | Allowed variation                                          |
-| ------------------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| closed with no value     | Label and placeholder identify the field                                                  | Consumer placeholder text                                  |
-| closed with a value      | Selected option is represented in the trigger                                             | Custom `renderValue` content                               |
-| pointer / popover        | Anchored surface exposes the listbox without modal-dialog semantics                       | Default or explicit placement                              |
-| compact coarse pointer   | BottomSheet exposes a modal dialog containing the listbox                                 | Default or explicit `adaptive`, or explicit `bottom-sheet` |
-| searching                | Visible options, keyboard navigation, and announced result count use one filter           | Consumer search and empty text                             |
-| loading                  | Trigger is busy; empty and no-results output is suppressed                                | Consumer loading duration                                  |
-| disabled with reason     | Trigger remains focusable enough to expose the reason while activation stays blocked      | Consumer reason text                                       |
-| read-only                | Value stays focusable and submittable; menu, clear, and disclosure affordances are absent | Value rendering, status, and busy presentation             |
-| selected/unselected rows | Empty marks consume no width; visible marks retain space at the logical edge              | State-dependent label position/width and themed indicators |
+| State                    | Required invariant                                                                          | Allowed variation                                          |
+| ------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| closed with no value     | Label and placeholder identify the field                                                    | Consumer placeholder text                                  |
+| closed with a value      | Selected option is represented in the trigger                                               | Custom `renderValue` content                               |
+| pointer / popover        | Anchored surface exposes the listbox without modal-dialog semantics                         | Default or explicit placement                              |
+| compact coarse pointer   | BottomSheet exposes a modal dialog containing the listbox                                   | Default or explicit `adaptive`, or explicit `bottom-sheet` |
+| searching                | Visible options, keyboard navigation, and announced result count use one filter             | Consumer search and empty text                             |
+| loading                  | Trigger is busy; empty and no-results output is suppressed                                  | Consumer loading duration                                  |
+| disabled with reason     | Trigger remains focusable (`spec:AST-085`) and exposes the reason; activation stays blocked | Consumer reason text                                       |
+| read-only                | Value stays focusable and submittable; menu, clear, and disclosure affordances are absent   | Value rendering, status, and busy presentation             |
+| selected/unselected rows | Empty marks consume no width; visible marks retain space at the logical edge                | State-dependent label position/width and themed indicators |
 
 ### Transformation and precedence order
 

package/src/Selector/Selector.test.tsx

@@ -4809,6 +4809,22 @@ describe('Selector in a narrow row', () => {
     expect(root.getAttribute('style')).toContain('80');
     expect(getComputedStyle(root).minWidth).toBe('0');
   });
+
+  it('lets a narrow list shrink an option so its label can ellipsize', () => {
+    render(
+      <Selector
+        label="Project"
+        options={['An option with a deliberately long readable label']}
+        value={undefined}
+        onChange={() => {}}
+        isDefaultOpen
+      />,
+    );
+    const option = screen
+      .getByRole('option', {hidden: true})
+      .querySelector('.astryx-selector-option')!;
+    expect(getComputedStyle(option).minWidth).toBe('0');
+  });
 });
 
 describe('Selector and option actions (not adopted)', () => {

package/src/Selector/SelectorOption.tsx

@@ -22,6 +22,10 @@ const embeddedStyles = stylex.create({
     paddingBlock: 0,
     paddingInline: 0,
     borderRadius: 0,
+    // The host row lays this out as a flex item, whose automatic minimum
+    // size is the full label width. Without the reset a long label runs
+    // past a narrow popover and is clipped instead of ellipsizing.
+    minWidth: 0,
   },
 });
 

package/src/SideNav/SideNav.test.tsx

@@ -3691,3 +3691,38 @@ describe('SideNav collapse conflict warning', () => {
     expect(warn).not.toHaveBeenCalled();
   });
 });
+
+// =============================================================================
+// SideNavItem — collapsed-from-mount rail tooltip
+// =============================================================================
+
+describe('SideNavItem collapsed-from-mount rail tooltip', () => {
+  // #7692: a childless item that mounts inside an already-collapsed SideNav
+  // renders its Tooltip inside the very element anchorRef points at. React
+  // attaches that ref only after the tooltip's layout effect has run, so the
+  // tooltip never attached and a persisted collapsed rail lost all tooltips
+  // on page load.
+  it('anchors the rail tooltip when the nav is collapsed at mount', async () => {
+    render(
+      <SideNav
+        aria-label="Main"
+        collapsible={{isCollapsed: true, hasButton: false}}>
+        <SideNavItem label="Dashboard" icon={StubIcon} href="/dashboard" />
+      </SideNav>,
+    );
+    const link = screen.getByRole('link', {name: 'Dashboard'});
+    const anchor = link.parentElement as HTMLElement;
+
+    // The tooltip attaches despite mounting inside its own anchor: the item
+    // row is described by the tooltip layer.
+    await waitFor(() => {
+      expect(anchor.getAttribute('aria-describedby')).not.toBe('');
+    });
+    const layer = document.getElementById(
+      anchor.getAttribute('aria-describedby') as string,
+    );
+    expect(layer).not.toBeNull();
+    expect(layer).toHaveAttribute('role', 'tooltip');
+    expect(layer).toHaveTextContent('Dashboard');
+  });
+});

package/src/Slider/Slider.spec.md

@@ -134,8 +134,8 @@ value-tooltip behavior; AR1 records the keyboard model and its one correction.
   thumb as one composite control: every thumb is `role="slider"` with an
   accessible name (a range names each thumb), `aria-valuemin`, `aria-valuemax`,
   `aria-valuenow`, `aria-valuetext` when a formatter changes the spoken value,
-  `aria-orientation`, and `aria-disabled` when disabled; an enabled thumb, and a
-  disabled thumb that carries a disabled message, is a Tab stop.
+  `aria-orientation`, and `aria-disabled` when disabled; every thumb is a Tab
+  stop, enabled or disabled (`spec:AST-085`).
   ArrowUp and ArrowDown step by `step`; on a horizontal track the horizontal
   arrows follow the track's direction — ArrowRight increases and ArrowLeft
   decreases under LTR, and under RTL ArrowLeft increases and ArrowRight
@@ -225,15 +225,15 @@ separately listed value tooltip retains Tooltip's target.
 
 ## Verification map
 
-| Contract            | Verification                                                                                                                                                                                                                                                                                                                                                                    | Representative states                                                                       | Mutation or failure expectation                                                                                                                                       | Audit section                |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
-| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                                                                                                                                                                                                                                                                                                            | Single, range, horizontal, vertical, marks                                                  | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                                                                              | `audit:Slider/anatomy`       |
-| AR1                 | Slider accessibility contract (`internal/a11y-spec`, pending) bound to Slider, in jsdom and Chromium; `Slider.test.tsx` keyboard suites, including "follows the mirrored track under RTL: ArrowLeft increases, ArrowRight decreases, Up/Down unchanged" and "keeps ArrowLeft decreasing on a vertical track under RTL"; the Page, Home/End and Up/Down cases under the contract | Single and range; horizontal LTR and RTL; vertical; disabled; formatted value               | A thumb loses its role, name or value properties; an arrow, Page, Home or End key stops stepping or steps against the mirrored track; a range thumb crosses the other | `audit:Slider/accessibility` |
-| FR2                 | `Slider.test.tsx`, `themingTargets.test.ts`, generated probe theme, and Chromium                                                                                                                                                                                                                                                                                                | Root, horizontal/vertical control, disabled control, track, and thumb                       | A target class/state is missing, undocumented, or placed outside its owning anatomy.                                                                                  | `audit:Slider/theming`       |
-| FR3                 | Source and consumer-doc review                                                                                                                                                                                                                                                                                                                                                  | Filled range, marks, labels, adjacent text value                                            | A missing target is inaccurately documented as present or intentionally permanent.                                                                                    | `audit:Slider/theming`       |
-| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only                                                                                                                                                                                                                                                                                          | Label, status, value tooltip, disabled reason                                               | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage.                                                  | `audit:Slider/anatomy`       |
-| FR5                 | Pending: `Slider.test.tsx` change-end cases driven by an owner that renders, clamps, or rejects the emitted value (not yet in the suite)                                                                                                                                                                                                                                        | Single and range; pointer release before and after the owner re-renders; each keyboard step | `onChangeEnd` reports a value the owner did not render, fires more than once per interaction, or skips a completed keyboard step                                      | `audit:Slider/accessibility` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                                                                                                                                   | Canonical anatomy and four current local targets                                            | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                                                                    | `audit:Slider/theming`       |
+| Contract            | Verification                                                                                                                                                                                                                                                                                                                                                                                                                 | Representative states                                                                       | Mutation or failure expectation                                                                                                                                       | Audit section                |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
+| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                                                                                                                                                                                                                                                                                                                                                         | Single, range, horizontal, vertical, marks                                                  | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                                                                              | `audit:Slider/anatomy`       |
+| AR1                 | Slider accessibility contract (`internal/a11y-spec`, pending) bound to Slider; disabled-thumb Tab stop pending conformance; in jsdom and Chromium; `Slider.test.tsx` keyboard suites, including "follows the mirrored track under RTL: ArrowLeft increases, ArrowRight decreases, Up/Down unchanged" and "keeps ArrowLeft decreasing on a vertical track under RTL"; the Page, Home/End and Up/Down cases under the contract | Single and range; horizontal LTR and RTL; vertical; disabled; formatted value               | A thumb loses its role, name or value properties; an arrow, Page, Home or End key stops stepping or steps against the mirrored track; a range thumb crosses the other | `audit:Slider/accessibility` |
+| FR2                 | `Slider.test.tsx`, `themingTargets.test.ts`, generated probe theme, and Chromium                                                                                                                                                                                                                                                                                                                                             | Root, horizontal/vertical control, disabled control, track, and thumb                       | A target class/state is missing, undocumented, or placed outside its owning anatomy.                                                                                  | `audit:Slider/theming`       |
+| FR3                 | Source and consumer-doc review                                                                                                                                                                                                                                                                                                                                                                                               | Filled range, marks, labels, adjacent text value                                            | A missing target is inaccurately documented as present or intentionally permanent.                                                                                    | `audit:Slider/theming`       |
+| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only                                                                                                                                                                                                                                                                                                                                       | Label, status, value tooltip, disabled reason                                               | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage.                                                  | `audit:Slider/anatomy`       |
+| FR5                 | Pending: `Slider.test.tsx` change-end cases driven by an owner that renders, clamps, or rejects the emitted value (not yet in the suite)                                                                                                                                                                                                                                                                                     | Single and range; pointer release before and after the owner re-renders; each keyboard step | `onChangeEnd` reports a value the owner did not render, fires more than once per interaction, or skips a completed keyboard step                                      | `audit:Slider/accessibility` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                                                                                                                                                                                                                                                                                                                                                                | Canonical anatomy and four current local targets                                            | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                                                                    | `audit:Slider/theming`       |
 
 The focused Slider suite asserts the `slider-control` target's orientation and
 disabled state. Source/metadata guards cover all four target declarations. The

package/src/Slider/Slider.test.tsx

@@ -385,7 +385,7 @@ describe('Slider', () => {
     render(<Slider label="Volume" value={50} isDisabled />);
     const slider = screen.getByRole('slider');
     expect(slider).toHaveAttribute('aria-disabled', 'true');
-    expect(slider).toHaveAttribute('tabIndex', '-1');
+    expect(slider).toHaveAttribute('tabIndex', '0');
   });
 
   it('does not fire onChange on pointer down when disabled', () => {
@@ -1111,11 +1111,11 @@ describe('Slider', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains non-focusable when disabled without a reason', () => {
+    it('stays focusable when disabled without a reason', () => {
       render(
         <Slider label="Volume" value={50} valueDisplay="none" isDisabled />,
       );
-      expect(screen.getByRole('slider')).toHaveAttribute('tabindex', '-1');
+      expect(screen.getByRole('slider')).toHaveAttribute('tabindex', '0');
     });
   });
   describe('form participation', () => {