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

package/src/ClickableCard/ClickableCard.test.tsx

@@ -129,7 +129,7 @@ describe('ClickableCard', () => {
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('disabled button is disabled and the surface runs nothing', () => {
+  it('disabled button stays focusable and the surface runs nothing', () => {
     const handleClick = vi.fn();
     render(
       <ClickableCard label="Disabled" onClick={handleClick} isDisabled>
@@ -137,13 +137,14 @@ describe('ClickableCard', () => {
       </ClickableCard>,
     );
     const button = screen.getByRole('button', {name: 'Disabled'});
-    expect(button).toBeDisabled();
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
     fireEvent.click(screen.getByText('Content'));
     fireEvent.click(button);
     expect(handleClick).not.toHaveBeenCalled();
   });
 
-  it('disabled link has no live destination, leaves the tab order, and runs nothing', () => {
+  it('disabled link has no live destination, keeps its tab stop, and runs nothing', () => {
     const handleClick = vi.fn();
     render(
       <ClickableCard
@@ -157,7 +158,7 @@ describe('ClickableCard', () => {
     );
     const link = screen.getByRole('link', {name: 'Disabled link'});
     expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).toHaveAttribute('tabindex', '-1');
+    expect(link).toHaveAttribute('tabindex', '0');
     expect(link).not.toHaveAttribute('href');
     expect(link).not.toHaveAttribute('target');
     expect(fireEvent.click(link)).toBe(false);

package/src/ClickableCard/ClickableCard.tsx

@@ -51,6 +51,7 @@ import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 // =============================================================================
 // Styles — only the interactive layer, Card handles everything else
 // =============================================================================
@@ -210,8 +211,8 @@ export interface ClickableCardProps extends BaseProps {
 
   /**
    * Set to true to disable the card.
-   * Disabled action cards use a native disabled button. Disabled link cards
-   * render no live destination, leave the tab order, and expose aria-disabled.
+   * Disabled cards keep their tab stop and expose aria-disabled; activation is
+   * blocked, and disabled link cards render no live destination.
    */
   isDisabled?: boolean;
 
@@ -255,10 +256,6 @@ export interface ClickableCardProps extends BaseProps {
 // Component
 // =============================================================================
 
-function preventDisabledLinkClick(event: MouseEvent<HTMLAnchorElement>): void {
-  event.preventDefault();
-}
-
 /**
  * An interactive card that acts as a single navigation or action target.
  *
@@ -376,11 +373,12 @@ export function ClickableCard({
           ref={interactiveRef as React.Ref<HTMLAnchorElement>}
           href={isDisabled ? undefined : href}
           target={isDisabled ? undefined : target}
-          onClick={isDisabled ? preventDisabledLinkClick : undefined}
           role={isDisabled ? 'link' : undefined}
+          {...(isDisabled ? disabledInteractionProps() : null)}
           aria-label={label}
           aria-disabled={isDisabled || undefined}
-          tabIndex={isDisabled ? -1 : 0}
+          // A disabled card keeps its Tab stop (spec:AST-085 FR1).
+          tabIndex={0}
           {...stylex.props(styles.srOnly)}
         />
       ) : (
@@ -388,8 +386,10 @@ export function ClickableCard({
           ref={interactiveRef as React.Ref<HTMLButtonElement>}
           type="button"
           aria-label={label}
-          disabled={isDisabled}
+          aria-disabled={isDisabled || undefined}
           onClick={onClickProp}
+          // Focusable while disabled (FR1), but inert (FR2).
+          {...(isDisabled ? disabledInteractionProps() : null)}
           {...stylex.props(styles.srOnly)}
         />
       )}

package/src/CodeBlock/CodeBlock.highlightStyles.test.tsx

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CodeBlock.highlightStyles.test.tsx
+ * @input Uses vitest, @testing-library/react, CodeBlock, a mocked CSS Custom Highlight API
+ * @output Tests that the ::highlight() rules exist before a commit's layout effects run
+ * @position Performance regression evidence. Rules inserted after layout
+ *   effects make the browser restyle the whole document a second time once
+ *   any layout effect has read style, so their insertion point is pinned here.
+ */
+
+import {useLayoutEffect} from 'react';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+class MockHighlight extends Set<Range> {}
+const realCss = globalThis.CSS;
+
+const STYLE_SELECTOR = 'style[data-astryx-highlight-styles]';
+
+beforeEach(() => {
+  // A fresh module instance, so the once-per-document insertion flag starts
+  // unset in every test.
+  vi.resetModules();
+  document.head.querySelectorAll(STYLE_SELECTOR).forEach(el => el.remove());
+  const highlights = new Map<string, MockHighlight>();
+  globalThis.CSS = {
+    escape: realCss.escape,
+    highlights: {
+      get: (name: string) => highlights.get(name),
+      set: (name: string, h: MockHighlight) => highlights.set(name, h),
+    } as unknown as HighlightRegistry,
+  } as typeof CSS;
+  vi.stubGlobal('Highlight', MockHighlight);
+});
+
+afterEach(() => {
+  cleanup();
+  globalThis.CSS = realCss;
+  vi.unstubAllGlobals();
+});
+
+describe('CodeBlock ::highlight() rules', () => {
+  it('are in the document before layout effects in the same commit run', async () => {
+    const {CodeBlock} = await import('./CodeBlock');
+    const seen: boolean[] = [];
+    function LayoutReader() {
+      useLayoutEffect(() => {
+        seen.push(document.head.querySelector(STYLE_SELECTOR) != null);
+      }, []);
+      return null;
+    }
+    render(
+      <>
+        <CodeBlock code="const a = 1;" language="ts" highlightMode="ranges" />
+        <LayoutReader />
+      </>,
+    );
+    expect(seen).toEqual([true]);
+  });
+
+  it('are inserted once for many code blocks', async () => {
+    const {CodeBlock} = await import('./CodeBlock');
+    render(
+      <>
+        {Array.from({length: 20}, (_, i) => (
+          <CodeBlock
+            key={i}
+            code={`const v${i} = ${i};`}
+            language="ts"
+            highlightMode="ranges"
+          />
+        ))}
+      </>,
+    );
+    expect(document.head.querySelectorAll(STYLE_SELECTOR)).toHaveLength(1);
+  });
+
+  it('are not inserted by range highlighting without the Highlight API', async () => {
+    vi.stubGlobal('Highlight', undefined);
+    const {CodeBlock} = await import('./CodeBlock');
+    render(
+      <CodeBlock code="const a = 1;" language="ts" highlightMode="ranges" />,
+    );
+    expect(document.head.querySelector(STYLE_SELECTOR)).toBeNull();
+  });
+});

package/src/CodeBlock/CodeBlock.tsx

@@ -803,11 +803,21 @@ function RangeCodeContent({
 }) {
   const codeRef = useRef<HTMLElement>(null);
 
+  // Insert the ::highlight() rules before the commit's layout reads, as the
+  // span path does. Inserted later, the new rules restyle the whole document
+  // a second time after any layout read in the same commit has already
+  // styled it, which on a long page full of code blocks costs a full style
+  // recalculation.
+  useInsertionEffect(() => {
+    if (hasHighlightAPI()) {
+      ensureHighlightStyles();
+    }
+  }, []);
+
   useEffect(() => {
     if (!hasHighlightAPI()) {
       return;
     }
-    ensureHighlightStyles();
 
     const codeEl = codeRef.current;
     if (!codeEl || tokenLines.length === 0) {

package/src/ComplexSelector/ComplexSelector.focusableDisabled.test.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ComplexSelector.focusableDisabled.test.tsx
+ * @input Uses vitest, @testing-library/react, ComplexSelector
+ * @output Conformance tests for spec:AST-085 FR1, FR2 and FR4 on ComplexSelector
+ * @position Testing; validates the disabled trigger of ComplexSelector.tsx
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {act, render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {ComplexSelector} from './ComplexSelector';
+
+function Harness(props: {
+  isDisabled: boolean;
+  onClick?: () => void;
+  onKeyDown?: () => void;
+}) {
+  return (
+    <>
+      <button type="button">Before</button>
+      <ComplexSelector label="View options" value={[]} {...props}>
+        {() => <button type="button">Apply</button>}
+      </ComplexSelector>
+      <button type="button">After</button>
+    </>
+  );
+}
+
+const trigger = () => screen.getByRole('button', {name: 'View options'});
+
+describe('ComplexSelector disabled (spec:AST-085)', () => {
+  it('FR1: renders no native disabled and keeps its tab stop', async () => {
+    const user = userEvent.setup();
+    const {container} = render(<Harness isDisabled />);
+    expect(container.querySelector('[disabled]')).toBeNull();
+    expect(trigger()).toHaveAttribute('aria-disabled', 'true');
+    await user.click(screen.getByRole('button', {name: 'Before'}));
+    await user.tab();
+    expect(trigger()).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole('button', {name: 'After'})).toHaveFocus();
+  });
+
+  it('FR2: no press or key opens it or reaches a caller or ancestor handler', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const onKeyDown = vi.fn();
+    const onAncestorClick = vi.fn();
+    render(
+      <div onClick={onAncestorClick}>
+        <Harness isDisabled onClick={onClick} onKeyDown={onKeyDown} />
+      </div>,
+    );
+    await user.click(trigger());
+    await user.click(trigger().parentElement!);
+    trigger().focus();
+    for (const key of ['{Enter}', ' ', '{ArrowDown}']) {
+      await user.keyboard(key);
+    }
+    expect(trigger()).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onKeyDown).not.toHaveBeenCalled();
+    expect(onAncestorClick).not.toHaveBeenCalled();
+  });
+
+  it('FR4: keeps focus when it becomes disabled while focused', () => {
+    const {rerender} = render(<Harness isDisabled={false} />);
+    act(() => trigger().focus());
+    rerender(<Harness isDisabled />);
+    expect(trigger()).toHaveFocus();
+    expect(trigger()).toHaveAttribute('aria-disabled', 'true');
+  });
+});

package/src/ComplexSelector/ComplexSelector.tsx

@@ -609,10 +609,24 @@ export function ComplexSelector<Value>({
     event: React.KeyboardEvent<HTMLElement>,
   ) => {
     handleTriggerKeyDown(event);
-    onKeyDownProp?.(event);
+    // A disabled trigger keeps its tab stop but invokes no callback
+    // (`spec:AST-085` FR2).
+    if (!isDisabled) {
+      onKeyDownProp?.(event);
+    }
+  };
+  // A press on a disabled control reaches no handler, the component's or an
+  // ancestor's, as with a natively disabled button (`spec:AST-085` FR2).
+  const swallowDisabledPress = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
   };
   const handleControlBoxClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
+      if (isDisabled) {
+        event.stopPropagation();
+        return;
+      }
       if (triggerRef.current?.contains(event.target as Node)) {
         return;
       }
@@ -620,7 +634,7 @@ export function ComplexSelector<Value>({
       // press on the trigger itself, caller `onClick` included.
       triggerRef.current?.click();
     },
-    [],
+    [isDisabled],
   );
 
   useImperativeHandle(
@@ -767,8 +781,11 @@ export function ComplexSelector<Value>({
           aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
-          disabled={isDisabled}
-          onClick={handleTriggerButtonClick}
+          // A disabled trigger keeps its tab stop and says so through
+          // aria-disabled (`spec:AST-085` FR1). Its press runs neither the
+          // caller's handler nor the toggle (FR2).
+          aria-disabled={isDisabled ? 'true' : undefined}
+          onClick={isDisabled ? swallowDisabledPress : handleTriggerButtonClick}
           onKeyDown={handleTriggerButtonKeyDown}
           {...stylex.props(styles.trigger)}>
           <span {...stylex.props(styles.triggerText)}>{triggerContent}</span>

package/src/ContextMenu/ContextMenu.test.tsx

@@ -24,6 +24,7 @@ import {
   ContextMenuRadioItem,
 } from './index';
 import {DropdownMenuItem} from '../DropdownMenu/DropdownMenuItem';
+import {DropdownMenuSubMenu} from '../DropdownMenu/DropdownMenuSubMenu';
 import {Divider} from '../Divider';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import {warmMenuBottomSheet} from '../DropdownMenu/__tests__/warmMenuBottomSheet';
@@ -706,6 +707,46 @@ describe('ContextMenu dividers', () => {
 });
 
 describe('ContextMenu compound mode', () => {
+  it('shows a sub-menu with a header or footer as its rows alone, and says why in development', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      render(
+        <ContextMenu
+          menuContent={
+            <>
+              <DropdownMenuItem label="Rename" onClick={() => {}} />
+              <DropdownMenuSubMenu
+                label="Labels"
+                header={<input aria-label="Filter labels" />}
+                footer={<button type="button">Create label</button>}>
+                <DropdownMenuItem label="Bug" onClick={() => {}} />
+              </DropdownMenuSubMenu>
+            </>
+          }>
+          <div>Right-click me</div>
+        </ContextMenu>,
+      );
+      fireEvent.contextMenu(screen.getByText('Right-click me'));
+      const row = screen.getByRole('menuitem', {name: /Labels/, hidden: true});
+      // No region can sit outside this menu, so none renders inside it.
+      expect(row).toHaveAttribute('aria-haspopup', 'menu');
+      fireEvent.click(row, {detail: 1});
+      await waitFor(() => expect(row).toHaveAttribute('aria-expanded', 'true'));
+      expect(screen.queryByRole('dialog', {hidden: true})).toBeNull();
+      expect(
+        screen.queryByRole('textbox', {name: 'Filter labels', hidden: true}),
+      ).toBeNull();
+      expect(
+        screen.getByRole('menuitem', {name: 'Bug', hidden: true}),
+      ).toBeInTheDocument();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('DropdownMenuSubMenu: header and footer'),
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
   it('renders menuContent as menu items', () => {
     render(
       <ContextMenu

package/src/DateInput/DateInput.doc.mjs

@@ -49,14 +49,15 @@ export const docs = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: 'Disable the input and calendar.',
+      description:
+        'Disable the input and calendar. The field stays focusable and exposes `aria-disabled`; typing and opening are blocked.',
       default: 'false',
     },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip.',
     },
     {
       name: 'value',
@@ -275,7 +276,7 @@ export const docs = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled DateInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
     anatomy: [
@@ -368,7 +369,7 @@ export const docsZh = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled DateInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
   },
@@ -400,14 +401,14 @@ export const docsZh = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: '禁用输入框和日历。',
+      description: '禁用输入框和日历。输入框仍可聚焦并暴露 `aria-disabled`，但不能输入或打开日历。',
       default: 'false',
     },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        '说明输入框为何被禁用。与 isDisabled 一起使用时，在悬停/键盘聚焦时显示提示，并通过 aria-disabled 保持输入框可聚焦（仍阻止输入和激活）。请使用此属性，而不是用 Tooltip 包裹已禁用的 DateInput。',
+        '说明输入框为何被禁用。与 isDisabled 一起使用时，在悬停/键盘聚焦时显示提示（仍阻止输入和激活）。请使用此属性，而不是用 Tooltip 包裹已禁用的 DateInput。',
     },
     {
       name: 'value',
@@ -621,7 +622,7 @@ export const docsDense = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+          'Wrap a disabled DateInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
   },
@@ -633,7 +634,7 @@ export const docsDense = {
     isRequired: 'mark field required',
     isDisabled: 'disable input+calendar',
     disabledMessage:
-      'reason shown in a tooltip on hover/focus when disabled; keeps field focusable via aria-disabled',
+      "reason shown in a tooltip on hover/focus when disabled; describes the field's focusable controls",
     value: 'selected date YYYY-MM-DD',
     onChange: 'callback on date change',
     changeAction: 'async action after onChange; drives optimistic UI',

package/src/DateInput/DateInput.test.tsx

@@ -84,9 +84,14 @@ describe('DateInput', () => {
     expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-required');
   });
 
-  it('sets disabled attribute when isDisabled is true', () => {
+  it('keeps a disabled input focusable without native disabled (AST-085 FR1)', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
+    const input = screen.getByRole('combobox');
+    expect(input).not.toHaveAttribute('disabled');
+    expect(input).toHaveAttribute('aria-disabled', 'true');
+    expect(input).toHaveAttribute('readonly');
+    input.focus();
+    expect(input).toHaveFocus();
   });
 
   it('is not disabled by default', () => {
@@ -115,10 +120,16 @@ describe('DateInput', () => {
     expect(button).not.toBeDisabled();
   });
 
-  it('calendar button is disabled when isDisabled is true', () => {
+  it('calendar button is focusable-disabled when isDisabled is true', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
     const button = getButton('Open calendar');
-    expect(button).toBeDisabled();
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(button);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
   });
 
   it('does not call onChange while typing invalid input', async () => {
@@ -349,10 +360,15 @@ describe('DateInput', () => {
 
   // --- P1: Input disabled during isBusy (isLoading) ---
 
-  it('disables input and button when isLoading is true', () => {
+  it('blocks input and button without native disabled when isLoading is true', () => {
     render(<DateInput label="Date" isLoading onChange={() => {}} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('disabled');
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(getButton('Open calendar')).not.toHaveAttribute('disabled');
+    expect(getButton('Open calendar')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('shows spinner when isLoading is true', () => {
@@ -526,7 +542,8 @@ describe('DateInput', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
 
     const input = screen.getByRole('combobox');
-    expect(input).toBeDisabled();
+    expect(input).toHaveAttribute('aria-disabled', 'true');
+    expect(input).not.toHaveAttribute('disabled');
   });
 
   // --- P1: aria-busy on input ---
@@ -818,7 +835,10 @@ describe('DateInput', () => {
       expect(input).toHaveAttribute('aria-disabled', 'true');
       expect(input.getAttribute('aria-describedby')).toContain(tooltip.id);
       expect(tooltip).toHaveTextContent('Scheduling is locked');
-      expect(getButton('Open calendar')).toBeDisabled();
+      expect(getButton('Open calendar')).toHaveAttribute(
+        'aria-disabled',
+        'true',
+      );
     });
   });
 
@@ -875,6 +895,10 @@ describe('DateInput', () => {
       );
 
       const tooltip = screen.getByRole('tooltip', h);
+      // The calendar button keeps its enabled tab stop (spec:AST-085 FR1),
+      // so the input is the second stop.
+      await user.tab();
+      expect(getButton('Open calendar')).toHaveFocus();
       await user.tab();
       expect(screen.getByRole('combobox')).toHaveFocus();
       await waitFor(() => {
@@ -908,6 +932,50 @@ describe('DateInput', () => {
       expect(input).toHaveAttribute('readonly');
     });
 
+    it('does not call a caller onClick while disabled (AST-085 FR2)', () => {
+      const onClick = vi.fn();
+      render(<DateInput label="Date" isDisabled onClick={onClick} />);
+      fireEvent.click(screen.getByRole('combobox'));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('links the reason tooltip from the calendar button too (AST-085 FR5)', () => {
+      render(
+        <DateInput
+          label="Date"
+          isDisabled
+          disabledMessage="You need the Editor role"
+        />,
+      );
+      const tooltip = screen.getByRole('tooltip', h);
+      expect(
+        getButton('Open calendar').getAttribute('aria-describedby'),
+      ).toContain(tooltip.id);
+    });
+
+    it('drops a draft instead of committing it when the field becomes disabled (AST-085 FR2)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const {rerender} = render(
+        <DateInput label="Date" value="2026-03-10" onChange={onChange} />,
+      );
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      await user.clear(input);
+      rerender(
+        <DateInput
+          label="Date"
+          value="2026-03-10"
+          onChange={onChange}
+          isDisabled
+        />,
+      );
+      expect(input).toHaveFocus();
+      await user.keyboard('{Enter}');
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
     it('links the reason tooltip from the input via aria-describedby', () => {
       render(
         <DateInput
@@ -941,11 +1009,18 @@ describe('DateInput', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
-      render(<DateInput label="Date" isDisabled />);
+    it('blocks value changes and opening when disabled without a reason (AST-085 FR1, FR2)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(<DateInput label="Date" onChange={onChange} isDisabled />);
       const input = screen.getByRole('combobox');
-      expect(input).toBeDisabled();
-      expect(input).not.toHaveAttribute('aria-disabled');
+      expect(input).not.toHaveAttribute('disabled');
+      await user.click(input);
+      await user.type(input, '2026-03-15');
+      await user.keyboard('{ArrowDown}');
+      expect(input).toHaveValue('');
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(onChange).not.toHaveBeenCalled();
     });
   });