@astryxdesign/core 0.7.3-canary.f94e962 → 0.7.3

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

package/src/DateTimeInput/DateTimeInput.tsx

@@ -146,6 +146,18 @@ export type {
 const HORIZONTAL_SEGMENT_BASIS = 196;
 
 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']}`,
+    },
+  },
   row: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -332,12 +344,12 @@ export interface DateTimeInputProps 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 date and time fields stay focusable (via
-   * `aria-disabled`) so the reason is discoverable by keyboard and assistive
-   * technology. Typing and calendar activation stay blocked.
+   * keyboard focus, and the date and time fields are described by it, so the
+   * reason is discoverable by keyboard and assistive technology. Typing and
+   * calendar activation stay 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
    * ```
@@ -1032,7 +1044,7 @@ function PointerDateTimeField({
 
   const handleDateInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      // With a disabledMessage the input drops `disabled` for focusability, so
+      // The input is never natively disabled (AST-085 FR1), so
       // guard value mutation explicitly (readOnly also blocks typing).
       if (isEffectivelyDisabled) {
         return;
@@ -1338,7 +1350,7 @@ function PointerDateTimeField({
   // --- Time handlers ---
   const handleTimeInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      // With a disabledMessage the input drops `disabled` for focusability, so
+      // The input is never natively disabled (AST-085 FR1), so
       // guard value mutation explicitly (readOnly also blocks typing).
       if (isEffectivelyDisabled) {
         return;
@@ -1452,7 +1464,8 @@ function PointerDateTimeField({
       // window uses those same arrows to navigate candidates, so guard the
       // composing keydown (fires before compositionend) to avoid stealing them
       // mid-composition. See utils/ime.ts.
-      if (isImeKeyEvent(e.nativeEvent)) {
+      // A disabled or busy field steps nothing, so it announces nothing (FR2).
+      if (isImeKeyEvent(e.nativeEvent) || isEffectivelyDisabled) {
         return;
       }
 
@@ -1664,6 +1677,7 @@ function PointerDateTimeField({
               sizeStyles[size],
               styles.dateWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
+              isEffectivelyDisabled && styles.disabledFocusRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&
@@ -1682,7 +1696,7 @@ function PointerDateTimeField({
               max={calendarMax}
               isDateDisabled={isDateDisabled}
               isEffectivelyDisabled={isEffectivelyDisabled}
-              hasDisabledMessage={showsDisabledMessage}
+              isFocusableDisabled
               isEffectivelyRequired={isEffectivelyRequired}
               isBusy={isBusy}
               statusType={status?.type}
@@ -1691,7 +1705,7 @@ function PointerDateTimeField({
                 ...controlProps,
                 'aria-labelledby': controlLabelledBy,
                 onBlur: onBlurProp,
-                onClick: onClickProp,
+                onClick: isEffectivelyDisabled ? undefined : onClickProp,
                 onKeyDown: onKeyDownProp,
               }}
             />
@@ -1700,7 +1714,13 @@ function PointerDateTimeField({
               <button
                 type="button"
                 onClick={handleCalendarToggle}
-                disabled={isEffectivelyDisabled}
+                aria-disabled={isEffectivelyDisabled || undefined}
+                // A tab stop while disabled too, so it carries the reason (FR5).
+                aria-describedby={
+                  showsDisabledMessage
+                    ? disabledMessageTooltip.describedBy
+                    : undefined
+                }
                 aria-label={
                   popover.isOpen
                     ? t('@astryx.dateInput.toggleCalendarClose')
@@ -1735,17 +1755,16 @@ function PointerDateTimeField({
                 value={dateDisplayValue}
                 onChange={handleDateInputChange}
                 onBlur={chainEventHandlers(handleDateBlur, onBlurProp)}
-                onClick={chainEventHandlers(handleDateInputClick, onClickProp)}
+                onClick={
+                  isEffectivelyDisabled
+                    ? undefined
+                    : chainEventHandlers(handleDateInputClick, onClickProp)
+                }
                 onKeyDown={chainEventHandlers(handleDateKeyDown, onKeyDownProp)}
                 aria-labelledby={controlLabelledBy}
                 placeholder={placeholder}
-                // With a disabledMessage the input keeps focusability via
-                // aria-disabled so the reason is focus-discoverable; typing is
-                // blocked with readOnly and the mutation guards, and calendar
-                // activation is blocked by the isEffectivelyDisabled guards.
-                disabled={isEffectivelyDisabled && !showsDisabledMessage}
-                aria-disabled={showsDisabledMessage ? 'true' : undefined}
-                readOnly={showsDisabledMessage || undefined}
+                aria-disabled={isEffectivelyDisabled ? 'true' : undefined}
+                readOnly={isEffectivelyDisabled || undefined}
                 aria-describedby={ariaDescribedBy}
                 aria-required={isEffectivelyRequired ? 'true' : undefined}
                 aria-invalid={
@@ -1807,6 +1826,7 @@ function PointerDateTimeField({
               sizeStyles[size],
               styles.timeWrapper,
               isEffectivelyDisabled && inputWrapperStyles.disabled,
+              isEffectivelyDisabled && styles.disabledFocusRing,
               status && inputStatusBorderStyles[status.type],
               status &&
                 !isEffectivelyDisabled &&
@@ -1830,7 +1850,7 @@ function PointerDateTimeField({
               max={timeMax}
               hourFormat={hourFormat}
               isEffectivelyDisabled={isEffectivelyDisabled}
-              hasDisabledMessage={showsDisabledMessage}
+              isFocusableDisabled
               isEffectivelyRequired={isEffectivelyRequired}
               isBusy={isBusy}
               statusType={status?.type}
@@ -1882,12 +1902,8 @@ function PointerDateTimeField({
                     ? timeOptionId(activeTimeIndex)
                     : undefined
                 }
-                // With a disabledMessage the input keeps focusability via
-                // aria-disabled so the reason is focus-discoverable; typing is
-                // blocked with readOnly and the mutation guards.
-                disabled={isEffectivelyDisabled && !showsDisabledMessage}
-                aria-disabled={showsDisabledMessage ? 'true' : undefined}
-                readOnly={showsDisabledMessage || undefined}
+                aria-disabled={isEffectivelyDisabled ? 'true' : undefined}
+                readOnly={isEffectivelyDisabled || undefined}
                 aria-label={resolvedTimeLabel}
                 aria-describedby={ariaDescribedBy}
                 aria-required={isEffectivelyRequired ? 'true' : undefined}

package/src/DateTimeInput/DateTimeInputTouch.test.tsx

@@ -987,6 +987,30 @@ describe('DateTimeInput touch surface', () => {
   });
 });
 
+describe('DateTimeInput touch surface: disabled without a reason', () => {
+  it('stays focusable and inert, and skips a caller onClick (AST-085 FR1, FR2)', () => {
+    const onClick = vi.fn();
+    render(
+      <DateTimeInput
+        label="Meeting"
+        isDisabled
+        onClick={onClick}
+        onChange={() => {}}
+      />,
+    );
+    for (const field of [dateField(), timeField()]) {
+      expect(field).not.toHaveAttribute('disabled');
+      expect(field).toHaveAttribute('aria-disabled', 'true');
+      field.focus();
+      expect(field).toHaveFocus();
+      fireEvent.click(field);
+      fireEvent.keyDown(field, {key: 'Enter'});
+      expect(field).toHaveAttribute('aria-expanded', 'false');
+    }
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
 describe('DateTimeInput touch surface: no stale commit', () => {
   // Records what each commit painted, so a value that is corrected one render
   // later (by an effect) shows up as a stale intermediate frame.

package/src/DateTimeInput/NativeDateSegment.tsx

@@ -60,7 +60,8 @@ export type NativeDateSegmentProps = {
   max?: ISODateString;
   isDateDisabled: (date: ReturnType<typeof plainDateFromISO>) => boolean;
   isEffectivelyDisabled: boolean;
-  hasDisabledMessage: boolean;
+  /** While disabled, stay focusable: aria-disabled and readOnly, not `disabled`. */
+  isFocusableDisabled: boolean;
   isEffectivelyRequired: boolean;
   isBusy: boolean;
   statusType?: InputStatusType;
@@ -87,7 +88,7 @@ export function NativeDateSegment({
   max,
   isDateDisabled,
   isEffectivelyDisabled,
-  hasDisabledMessage,
+  isFocusableDisabled,
   isEffectivelyRequired,
   isBusy,
   statusType,
@@ -262,7 +263,7 @@ export function NativeDateSegment({
       <button
         type="button"
         onClick={openPicker}
-        disabled={isEffectivelyDisabled}
+        aria-disabled={isEffectivelyDisabled || undefined}
         aria-label={t('@astryx.dateInput.openCalendar')}
         tabIndex={-1}
         {...stylex.props(
@@ -290,9 +291,11 @@ export function NativeDateSegment({
           onBlur={chainEventHandlers(handleBlur, onBlurProp)}
           min={min}
           max={max}
-          disabled={isEffectivelyDisabled && !hasDisabledMessage}
-          aria-disabled={hasDisabledMessage ? 'true' : undefined}
-          readOnly={hasDisabledMessage || undefined}
+          disabled={isEffectivelyDisabled && !isFocusableDisabled}
+          aria-disabled={
+            isEffectivelyDisabled && isFocusableDisabled ? 'true' : undefined
+          }
+          readOnly={(isEffectivelyDisabled && isFocusableDisabled) || undefined}
           aria-describedby={ariaDescribedBy}
           aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={

package/src/DateTimeInput/NativePickerSegments.test.tsx

@@ -161,6 +161,37 @@ describe('DateTimeInput nativePicker', () => {
     expect(getNativeTimeInput()).toBeInTheDocument();
   });
 
+  it('keeps disabled native controls focusable and inert (AST-085 FR1, FR2)', () => {
+    stubPointer(true);
+    const onClick = vi.fn();
+    render(
+      <DateTimeInput
+        label="Meeting"
+        isDisabled
+        onClick={onClick}
+        onChange={() => {}}
+      />,
+    );
+    for (const input of [getNativeDateInput(), getNativeTimeInput()]) {
+      expect(input).not.toHaveAttribute('disabled');
+      expect(input).toHaveAttribute('aria-disabled', 'true');
+      expect(input).toHaveAttribute('readonly');
+      input.focus();
+      expect(input).toHaveFocus();
+    }
+    fireEvent.click(getNativeDateInput());
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('leaves enabled native controls editable (AST-043)', () => {
+    stubPointer(true);
+    render(<DateTimeInput label="Meeting" onChange={() => {}} />);
+    for (const input of [getNativeDateInput(), getNativeTimeInput()]) {
+      expect(input).not.toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('aria-disabled');
+    }
+  });
+
   it('drops in-page popup ARIA because the OS owns both pickers', () => {
     stubPointer(true);
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);