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

package/src/DateRangeInput/DateRangeInput.spec.md

@@ -90,12 +90,12 @@ preset-list anatomy and its additive theming surface.
 
 ### Representative states
 
-| State             | Required invariant                                                                                                                          | Allowed variation       |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
-| No presets        | No preset group or preset-button target renders.                                                                                            | Calendar configuration  |
-| Presets, no match | Every button carries the preset target with no selected state.                                                                              | Preset count and labels |
-| Applied preset    | The matching button carries `aria-current="true"` and the target's selected state.                                                          | Selected range          |
-| Disabled preset   | A preset that violates an endpoint date constraint or a range-span constraint is natively disabled and carries the target's disabled state. | Constraint source       |
+| State             | Required invariant                                                                                                                                    | Allowed variation       |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| No presets        | No preset group or preset-button target renders.                                                                                                      | Calendar configuration  |
+| Presets, no match | Every button carries the preset target with no selected state.                                                                                        | Preset count and labels |
+| Applied preset    | The matching button carries `aria-current="true"` and the target's selected state.                                                                    | Selected range          |
+| Disabled preset   | A preset that violates an endpoint date constraint or a range-span constraint is disabled per `spec:AST-085` and carries the target's disabled state. | Constraint source       |
 
 ### Transformation and precedence order
 
@@ -120,8 +120,8 @@ No new performance or resource constraint is introduced.
 - **AR2 — Current state.** The applied preset remains exposed with
   `aria-current="true"`; theme state reflection is additive.
 - **AR3 — Disabled state.** A preset that violates an endpoint date constraint or
-  a range-span constraint remains natively disabled; theme state reflection does
-  not replace that behavior.
+  a range-span constraint is disabled and stays focusable (`spec:AST-085`); theme
+  state reflection does not replace that behavior.
 
 ## Design relationships
 
@@ -172,11 +172,11 @@ No new performance or resource constraint is introduced.
 
 ## Verification map
 
-| Contract            | Verification                                                               | Representative states                                                  | Mutation or failure expectation                                             | Audit section                  |
-| ------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------ |
-| FR1, FR2, AR1–AR3   | `DateRangeInput.test.tsx`                                                  | no match, applied preset, endpoint-invalid preset, span-invalid preset | Semantics or state attributes disappear                                     | `audit:DateRangeInput/presets` |
-| FR3, FR4            | `DateRangeInput.test.tsx`, `themingTargets.test.ts`, generated probe theme | group target, selected button, disabled button                         | Target class/state is missing, undocumented, or placed on the wrong element | `audit:DateRangeInput/theming` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                              | all documented anatomy                                                 | Target ownership or anatomy names drift                                     | `audit:DateRangeInput/theming` |
+| Contract            | Verification                                                                      | Representative states                                                  | Mutation or failure expectation                                             | Audit section                  |
+| ------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------ |
+| FR1, FR2, AR1–AR3   | `DateRangeInput.test.tsx`; disabled-preset focusability (AR3) pending conformance | no match, applied preset, endpoint-invalid preset, span-invalid preset | Semantics or state attributes disappear                                     | `audit:DateRangeInput/presets` |
+| FR3, FR4            | `DateRangeInput.test.tsx`, `themingTargets.test.ts`, generated probe theme        | group target, selected button, disabled button                         | Target class/state is missing, undocumented, or placed on the wrong element | `audit:DateRangeInput/theming` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                     | all documented anatomy                                                 | Target ownership or anatomy names drift                                     | `audit:DateRangeInput/theming` |
 
 ## Decision log
 

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -23,6 +23,8 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
 // made every role+name query compute ~85 accessible names through jsdom's
 // slow getComputedStyle (~450ms per query). See fastRoleQueries.ts.
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
 import {Icon} from '../Icon';
@@ -155,7 +157,46 @@ describe('DateRangeInput', () => {
       />,
     );
     const trigger = getButton(/Range/);
-    expect(trigger).toBeDisabled();
+    expect(trigger).not.toHaveAttribute('disabled');
+    expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('restores the focus ring on a focused disabled field (AST-085 FR6)', () => {
+    // The same declarations as the field's ring style compile to the same
+    // atomic classes.
+    const ringClasses = stylex
+      .props(
+        stylex.create({
+          ring: {
+            borderColor: {
+              default: colorVars['--color-border-emphasized'],
+              ':focus-within': colorVars['--color-accent'],
+            },
+            boxShadow: {
+              default: 'none',
+              ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+            },
+          },
+        }).ring,
+      )
+      .className!.split(' ')
+      // Keep the atomic classes, not the dev-only debug name.
+      .filter(name => !name.includes('__'));
+    render(
+      <DateRangeInput
+        label="Range"
+        isDisabled
+        value={null}
+        onChange={() => {}}
+      />,
+    );
+    // The shared disabled style alone drops these :focus-within declarations.
+    const wrapper = getButton(/Range/).parentElement!;
+    for (const name of ringClasses) {
+      expect(wrapper).toHaveClass(name);
+    }
   });
 
   it('is not disabled by default', () => {
@@ -272,7 +313,8 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(getButton('Open calendar')).not.toHaveAttribute('disabled');
+    expect(getButton('Open calendar')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('renders with size="lg"', () => {
@@ -526,7 +568,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -544,7 +587,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -562,7 +606,8 @@ describe('DateRangeInput', () => {
       );
 
       const preset = getButton('Last 7 days');
-      expect(preset).toBeDisabled();
+      expect(preset).not.toHaveAttribute('disabled');
+      expect(preset).toHaveAttribute('aria-disabled', 'true');
       fireEvent.click(preset);
       expect(handleChange).not.toHaveBeenCalled();
     });
@@ -590,7 +635,7 @@ describe('DateRangeInput', () => {
 
       const getRangeCallsBeforeClick = getRange.mock.calls.length;
       const preset = getButton('Allowed range');
-      expect(preset).not.toBeDisabled();
+      expect(preset).not.toHaveAttribute('aria-disabled');
       fireEvent.click(preset);
       expect(handleChange).toHaveBeenCalledWith(range);
       expect(getRangeCallsAtChange).toBe(getRangeCallsBeforeClick);
@@ -613,7 +658,10 @@ describe('DateRangeInput', () => {
     // accessibility tree; use hidden: true to find it.
     const h = {hidden: true} as const;
 
-    function renderDisabled(props?: {disabledMessage?: string}) {
+    function renderDisabled(props?: {
+      disabledMessage?: string;
+      onClick?: () => void;
+    }) {
       return render(
         <DateRangeInput
           label="Range"
@@ -699,11 +747,22 @@ describe('DateRangeInput', () => {
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
-      renderDisabled();
+    it('blocks activation and a caller onClick when disabled without a reason (AST-085 FR1, FR2)', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      renderDisabled({onClick});
       const trigger = getButton(/Range:/);
-      expect(trigger).toBeDisabled();
-      expect(trigger).not.toHaveAttribute('aria-disabled');
+      expect(trigger).not.toHaveAttribute('disabled');
+      await user.click(trigger);
+      await user.keyboard('{Enter}');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('blocks the calendar button while disabled (AST-085 FR2)', () => {
+      renderDisabled();
+      fireEvent.click(getButton('Open calendar'));
+      expect(getButton(/Range:/)).toHaveAttribute('aria-expanded', 'false');
     });
   });
 });
@@ -988,13 +1047,19 @@ describe('DateRangeInput range-span forwarding', () => {
     fireEvent.click(getButton('Open calendar'));
 
     // Before a start is picked, a far-off day is selectable.
-    expect(dayButton('2026-01-20')).not.toBeDisabled();
+    expect(dayButton('2026-01-20')).not.toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
 
     fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
 
     // A 7-day window spans start ± 6 days: Jan 16 is the edge, Jan 17 is out.
-    expect(dayButton('2026-01-16')).not.toBeDisabled();
-    expect(dayButton('2026-01-17')).toBeDisabled();
+    expect(dayButton('2026-01-16')).not.toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    expect(dayButton('2026-01-17')).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('disables a preset whose range violates the span cap', () => {
@@ -1030,9 +1095,10 @@ describe('DateRangeInput range-span forwarding', () => {
     // The 3-day preset fits the 7-day cap; the 30-day preset can't be committed.
     const withinCap = getButton('Last 3 days');
     const overCap = getButton('Last 30 days');
-    expect(withinCap).not.toBeDisabled();
+    expect(withinCap).not.toHaveAttribute('aria-disabled');
     expect(withinCap).not.toHaveAttribute('data-disabled');
-    expect(overCap).toBeDisabled();
+    expect(overCap).not.toHaveAttribute('disabled');
+    expect(overCap).toHaveAttribute('aria-disabled', 'true');
     expect(overCap).toHaveClass('astryx-date-range-input-preset');
     expect(overCap).toHaveAttribute('data-disabled', 'disabled');
 

package/src/DateRangeInput/DateRangeInput.tsx

@@ -97,6 +97,18 @@ export type {
 } from '../Field';
 
 const styles = stylex.create({
+  // The shared disabled style drops the focus ring; restore it while a
+  // control inside the field holds focus (spec:AST-085 FR6). Defaults repeat it.
+  disabledFocusRing: {
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':focus-within': colorVars['--color-accent'],
+    },
+    boxShadow: {
+      default: 'none',
+      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+    },
+  },
   trigger: {
     display: 'block',
     flex: 1,
@@ -309,12 +321,12 @@ export interface DateRangeInputProps extends Omit<
   /**
    * Explains why the input is disabled. When set together with
    * `isDisabled`, the input shows a tooltip with this text on hover and
-   * keyboard focus, and the trigger stays focusable (via `aria-disabled`)
-   * so the reason is discoverable by keyboard and assistive technology.
-   * Activation stays blocked.
+   * keyboard focus, and the trigger is described by it, so the reason is
+   * discoverable by keyboard and assistive technology. Activation stays
+   * blocked.
    *
-   * Use this instead of wrapping a disabled input in `Tooltip` — disabled
-   * controls don't emit the pointer events an external tooltip needs.
+   * Use this instead of wrapping a disabled input in `Tooltip`, so the
+   * reason is tied to the field.
    *
    * @example
    * ```
@@ -546,12 +558,12 @@ export function DateRangeInput({
   const isBusy = isLoading || optimisticValue !== value;
   const isEffectivelyDisabled = isDisabled || isBusy;
 
-  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
-  // tooltip listeners attach to the trigger container (which already exists)
-  // and the trigger button stays perceivable via aria-disabled instead of the
-  // disabled attribute. Activation is blocked by the isEffectivelyDisabled
-  // guard in handleToggle. Only the persistent isDisabled state (not the
-  // transient busy state) surfaces a reason.
+  // A disabled or busy field never renders native `disabled` (spec:AST-085
+  // FR1): its buttons stay focusable via aria-disabled, and activation is
+  // blocked by the isEffectivelyDisabled guard in handleToggle. The
+  // disabled-reason tooltip's listeners attach to the trigger container. Only
+  // the persistent isDisabled state (not the transient busy state) surfaces a
+  // reason.
   const showsDisabledMessage = isDisabled && !!disabledMessage;
   const disabledMessageTooltip = useTooltip({
     placement: 'above',
@@ -695,6 +707,7 @@ export function DateRangeInput({
             inputWrapperStyles.base,
             sizeStyles[size],
             isEffectivelyDisabled && inputWrapperStyles.disabled,
+            isEffectivelyDisabled && styles.disabledFocusRing,
             status && inputStatusBorderStyles[status.type],
             status &&
               !isEffectivelyDisabled &&
@@ -708,7 +721,7 @@ export function DateRangeInput({
         <button
           type="button"
           onClick={handleToggle}
-          disabled={isEffectivelyDisabled}
+          aria-disabled={isEffectivelyDisabled || undefined}
           aria-label={
             popover.isOpen
               ? t('@astryx.dateInput.toggleCalendarClose')
@@ -734,12 +747,14 @@ export function DateRangeInput({
           ref={triggerButtonRef}
           id={id}
           type="button"
-          onClick={chainEventHandlers(handleToggle, onClickProp)}
-          // With a disabledMessage the trigger keeps focusability via
-          // aria-disabled so the reason is focus-discoverable; activation is
-          // still blocked by the isEffectivelyDisabled guard in handleToggle.
-          disabled={isEffectivelyDisabled && !showsDisabledMessage}
-          aria-disabled={showsDisabledMessage ? 'true' : undefined}
+          // The browser still dispatches a click on an aria-disabled button,
+          // so a caller's onClick is skipped too (spec:AST-085 FR2).
+          onClick={
+            isEffectivelyDisabled
+              ? undefined
+              : chainEventHandlers(handleToggle, onClickProp)
+          }
+          aria-disabled={isEffectivelyDisabled ? 'true' : undefined}
           // A caller aria-label replaces the trigger's name; a caller
           // aria-labelledby is read after it (label and selected range).
           aria-label={ariaLabelProp ?? triggerAriaLabel}
@@ -807,8 +822,13 @@ export function DateRangeInput({
                     // marked with aria-current (not aria-selected, a listbox
                     // concept that contradicted the Tab interaction) (forms-5).
                     aria-current={isActive ? 'true' : undefined}
-                    disabled={isPresetDisabled}
-                    onClick={() => handleRangeSelect(presetRange)}
+                    // Focusable while disabled (AR3, spec:AST-085 FR1).
+                    aria-disabled={isPresetDisabled || undefined}
+                    onClick={() => {
+                      if (!isPresetDisabled) {
+                        handleRangeSelect(presetRange);
+                      }
+                    }}
                     {...mergeProps(
                       themeProps('date-range-input-preset', {
                         selected: isActive ? 'selected' : null,

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -51,14 +51,15 @@ export const docs = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: 'Disable the input and picker.',
+      description:
+        'Disable the input and picker. The fields stay focusable and expose `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 DateTimeInput 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 and describes the fields (activation stays blocked). Use this instead of wrapping a disabled DateTimeInput in Tooltip.',
     },
     {
       name: 'value',
@@ -289,7 +290,7 @@ export const docs = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateTimeInput 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 DateTimeInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
     anatomy: [
@@ -412,7 +413,7 @@ export const docsZh = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateTimeInput 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 DateTimeInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
   },
@@ -444,14 +445,14 @@ export const docsZh = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: '禁用输入框和选择器。',
+      description: '禁用输入框和选择器。字段仍可聚焦并暴露 `aria-disabled`，但不能输入或打开选择器。',
       default: 'false',
     },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        '说明输入框为何被禁用。与 isDisabled 一起使用时，在悬停/键盘聚焦时显示提示，并通过 aria-disabled 保持日期和时间字段可聚焦（仍阻止输入和激活）。请使用此属性，而不是用 Tooltip 包裹已禁用的 DateTimeInput。',
+        '说明输入框为何被禁用。与 isDisabled 一起使用时，在悬停/键盘聚焦时显示提示，并描述日期和时间字段（仍阻止输入和激活）。请使用此属性，而不是用 Tooltip 包裹已禁用的 DateTimeInput。',
     },
     {
       name: 'value',
@@ -667,7 +668,7 @@ export const docsDense = {
       {
         guidance: false,
         description:
-          'Wrap a disabled DateTimeInput 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 DateTimeInput in Tooltip to explain why it is disabled. Use the disabledMessage prop instead, which ties the reason to the field.',
       },
     ],
   },
@@ -679,7 +680,7 @@ export const docsDense = {
     isRequired: 'mark field required',
     isDisabled: 'disable input+picker',
     disabledMessage:
-      'reason shown in a tooltip on hover/focus when disabled; keeps fields focusable via aria-disabled',
+      'reason shown in a tooltip on hover/focus when disabled; describes the fields',
     value: 'selected datetime ISO 8601',
     onChange: 'callback on datetime change',
     changeAction: 'async action after onChange; drives optimistic UI',

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -14,6 +14,7 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
@@ -288,10 +289,52 @@ describe('DateTimeInput', () => {
     expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-required');
   });
 
-  it('sets disabled on both inputs when isDisabled is true', () => {
+  it('keeps both disabled inputs focusable without native disabled (AST-085 FR1)', () => {
     render(<DateTimeInput label="Meeting" isDisabled onChange={() => {}} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-    expect(screen.getByLabelText('Meeting time')).toBeDisabled();
+    for (const input of [
+      screen.getByRole('combobox'),
+      screen.getByLabelText('Meeting time'),
+    ]) {
+      expect(input).not.toHaveAttribute('disabled');
+      expect(input).toHaveAttribute('aria-disabled', 'true');
+      expect(input).toHaveAttribute('readonly');
+      input.focus();
+      expect(input).toHaveFocus();
+    }
+  });
+
+  it('restores the focus ring on a focused disabled field (AST-085 FR6)', () => {
+    // The same declarations as the field's ring style compile to the same
+    // atomic classes; the shared disabled style alone drops them.
+    const ringClasses = stylex
+      .props(
+        stylex.create({
+          ring: {
+            borderColor: {
+              default: colorVars['--color-border-emphasized'],
+              ':focus-within': colorVars['--color-accent'],
+            },
+            boxShadow: {
+              default: 'none',
+              ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+            },
+          },
+        }).ring,
+      )
+      .className!.split(' ')
+      .filter(name => !name.includes('__'));
+    render(<DateTimeInput label="Meeting" isDisabled onChange={() => {}} />);
+    for (const input of [
+      screen.getByRole('combobox'),
+      screen.getByLabelText('Meeting time'),
+    ]) {
+      const wrapper = input.closest(
+        '.astryx-date-time-input-date-segment, .astryx-date-time-input-time-segment',
+      )!;
+      for (const name of ringClasses) {
+        expect(wrapper).toHaveClass(name);
+      }
+    }
   });
 
   it('is not disabled by default', () => {
@@ -366,14 +409,25 @@ describe('DateTimeInput', () => {
   it('calendar button is disabled when isDisabled is true', () => {
     render(<DateTimeInput label="Meeting" 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('disables inputs and button when isLoading is true', () => {
     render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
-    expect(screen.getByLabelText('Meeting time')).toBeDisabled();
-    expect(getButton('Open calendar')).toBeDisabled();
+    for (const el of [
+      screen.getByRole('combobox'),
+      screen.getByLabelText('Meeting time'),
+      getButton('Open calendar'),
+    ]) {
+      expect(el).not.toHaveAttribute('disabled');
+      expect(el).toHaveAttribute('aria-disabled', 'true');
+    }
   });
 
   it('sets aria-busy when isLoading is true', () => {
@@ -872,6 +926,12 @@ describe('DateTimeInput', () => {
       );
 
       const tooltip = screen.getByRole('tooltip', h);
+      // The calendar button keeps its enabled tab stop (spec:AST-085 FR1).
+      await user.tab();
+      expect(getButton('Open calendar')).toHaveFocus();
+      expect(
+        getButton('Open calendar').getAttribute('aria-describedby'),
+      ).toContain(tooltip.id);
       await user.tab();
       expect(screen.getByRole('combobox')).toHaveFocus();
       await waitFor(() => {
@@ -948,11 +1008,48 @@ describe('DateTimeInput', () => {
       expect(onChange).not.toHaveBeenCalled();
     });
 
-    it('remains natively disabled when disabled without a reason', () => {
-      render(<DateTimeInput label="When" onChange={() => {}} isDisabled />);
+    it('blocks typing, opening and a caller onClick when disabled without a reason (AST-085 FR2)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const onClick = vi.fn();
+      render(
+        <DateTimeInput
+          label="When"
+          onChange={onChange}
+          onClick={onClick}
+          isDisabled
+        />,
+      );
+      const dateInput = screen.getByRole('combobox');
+      await user.click(dateInput);
+      await user.type(dateInput, '2026-03-15');
+      await user.keyboard('{ArrowDown}');
+      expect(dateInput).toHaveValue('');
+      expect(dateInput).toHaveAttribute('aria-expanded', 'false');
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('drops a date draft instead of committing it when the field becomes disabled (AST-085 FR2)', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const value = '2026-03-10T09:00' as ISODateTimeString;
+      const {rerender} = render(
+        <DateTimeInput label="When" value={value} onChange={onChange} />,
+      );
       const dateInput = screen.getByRole('combobox');
-      expect(dateInput).toBeDisabled();
-      expect(dateInput).not.toHaveAttribute('aria-disabled');
+      await user.click(dateInput);
+      await user.clear(dateInput);
+      rerender(
+        <DateTimeInput
+          label="When"
+          value={value}
+          onChange={onChange}
+          isDisabled
+        />,
+      );
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
     });
 
     it('does not swap in the time format-hint placeholder on focus while disabled', () => {
@@ -1030,6 +1127,24 @@ describe('DateTimeInput', () => {
       });
     });
 
+    it('announces no step from a disabled time field (AST-085 FR2)', async () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+          isDisabled
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByLabelText('Meeting time'), {
+        key: 'ArrowUp',
+      });
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(politeRegion()?.textContent ?? '').not.toContain('2:31 PM');
+    });
+
     it('politely announces the new time after ArrowDown stepping', async () => {
       render(
         <DateTimeInput