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

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/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.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', () => {

package/src/Slider/Slider.tsx

@@ -558,15 +558,12 @@ export function Slider({ref, ...props}: SliderProps) {
 
   const handleThumbFocus = useCallback(
     (thumbIndex: number, _e: FocusEvent<HTMLDivElement>) => {
-      // A disabled thumb draws no ring even when it stays focusable for its
-      // reason tooltip, so there is nothing to track for one.
+      // A focused disabled thumb still shows the ring (spec:AST-085 FR6).
       setKeyboardFocusThumb(
-        !isDisabled && getInteractionModality() === 'keyboard'
-          ? thumbIndex
-          : null,
+        getInteractionModality() === 'keyboard' ? thumbIndex : null,
       );
     },
-    [isDisabled],
+    [],
   );
 
   const handleThumbBlur = useCallback((_e: FocusEvent<HTMLDivElement>) => {
@@ -960,10 +957,8 @@ export function Slider({ref, ...props}: SliderProps) {
         ref={!isRange ? ref : undefined}
         id={!isRange ? id : undefined}
         role="slider"
-        // With a disabledMessage the thumb keeps focusability so the reason is
-        // focus-discoverable; value changes stay blocked by the isDisabled
-        // guards in the pointer/keyboard handlers.
-        tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
+        // A disabled thumb keeps its Tab stop (spec:AST-085 FR1).
+        tabIndex={0}
         aria-valuemin={ariaValueMin}
         aria-valuemax={ariaValueMax}
         aria-valuenow={val}
@@ -999,8 +994,7 @@ export function Slider({ref, ...props}: SliderProps) {
               : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
             !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed,
-            !isDisabled &&
-              keyboardFocusThumb === thumbIndex &&
+            keyboardFocusThumb === thumbIndex &&
               focusOutlineStyles.focusVisible,
             isDisabled && styles.thumbDisabled,
           ),
@@ -1095,7 +1089,9 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(styles.sliderRow),
         )}>
+        {/* A disabled slider submits no value (spec:AST-085 FR3). */}
         {htmlName != null &&
+          !isDisabled &&
           values.map((v, i) => (
             <input
               // Positional identity: index 0 is the start thumb, 1 the end.
@@ -1103,9 +1099,6 @@ export function Slider({ref, ...props}: SliderProps) {
               type="hidden"
               name={htmlName}
               value={String(v)}
-              // Disabled native controls are excluded from form submission;
-              // mirror that for the hidden carrier.
-              disabled={isDisabled}
             />
           ))}
         <div

package/src/Switch/Switch.test.tsx

@@ -624,16 +624,37 @@ describe('Switch', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
+    it('stays focusable via aria-disabled when disabled without a reason', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const onClick = vi.fn();
       render(
-        <Switch
-          label="Enable notifications"
-          value={false}
-          onChange={() => {}}
-          isDisabled
-        />,
+        <form>
+          <Switch
+            label="Enable notifications"
+            value={false}
+            onChange={onChange}
+            onClick={onClick}
+            htmlName="notifications"
+            isRequired
+            isDisabled
+          />
+        </form>,
       );
-      expect(screen.getByRole('switch')).toBeDisabled();
+      const control = screen.getByRole('switch');
+      expect(control).not.toHaveAttribute('disabled');
+      expect(control).toHaveAttribute('aria-disabled', 'true');
+      await user.tab();
+      expect(control).toHaveFocus();
+      await user.keyboard(' ');
+      await user.click(control);
+      await user.click(screen.getByText('Enable notifications'));
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onClick).not.toHaveBeenCalled();
+      expect(control).not.toBeChecked();
+      const form = control.closest('form')!;
+      expect(form.checkValidity()).toBe(true);
+      expect([...new FormData(form).keys()]).toEqual([]);
     });
   });
   describe('labelSpacing', () => {