@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -9,8 +9,9 @@
  * SYNC: When DateRangeInput.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
 
@@ -23,9 +24,7 @@ describe('DateRangeInput', () => {
   });
 
   it('renders placeholder when value is null', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     expect(screen.getByText('Select date range')).toBeInTheDocument();
   });
 
@@ -99,9 +98,7 @@ describe('DateRangeInput', () => {
   });
 
   it('does not set aria-required when isRequired is false', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).not.toHaveAttribute('aria-required');
   });
@@ -120,25 +117,19 @@ describe('DateRangeInput', () => {
   });
 
   it('is not disabled by default', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).not.toBeDisabled();
   });
 
   it('trigger has aria-haspopup="dialog"', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
   });
 
   it('trigger has aria-expanded=false by default', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
@@ -201,9 +192,7 @@ describe('DateRangeInput', () => {
   });
 
   it('calendar icon button is present', () => {
-    render(
-      <DateRangeInput label="Range" value={null} onChange={() => {}} />,
-    );
+    render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
     expect(
       screen.getByRole('button', {name: 'Open calendar'}),
     ).toBeInTheDocument();
@@ -321,4 +310,177 @@ describe('DateRangeInput', () => {
       expect(onChange).toHaveBeenCalledWith(null);
     });
   });
+
+  describe('presets', () => {
+    const presets = [
+      {
+        label: 'Last 7 days',
+        getRange: (): DateRange => ({
+          start: '2026-03-01',
+          end: '2026-03-07',
+        }),
+      },
+      {
+        label: 'This month',
+        getRange: (): DateRange => ({
+          start: '2026-03-01',
+          end: '2026-03-31',
+        }),
+      },
+    ];
+
+    it('renders presets as a labeled group of buttons, not a listbox (forms-5)', () => {
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={() => {}}
+          presets={presets}
+        />,
+      );
+      // The preset sidebar is a group of action buttons — not a listbox of
+      // options (which would announce a Tab-navigable listbox it isn't).
+      expect(
+        screen.queryByRole('listbox', {hidden: true}),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Last 7 days', hidden: true}),
+      ).toBeInTheDocument();
+    });
+
+    it('marks the applied preset with aria-current, not aria-selected', () => {
+      render(
+        <DateRangeInput
+          label="Range"
+          value={{start: '2026-03-01', end: '2026-03-07'}}
+          onChange={() => {}}
+          presets={presets}
+        />,
+      );
+      const active = screen.getByRole('button', {
+        name: 'Last 7 days',
+        hidden: true,
+      });
+      expect(active).toHaveAttribute('aria-current', 'true');
+      expect(active).not.toHaveAttribute('aria-selected');
+      const inactive = screen.getByRole('button', {
+        name: 'This month',
+        hidden: true,
+      });
+      expect(inactive).not.toHaveAttribute('aria-current');
+    });
+  });
+  describe('disabledMessage', () => {
+    // jsdom does not implement the Popover API used by the tooltip, so mock
+    // showPopover/hidePopover to toggle a `popover-open` attribute the tests
+    // can assert on.
+    beforeEach(() => {
+      HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+        this.setAttribute('popover-open', '');
+      });
+      HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+        this.removeAttribute('popover-open');
+      });
+    });
+
+    // jsdom popover content is in the DOM but not "visible" in the
+    // accessibility tree; use hidden: true to find it.
+    const h = {hidden: true} as const;
+
+    function renderDisabled(props?: {disabledMessage?: string}) {
+      return render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={() => {}}
+          isDisabled
+          {...props}
+        />,
+      );
+    }
+
+    it('shows the reason tooltip on hover when disabled with a reason', async () => {
+      renderDisabled({disabledMessage: 'You need the Editor role'});
+
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const container = trigger.parentElement as HTMLElement;
+      const tooltip = screen.getByRole('tooltip', h);
+      expect(tooltip).toHaveTextContent('You need the Editor role');
+
+      fireEvent.mouseEnter(container);
+      await waitFor(() => {
+        expect(tooltip).toHaveAttribute('popover-open');
+      });
+
+      fireEvent.mouseLeave(container);
+      await waitFor(() => {
+        expect(tooltip).not.toHaveAttribute('popover-open');
+      });
+    });
+
+    it('shows the reason tooltip on keyboard focus', async () => {
+      const user = userEvent.setup();
+      renderDisabled({disabledMessage: 'You need the Editor role'});
+
+      const tooltip = screen.getByRole('tooltip', h);
+      await user.tab();
+      expect(screen.getByRole('button', {name: /Range:/, ...h})).toHaveFocus();
+      await waitFor(() => {
+        expect(tooltip).toHaveAttribute('popover-open');
+      });
+    });
+
+    it('does not render a tooltip when not disabled', () => {
+      render(
+        <DateRangeInput
+          label="Range"
+          value={null}
+          onChange={() => {}}
+          disabledMessage="You need the Editor role"
+        />,
+      );
+      expect(screen.queryByRole('tooltip', h)).not.toBeInTheDocument();
+    });
+
+    it('does not render a tooltip when disabled without a reason', () => {
+      renderDisabled();
+      expect(screen.queryByRole('tooltip', h)).not.toBeInTheDocument();
+    });
+
+    it('keeps the trigger focusable via aria-disabled when a reason is provided', () => {
+      renderDisabled({disabledMessage: 'You need the Editor role'});
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      expect(trigger).not.toBeDisabled();
+      expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('links the reason tooltip from the trigger via aria-describedby', () => {
+      renderDisabled({disabledMessage: 'You need the Editor role'});
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const tooltip = screen.getByRole('tooltip', h);
+      expect(trigger.getAttribute('aria-describedby')).toContain(tooltip.id);
+    });
+
+    it('blocks activation while focusable-disabled', async () => {
+      const user = userEvent.setup();
+      renderDisabled({disabledMessage: 'You need the Editor role'});
+
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+      await user.keyboard('{Enter}');
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('remains natively disabled when disabled without a reason', () => {
+      renderDisabled();
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      expect(trigger).toBeDisabled();
+      expect(trigger).not.toHaveAttribute('aria-disabled');
+    });
+  });
 });

package/src/DateRangeInput/DateRangeInput.tsx

@@ -48,6 +48,7 @@ import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
 import {Calendar, type ISODateString, type DateRange} from '../Calendar';
 import {usePopover} from '../Popover';
+import {useTooltip} from '../Tooltip';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -240,6 +241,29 @@ export interface DateRangeInputProps extends Omit<
    */
   isDisabled?: boolean;
 
+  /**
+   * 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.
+   *
+   * Use this instead of wrapping a disabled input in `Tooltip` — disabled
+   * controls don't emit the pointer events an external tooltip needs.
+   *
+   * @example
+   * ```
+   * <DateRangeInput
+   *   label="Reporting period"
+   *   value={range}
+   *   onChange={setRange}
+   *   isDisabled
+   *   disabledMessage="You need the Editor role to change this"
+   * />
+   * ```
+   */
+  disabledMessage?: string;
+
   /**
    * The selected date range, or null if no range is selected.
    */
@@ -347,6 +371,7 @@ export function DateRangeInput({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   value,
   onChange,
   changeAction,
@@ -378,6 +403,21 @@ 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.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container div is not naturally focusable; focusin bubbles up from
+    // the trigger button, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage,
+  });
+
   const statusIconMap: Record<InputStatusType, IconName> = {
     warning: 'warning',
     error: 'error',
@@ -397,6 +437,7 @@ export function DateRangeInput({
     [
       description ? descriptionID : null,
       status?.message ? statusMessageID : null,
+      showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ]
       .filter(Boolean)
       .join(' ') || undefined;
@@ -487,7 +528,13 @@ export function DateRangeInput({
       labelTooltip={labelTooltip}
       width={width}>
       <div
-        ref={popover.triggerRef}
+        ref={el => {
+          popover.triggerRef(el);
+          // Anchor + hover/focus listeners for the disabled-message tooltip.
+          // Handlers are gated internally by isEnabled, and anchor names
+          // compose, so attaching unconditionally is safe.
+          disabledMessageTooltip.ref(el);
+        }}
         {...rest}
         {...mergeProps(
           themeProps('date-range-input', {
@@ -523,7 +570,11 @@ export function DateRangeInput({
           id={id}
           type="button"
           onClick={handleToggle}
-          disabled={isEffectivelyDisabled}
+          // 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}
           aria-label={triggerAriaLabel}
           aria-describedby={ariaDescribedBy}
           aria-required={isRequired === true ? 'true' : undefined}
@@ -561,7 +612,7 @@ export function DateRangeInput({
         <div {...stylex.props(styles.popoverLayout)}>
           {presets && presets.length > 0 && (
             <div
-              role="listbox"
+              role="group"
               aria-label="Preset date ranges"
               {...stylex.props(styles.presetSidebar)}>
               {presets.map(preset => {
@@ -571,8 +622,12 @@ export function DateRangeInput({
                   <button
                     key={preset.label}
                     type="button"
-                    role="option"
-                    aria-selected={isActive}
+                    // These presets are independent action buttons navigated by
+                    // Tab, not a single-tab-stop listbox — so they are a labeled
+                    // group of buttons, and the currently-applied preset is
+                    // marked with aria-current (not aria-selected, a listbox
+                    // concept that contradicted the Tab interaction) (forms-5).
+                    aria-current={isActive ? 'true' : undefined}
                     onClick={() => handlePresetClick(preset)}
                     {...stylex.props(
                       styles.presetButton,
@@ -596,6 +651,9 @@ export function DateRangeInput({
         </div>,
         {placement: 'below', alignment: 'start'},
       )}
+
+      {showsDisabledMessage &&
+        disabledMessageTooltip.renderTooltip(disabledMessage)}
     </Field>
   );
 }