@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -942,6 +942,1094 @@ describe('DateTimeInput', () => {
     });
   });
 
+  // ===========================================================================
+  // Time-option dropdown (#2727)
+  // ===========================================================================
+
+  describe('timeOptionInterval', () => {
+    // The dropdown renders through the same popover as the calendar, so its
+    // content lands in the top layer: jsdom keeps the nodes in the DOM but
+    // role queries skip them. Read the options off the container directly,
+    // exactly as the weekStartsOn tests read columnheaders.
+    const optionsIn = (container: HTMLElement): HTMLElement[] =>
+      Array.from(container.querySelectorAll('[role="option"]'));
+
+    const labelsIn = (container: HTMLElement): (string | null)[] =>
+      optionsIn(container).map(o => o.textContent);
+
+    // ---- opt-in gate --------------------------------------------------------
+
+    it('adds no listbox and no second combobox without timeOptionInterval', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />,
+      );
+
+      // The date input stays the only combobox on the field. 30+ existing
+      // assertions use the singular getByRole('combobox'); a second one would
+      // break every one of them, and every downstream consumer's too.
+      expect(screen.getAllByRole('combobox')).toHaveLength(1);
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      expect(timeInput).not.toHaveAttribute('role', 'combobox');
+      fireEvent.click(timeInput);
+      expect(optionsIn(container)).toHaveLength(0);
+    });
+
+    // ---- option generation --------------------------------------------------
+
+    it('renders one option per interval step across the day', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeOptionInterval={30}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      // A full day at 30-minute cadence.
+      expect(optionsIn(container)).toHaveLength(48);
+    });
+
+    it('renders 24 options at an hourly interval', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const labels = labelsIn(container);
+      expect(labels).toHaveLength(24);
+      // The 12 AM - 11 PM list the issue asks for.
+      expect(labels[0]).toBe('12:00 AM');
+      expect(labels[23]).toBe('11:00 PM');
+    });
+
+    it('labels options in 24-hour format when hourFormat is 24h', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeOptionInterval={60}
+          hourFormat="24h"
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const labels = labelsIn(container);
+      expect(labels[0]).toBe('00:00');
+      expect(labels[13]).toBe('13:00');
+    });
+
+    it('includes seconds in option labels when hasSeconds is set', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          hasSeconds
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      expect(labelsIn(container)[0]).toBe('12:00:00 AM');
+    });
+
+    // ---- committing ---------------------------------------------------------
+
+    it('commits the clicked option and keeps the selected date', () => {
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      // 09:00 is the tenth hourly option.
+      fireEvent.click(optionsIn(container)[9]);
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBe('2026-03-15T09:00');
+    });
+
+    it('marks the committed option as selected, not merely highlighted', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const selected = optionsIn(container).filter(
+        o => o.getAttribute('aria-selected') === 'true',
+      );
+      expect(selected).toHaveLength(1);
+      expect(selected[0].textContent).toBe('2:00 PM');
+    });
+
+    // ---- keyboard: the arrow-key collision ----------------------------------
+
+    it('keeps ArrowUp stepping by timeIncrement while the list is closed', () => {
+      const onChange = vi.fn();
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeIncrement={15}
+          timeOptionInterval={30}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      // Closed list: arrows still step the value, as they always have.
+      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toContain('14:45');
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('opens the list on Alt+ArrowDown without changing the value', () => {
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          timeOptionInterval={30}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+      expect(onChange).not.toHaveBeenCalled();
+      expect(optionsIn(container)).toHaveLength(48);
+    });
+
+    it('moves the active option with ArrowDown while open, without committing', () => {
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      // Opening starts the highlight on the committed value (14:00).
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[14].id,
+      );
+
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[15].id,
+      );
+      // Navigating is not selecting.
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('commits the active option on Enter and closes the list', () => {
+      const onChange = vi.fn();
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      fireEvent.keyDown(timeInput, {key: 'Enter'});
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBe('2026-03-15T15:00');
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('jumps to the first and last option with Home and End', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      fireEvent.keyDown(timeInput, {key: 'Home'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[0].id,
+      );
+
+      fireEvent.keyDown(timeInput, {key: 'End'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[23].id,
+      );
+    });
+
+    it('closes on Escape without committing', () => {
+      const onChange = vi.fn();
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      fireEvent.keyDown(timeInput, {key: 'Escape'});
+
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    // ---- typed entry keeps working -----------------------------------------
+
+    it('moves the highlight to the closest option as the user types, without dropping options', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      fireEvent.change(timeInput, {target: {value: '9:00 PM'}});
+
+      // Free-form entry is the contract here: the list narrows nothing, it
+      // follows the typed value so Enter still lands on something sensible.
+      expect(optionsIn(container)).toHaveLength(24);
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[21].id,
+      );
+    });
+
+    // ---- constraints --------------------------------------------------------
+
+    it('drops options outside min/max on the boundary date', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          min={'2026-03-15T09:00' as ISODateTimeString}
+          max={'2026-03-15T17:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const labels = labelsIn(container);
+      // 09:00 through 17:00 inclusive.
+      expect(labels).toHaveLength(9);
+      expect(labels[0]).toBe('9:00 AM');
+      expect(labels[8]).toBe('5:00 PM');
+    });
+
+    it('offers the whole day when the selected date is inside the min/max range', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-16T14:00' as ISODateTimeString}
+          min={'2026-03-15T09:00' as ISODateTimeString}
+          max={'2026-03-17T17:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      // The time bound only bites on the boundary date itself.
+      expect(optionsIn(container)).toHaveLength(24);
+    });
+
+    // ---- a11y wiring + disabled --------------------------------------------
+
+    it('wires the time input as a combobox onto the listbox', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      expect(timeInput).toHaveAttribute('role', 'combobox');
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+      expect(timeInput).toHaveAttribute('aria-autocomplete', 'list');
+
+      fireEvent.click(timeInput);
+      const listbox = container.querySelector('[role="listbox"]');
+      expect(listbox).not.toBeNull();
+      expect(timeInput).toHaveAttribute('aria-controls', listbox?.id);
+      // Named, so the list is not an anonymous group to a screen reader.
+      expect(listbox).toHaveAttribute('aria-label');
+    });
+
+    it('does not open the list when disabled', () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          isDisabled
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      // The layer mounts its content whether or not it is open — visibility is
+      // the popover attribute's job, which jsdom does not apply. So assert the
+      // open state itself, not the presence of option nodes.
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+      expect(timeInput).not.toHaveAttribute('aria-controls');
+    });
+
+    it('does not open the list for a focusable-disabled field', () => {
+      // With disabledMessage the input drops the native `disabled` attribute so
+      // the reason stays discoverable, which means clicks and keys really do
+      // reach it. This is the case the guards have to catch — a natively
+      // disabled input never delivers the events in the first place.
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          isDisabled
+          disabledMessage="Pick a project first"
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      expect(timeInput).not.toBeDisabled();
+
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    // -- edge cases ----------------------------------------------------------
+
+    it('does not fire a change when the already-selected option is clicked', () => {
+      // The marker compares a seconds-normalised time while the commit path
+      // compared the raw one, so with a stray-seconds value the option that
+      // renders as selected still emitted a change when clicked.
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      const selected = optionsIn(container).find(
+        o => o.getAttribute('aria-selected') === 'true',
+      );
+      expect(selected).toBeDefined();
+
+      fireEvent.click(selected as HTMLElement);
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('does not open an empty list when min/max leave no valid option', () => {
+      // A window narrower than the cadence survives no option at all. Opening
+      // then shows a blank popover with nothing to pick.
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:15' as ISODateTimeString}
+          min={'2026-03-15T09:10' as ISODateTimeString}
+          max={'2026-03-15T09:20' as ISODateTimeString}
+          timeOptionInterval={30}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('commits the active option on Enter once the user arrows away from what they typed', () => {
+      // Typed text beats the highlight only while the highlight is still the
+      // one typing derived. After an arrow key the highlight is the user's own
+      // choice, and Enter must honour what the field says is active.
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      fireEvent.change(timeInput, {target: {value: '9:15 AM'}});
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[11].id,
+      );
+
+      fireEvent.keyDown(timeInput, {key: 'Enter'});
+      expect(onChange.mock.calls[onChange.mock.calls.length - 1][0]).toBe(
+        '2026-03-15T11:00',
+      );
+    });
+
+    it('closes a list that empties underneath it', () => {
+      // The open-time guard cannot help here: the window narrows after the
+      // list is already up. Left open, the keyboard switch is gated off and
+      // the arrows fall back to stepping a value the user cannot see.
+      const onChange = vi.fn();
+      const {container, rerender} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-16T14:00' as ISODateTimeString}
+          min={'2026-03-15T09:10' as ISODateTimeString}
+          max={'2026-03-15T09:20' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+
+      rerender(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:15' as ISODateTimeString}
+          min={'2026-03-15T09:10' as ISODateTimeString}
+          max={'2026-03-15T09:20' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      expect(optionsIn(container)).toHaveLength(0);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes the list when focus leaves the field entirely', () => {
+      // Light dismiss covers outside clicks and Escape, never a programmatic
+      // focus move. Without this the listbox is orphaned in the top layer.
+      render(
+        <>
+          <DateTimeInput
+            label="Meeting"
+            value={'2026-03-15T14:00' as ISODateTimeString}
+            timeOptionInterval={60}
+            onChange={() => {}}
+          />
+          <button type="button">after</button>
+        </>,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+
+      fireEvent.blur(timeInput, {relatedTarget: getButton('after')});
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes an open list when the field goes busy', () => {
+      const {rerender} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+
+      rerender(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          isLoading
+          onChange={() => {}}
+        />,
+      );
+
+      // An open dropdown over a control that no longer takes input.
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('scales option padding with the field size', () => {
+      const small = render(
+        <DateTimeInput
+          label="Small"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          size="sm"
+          onChange={() => {}}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText('Small time'));
+      const smallClass = optionsIn(small.container)[0].className;
+      small.unmount();
+
+      const large = render(
+        <DateTimeInput
+          label="Large"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          size="lg"
+          onChange={() => {}}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText('Large time'));
+      const largeClass = optionsIn(large.container)[0].className;
+
+      // Rows that ignore size leave an sm field with md-sized options.
+      expect(smallClass).not.toBe(largeClass);
+    });
+
+    it('commits the typed time on Enter, not the option below it', () => {
+      // Typing is free-form, so Enter must not quietly round 1:07 PM down to
+      // the 1:00 PM option the highlight is resting on.
+      const onChange = vi.fn();
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      fireEvent.change(timeInput, {target: {value: '1:07 PM'}});
+      fireEvent.keyDown(timeInput, {key: 'Enter'});
+
+      const last = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      expect(last).toBe('2026-03-15T13:07');
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('names the list after timeLabel when one is given', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          timeLabel="Start time"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Start time'));
+      // The list belongs to the field the consumer renamed, so it must not
+      // announce itself under the old one.
+      expect(container.querySelector('[role="listbox"]')).toHaveAttribute(
+        'aria-label',
+        'Start time options',
+      );
+    });
+
+    it('opens from the keyboard after a pointer press that never became a click', () => {
+      // The show is deferred past an in-flight click so light-dismiss cannot
+      // eat it. A press that ends without a click must not wedge that flag.
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.pointerDown(timeInput);
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('activates the first option when the field has a date but no time', () => {
+      // The state you land in after picking a date and no time yet. With no
+      // active option, ArrowUp and Enter both did nothing at all.
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[0].id,
+      );
+
+      // ArrowUp on the first option is a no-op, not a dead end.
+      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[0].id,
+      );
+
+      fireEvent.keyDown(timeInput, {key: 'Enter'});
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBe('2026-03-15T00:00');
+    });
+
+    it('keeps the active option valid when the list shrinks while open', () => {
+      const {container, rerender} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={5}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      fireEvent.keyDown(timeInput, {key: 'End'});
+      expect(optionsIn(container)).toHaveLength(288);
+
+      // The cadence widens under the open list, so the old index is far past
+      // the end. A stale index leaves the user with no visible highlight and
+      // arrow keys that appear dead until they walk it back into range.
+      rerender(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const options = optionsIn(container);
+      expect(options).toHaveLength(24);
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        options[23].id,
+      );
+    });
+
+    it('handles a min/max window that leaves exactly one option', () => {
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T09:20' as ISODateTimeString}
+          min={'2026-03-15T09:00' as ISODateTimeString}
+          max={'2026-03-15T09:30' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+
+      const options = optionsIn(container);
+      expect(options).toHaveLength(1);
+      expect(options[0].textContent).toBe('9:00 AM');
+
+      // Every clamp expression collapses at length 1.
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+      fireEvent.keyDown(timeInput, {key: 'End'});
+      expect(timeInput).toHaveAttribute('aria-activedescendant', options[0].id);
+
+      fireEvent.keyDown(timeInput, {key: 'Enter'});
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBe('2026-03-15T09:00');
+    });
+
+    it('labels midnight and noon correctly in 12-hour format', () => {
+      // 00:00 and 12:00 are where 12-hour formatting classically goes wrong.
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const labels = labelsIn(container);
+      expect(labels[0]).toBe('12:00 AM');
+      expect(labels[12]).toBe('12:00 PM');
+      expect(labels[11]).toBe('11:00 AM');
+      expect(labels[13]).toBe('1:00 PM');
+    });
+
+    it('highlights the nearest earlier option for a value off the cadence', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:07' as ISODateTimeString}
+          timeOptionInterval={30}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+
+      // 14:07 sits between 14:00 (index 28) and 14:30.
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[28].id,
+      );
+      // ...and nothing claims to be the selected value.
+      expect(
+        optionsIn(container).filter(
+          o => o.getAttribute('aria-selected') === 'true',
+        ),
+      ).toHaveLength(0);
+    });
+
+    it('highlights the first option for a value below the whole range', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T06:00' as ISODateTimeString}
+          min={'2026-03-15T09:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[0].id,
+      );
+      expect(labelsIn(container)[0]).toBe('9:00 AM');
+    });
+
+    it('clamps the active option at both ends of the list', () => {
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T00:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      // Already on the first option: ArrowUp must not wrap to the last.
+      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[0].id,
+      );
+
+      fireEvent.keyDown(timeInput, {key: 'End'});
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown'});
+      expect(timeInput).toHaveAttribute(
+        'aria-activedescendant',
+        optionsIn(container)[23].id,
+      );
+    });
+
+    it('leaves Escape alone while the list is closed', () => {
+      // Swallowing Escape here would stop an enclosing Dialog from closing.
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      // fireEvent returns false when the event was cancelled.
+      expect(fireEvent.keyDown(timeInput, {key: 'Escape'})).toBe(true);
+    });
+
+    it('closes the list on Tab without blocking focus from leaving', () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+
+      // Not cancelled, so the browser still moves focus to the next control.
+      expect(fireEvent.keyDown(timeInput, {key: 'Tab'})).toBe(true);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('picking a time with no date selected changes nothing', () => {
+      // Documents the component's existing contract: every time-commit path
+      // requires a date, so the list cannot invent one.
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          timeOptionInterval={60}
+          onChange={onChange}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+
+      fireEvent.click(optionsIn(container)[9]);
+
+      // The click IS handled — the list closes — it just cannot produce a
+      // datetime without a date, so no change is emitted and the field stays
+      // empty rather than showing a time that was never committed.
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+      expect(onChange).not.toHaveBeenCalled();
+      expect(timeInput).toHaveValue('');
+    });
+
+    it('does not open the list while a change is in flight', () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          isLoading
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      fireEvent.click(timeInput);
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('commits seconds in the value when hasSeconds is set', () => {
+      const onChange = vi.fn();
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          hasSeconds
+          onChange={onChange}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      fireEvent.click(optionsIn(container)[9]);
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.calls[0][0]).toBe('2026-03-15T09:00:00');
+    });
+
+    it('keeps two fields on one page independent', () => {
+      const {container} = render(
+        <>
+          <DateTimeInput
+            label="Starts"
+            value={'2026-03-15T09:00' as ISODateTimeString}
+            timeOptionInterval={60}
+            onChange={() => {}}
+          />
+          <DateTimeInput
+            label="Ends"
+            value={'2026-03-15T17:00' as ISODateTimeString}
+            timeOptionInterval={60}
+            onChange={() => {}}
+          />
+        </>,
+      );
+
+      const starts = screen.getByLabelText('Starts time');
+      const ends = screen.getByLabelText('Ends time');
+
+      fireEvent.click(starts);
+      expect(starts).toHaveAttribute('aria-expanded', 'true');
+      expect(ends).toHaveAttribute('aria-expanded', 'false');
+
+      const listboxes = container.querySelectorAll('[role="listbox"]');
+      expect(listboxes).toHaveLength(1);
+      // Option ids must not collide between instances.
+      const ids = optionsIn(container).map(o => o.id);
+      expect(new Set(ids).size).toBe(ids.length);
+      expect(starts.getAttribute('aria-controls')).toBe(listboxes[0].id);
+    });
+
+    it('mounts no option nodes until the list is opened', () => {
+      // The layer renders its children whether open or closed, so an
+      // unconditional list would park a day's worth of divs in the DOM of
+      // every opted-in field. At a 5-minute cadence that is 288 nodes.
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={5}
+          onChange={() => {}}
+        />,
+      );
+
+      expect(optionsIn(container)).toHaveLength(0);
+      expect(container.querySelector('[role="listbox"]')).toBeNull();
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      expect(optionsIn(container)).toHaveLength(288);
+    });
+
+    it('marks the selected option when the value carries unwanted seconds', () => {
+      // splitDateTime slices the string after the T, so an external value of
+      // 14:00:00 with hasSeconds off leaves valueParts.time as "14:00:00"
+      // while every option is "14:00". A raw equality check silently marks
+      // nothing selected.
+      const {container} = render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByLabelText('Meeting time'));
+      const selected = optionsIn(container).filter(
+        o => o.getAttribute('aria-selected') === 'true',
+      );
+      expect(selected).toHaveLength(1);
+      expect(selected[0].textContent).toBe('2:00 PM');
+    });
+
+    it('keeps focus in the time field when opening evicts the calendar', () => {
+      // Both layers are popover="auto", so showing the time list closes the
+      // calendar. The calendar's onHide returns focus to the date input —
+      // which would rip focus out of the field the user is working in.
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const dateInput = screen.getAllByRole('combobox')[0];
+      const timeInput = screen.getByLabelText('Meeting time');
+
+      fireEvent.keyDown(dateInput, {key: 'ArrowDown'});
+      expect(dateInput).toHaveAttribute('aria-expanded', 'true');
+
+      timeInput.focus();
+      fireEvent.keyDown(timeInput, {key: 'ArrowDown', altKey: true});
+
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+      expect(timeInput).toHaveFocus();
+    });
+
+    it('starts closed and opens only when asked', () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:00' as ISODateTimeString}
+          timeOptionInterval={60}
+          onChange={() => {}}
+        />,
+      );
+
+      const timeInput = screen.getByLabelText('Meeting time');
+      expect(timeInput).toHaveAttribute('aria-expanded', 'false');
+      expect(timeInput).not.toHaveAttribute('aria-activedescendant');
+
+      fireEvent.click(timeInput);
+      expect(timeInput).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
   describe('weekStartsOn', () => {
     // The calendar popover renders in the top layer; jsdom keeps the content in
     // the DOM but role queries skip it, so read the columnheaders directly.