@terpjs/react-core 0.7.0 → 0.8.0

package/src/ui/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
 
 import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
@@ -6,22 +6,6 @@ import type { UiText } from "../uiText";
 
 injectTerpStyles();
 
-const labelStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  color: "var(--color-neutral-900)",
-  cursor: "pointer",
-  fontSize: "var(--font-size-sm)",
-};
-
-const inputStyle: CSSProperties = {
-  inlineSize: "1rem",
-  blockSize: "1rem",
-  accentColor: "var(--color-fg-accent)",
-  cursor: "pointer",
-};
-
 export interface CheckboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked" | "defaultChecked" | "onChange"> {
   label: UiText;
@@ -34,7 +18,7 @@ export interface CheckboxProps
 export function Checkbox({ label, checked, defaultChecked, onChange, style, ...rest }: CheckboxProps) {
   const resolve = useUiText();
   return (
-    <label style={{ ...labelStyle, ...style }}>
+    <label data-terp="control-label" style={style}>
       <input
         {...rest}
         type="checkbox"
@@ -42,7 +26,6 @@ export function Checkbox({ label, checked, defaultChecked, onChange, style, ...r
         checked={checked}
         defaultChecked={defaultChecked}
         onChange={(event) => onChange?.(event.currentTarget.checked)}
-        style={inputStyle}
       />
       <span>{resolve(label)}</span>
     </label>

package/src/ui/Combobox.test.tsx

@@ -55,4 +55,26 @@ describe("Combobox", () => {
     expect(screen.getByRole("combobox", { name: "Assignee" })).toBeDisabled();
     expect(screen.queryByRole("status")).not.toBeInTheDocument();
   });
+
+  it("opens on mount with the cursor on the selection when asked", () => {
+    // The prop exists so the listbox can be rendered deterministically — it had no way in
+    // at all before, which is why sixteen sheet rules for this subtree went unpainted by
+    // both visual lanes from the moment they were written.
+    render(<Combobox aria-label="Country" value="be" options={options} defaultOpen />);
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+    // The cursor lands on the selection rather than nowhere: an open list with no active
+    // option is a state focusing the box never produces.
+    const active = listbox.querySelector('[data-active="true"]');
+    expect(active?.textContent).toBe("Belgium");
+    expect(active).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("keeps the listbox shut when disabled, even with defaultOpen", () => {
+    render(
+      <Combobox aria-label="Country" value="be" options={options} defaultOpen disabled />,
+    );
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
 });

package/src/ui/Combobox.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import type { CSSProperties, InputHTMLAttributes, KeyboardEvent } from "react";
+import type { InputHTMLAttributes, KeyboardEvent } from "react";
 
 import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
@@ -24,73 +23,16 @@ export interface ComboboxProps
   loadingText?: UiText;
   noOptionsText?: UiText;
   clearable?: boolean;
+  /**
+   * Open the listbox on mount (uncontrolled), the same shape `Popover` and `Menu` take.
+   *
+   * The cursor starts on the selection rather than nowhere, which is what focusing the box
+   * does — an already-open list with no active option would be a state the component cannot
+   * otherwise reach.
+   */
+  defaultOpen?: boolean;
 }
 
-const wrapperStyle: CSSProperties = { position: "relative", display: "grid" };
-const inputWrapStyle: CSSProperties = { position: "relative", display: "grid" };
-const inputStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  lineHeight: 1.2,
-  width: "100%",
-  minWidth: 0,
-  minHeight: "2.25rem",
-  padding: "0 calc(var(--space-3) + 1.5rem) 0 var(--space-3)",
-  border: "1px solid var(--color-neutral-300)",
-  borderRadius: "var(--radius-md)",
-  color: "var(--color-neutral-900)",
-  background: "var(--color-neutral-0)",
-  boxSizing: "border-box",
-};
-const clearStyle: CSSProperties = {
-  position: "absolute",
-  insetInlineEnd: "var(--space-1)",
-  insetBlockStart: "50%",
-  transform: "translateY(-50%)",
-  border: "none",
-  background: "transparent",
-  color: "var(--color-neutral-500)",
-  cursor: "pointer",
-  minWidth: "1.75rem",
-  minHeight: "1.75rem",
-  borderRadius: "var(--radius-sm)",
-};
-const listStyle: CSSProperties = {
-  position: "absolute",
-  insetInlineStart: 0,
-  insetInlineEnd: 0,
-  insetBlockStart: "calc(100% + var(--space-1))",
-  zIndex: 50,
-  display: "grid",
-  gap: "var(--space-1)",
-  maxHeight: "16rem",
-  overflowY: "auto",
-  padding: "var(--space-1)",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  boxShadow: "var(--shadow-lg)",
-};
-const optionStyle = (active: boolean, selected: boolean, disabled: boolean): CSSProperties => ({
-  ...CONTROL_TEXT_STYLE,
-  textAlign: "left",
-  padding: "var(--space-2) var(--space-3)",
-  border: "none",
-  borderRadius: "var(--radius-sm)",
-  background: active ? "var(--color-neutral-100)" : "transparent",
-  color: disabled
-    ? "var(--color-neutral-400)"
-    : selected
-      ? "var(--color-fg-accent)"
-      : "var(--color-neutral-900)",
-  cursor: disabled ? "not-allowed" : "pointer",
-  fontWeight: selected ? "var(--font-weight-semibold)" as never : "var(--font-weight-normal)" as never,
-});
-const emptyStyle: CSSProperties = {
-  padding: "var(--space-2) var(--space-3)",
-  color: "var(--color-neutral-500)",
-  fontSize: "var(--font-size-sm)",
-};
-
 /** Filterable ARIA combobox/typeahead with controlled or uncontrolled single selection. */
 export function Combobox({
   options,
@@ -101,6 +43,7 @@ export function Combobox({
   loadingText = "Loading…",
   noOptionsText = "No options",
   clearable = false,
+  defaultOpen = false,
   disabled,
   onBlur,
   onFocus,
@@ -117,8 +60,16 @@ export function Combobox({
   const selectedValue = value ?? uncontrolledValue;
   const selectedOption = options.find((option) => option.value === selectedValue) ?? null;
   const [query, setQuery] = useState(() => (selectedOption ? resolve(selectedOption.label) : ""));
-  const [open, setOpen] = useState(false);
-  const [activeValue, setActiveValue] = useState<string | null>(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const [activeValue, setActiveValue] = useState<string | null>(
+    defaultOpen ? selectedOption?.value ?? null : null,
+  );
+
+  // What the DOM should say, as opposed to what the state happens to hold. The listbox render
+  // was already guarded on `disabled` while aria-expanded was not, so a disabled combobox seeded
+  // open advertised role="combobox" aria-expanded="true" with aria-controls pointing at an id
+  // that is not in the document. Derived once, so the three cannot drift apart again.
+  const isOpen = open && disabled !== true;
 
   const renderedOptions = useMemo(() => {
     const normalized = query.trim().toLocaleLowerCase();
@@ -227,17 +178,17 @@ export function Combobox({
   }
 
   return (
-    <div ref={rootRef} style={wrapperStyle}>
-      <div style={inputWrapStyle}>
+    <div ref={rootRef} data-terp="combobox">
+      <div data-terp="combobox-field">
         <input
           {...rest}
           ref={inputRef}
           data-terp="input"
           role="combobox"
           aria-autocomplete="list"
-          aria-expanded={open}
+          aria-expanded={isOpen}
           aria-controls={`${baseId}-listbox`}
-          aria-activedescendant={open && activeOption !== null ? `${baseId}-option-${activeOption.value}` : undefined}
+          aria-activedescendant={isOpen && activeOption !== null ? `${baseId}-option-${activeOption.value}` : undefined}
           aria-invalid={rest["aria-invalid"]}
           disabled={disabled}
           placeholder={placeholder}
@@ -259,7 +210,7 @@ export function Combobox({
             }
           }}
           onKeyDown={handleKeyDown}
-          style={{ ...inputStyle, ...style }}
+          style={style}
         />
         {clearable && !disabled && query.length > 0 && (
           <button
@@ -270,18 +221,17 @@ export function Combobox({
               commit(null);
               inputRef.current?.focus();
             }}
-            style={clearStyle}
           >
             ×
           </button>
         )}
       </div>
-      {open && !disabled && (
-        <div id={`${baseId}-listbox`} role="listbox" style={listStyle}>
+      {isOpen && (
+        <div id={`${baseId}-listbox`} role="listbox" data-terp="combobox-list">
           {loading ? (
-            <div role="status" style={emptyStyle}>{resolve(loadingText)}</div>
+            <div role="status" data-terp="combobox-empty">{resolve(loadingText)}</div>
           ) : renderedOptions.length === 0 ? (
-            <div style={emptyStyle}>{resolve(noOptionsText)}</div>
+            <div data-terp="combobox-empty">{resolve(noOptionsText)}</div>
           ) : (
             renderedOptions.map((option) => {
               const label = resolve(option.label);
@@ -299,7 +249,8 @@ export function Combobox({
                   onMouseDown={(event) => event.preventDefault()}
                   onMouseEnter={() => setActiveValue(option.value)}
                   onClick={() => commit(option)}
-                  style={optionStyle(active, selected, option.disabled === true)}
+                  data-terp="combobox-option"
+                  data-active={active ? "true" : undefined}
                 >
                   {label}
                 </button>

package/src/ui/DatePicker.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { LOCALE_EN, LOCALE_NL, LocaleProvider } from "../locale";
@@ -27,6 +27,110 @@ describe("DatePicker", () => {
     expect(screen.queryByRole("grid")).not.toBeInTheDocument();
   });
 
+  // The ARIA shape and the roving cursor, both of which were wrong and neither of which
+  // any lane could see: the calendar is only reachable through an open Popover, nothing in
+  // the repo opened one, and the visual baselines capture resting state only.
+  it("renders a valid grid of week rows, not 42 cells hanging off the grid", () => {
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" defaultValue={new Date(2026, 6, 7)} />
+      </LocaleProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Due date" }));
+    const grid = screen.getByRole("grid");
+    const rows = screen.getAllByRole("row");
+    expect(rows).toHaveLength(6);
+    // Owned by the grid, and owning the cells: `grid` requires `row` children and a
+    // `gridcell` requires a `row` parent, so a flat grid fails both rules at once. Asserted
+    // as a DOM relationship rather than a count, because 42 cells in the tree somewhere is
+    // what the invalid version had too.
+    for (const row of rows) {
+      expect(row.parentElement).toBe(grid);
+      expect(row.querySelectorAll('[role="gridcell"]')).toHaveLength(7);
+    }
+    expect(grid.querySelectorAll(':scope > [role="gridcell"]')).toHaveLength(0);
+  });
+
+  it("moves DOM focus with the roving cursor, not just tabIndex", async () => {
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" defaultValue={new Date(2026, 6, 7)} />
+      </LocaleProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Due date" }));
+    const grid = screen.getByRole("grid");
+    const cursor = () => grid.querySelector<HTMLElement>('[tabindex="0"]');
+
+    // Opening focuses the cursor (deferred a tick — the panel is portalled).
+    await waitFor(() => expect(document.activeElement).toBe(cursor()));
+    expect(cursor()?.textContent).toBe("7");
+
+    fireEvent.keyDown(grid, { key: "ArrowRight" });
+    expect(cursor()?.textContent).toBe("8");
+    // The bug this pins: tabIndex moved and the browser's focus did not, so the focus ring
+    // and every screen reader stayed on the day the calendar opened on.
+    expect(document.activeElement).toBe(cursor());
+
+    fireEvent.keyDown(grid, { key: "ArrowDown" });
+    expect(cursor()?.textContent).toBe("15");
+    expect(document.activeElement).toBe(cursor());
+  });
+
+  it("does not pull focus off the month buttons when they move the cursor", async () => {
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" defaultValue={new Date(2026, 6, 7)} />
+      </LocaleProvider>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Due date" }));
+    await waitFor(() =>
+      expect(document.activeElement).toBe(
+        screen.getByRole("grid").querySelector('[tabindex="0"]'),
+      ),
+    );
+    // Changing month also moves the cursor. The follow is scoped to the grid rather than
+    // the whole calendar precisely so this button keeps the focus the pointer gave it.
+    const next = screen.getByRole("button", { name: "Next month" });
+    next.focus();
+    fireEvent.click(next);
+    expect(screen.getByRole("grid", { name: /August 2026/ })).toBeInTheDocument();
+    expect(document.activeElement).toBe(next);
+  });
+
+  it("opens the calendar on mount when asked", () => {
+    // Sixteen calendar rules have been in the sheet since stage 2c with no way to render the
+    // subtree, so neither visual lane had ever painted one. This is the way in.
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" value={new Date(2026, 6, 7)} defaultOpen />
+      </LocaleProvider>,
+    );
+    expect(screen.getByRole("grid", { name: /July 2026/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Due date" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("names the calendar dialog with its month, and each day with its whole date", () => {
+    render(
+      <LocaleProvider locales={{ en: LOCALE_EN }}>
+        <DatePicker aria-label="Due date" value={new Date(2026, 6, 7)} defaultOpen />
+      </LocaleProvider>,
+    );
+    // A role="dialog" with no accessible name announces itself as "dialog" and nothing else.
+    // The month was one level down on the grid, so it was reached only after the boundary had
+    // already been crossed unnamed. axe does not report this at the wcag2a/aa tags the visual
+    // suite runs, so opening the calendar did not surface it.
+    expect(screen.getByRole("dialog", { name: /July 2026/ })).toBeInTheDocument();
+    // And a day cell's visible text is a bare number, while the weekday row is aria-hidden AND
+    // a sibling of the grid rather than columnheaders inside it — so a cell had no weekday, no
+    // month and no year to announce.
+    expect(
+      screen.getByRole("gridcell", { name: "Tuesday, July 7, 2026" }),
+    ).toBeInTheDocument();
+  });
+
   it("uses the active locale for month and weekday names", () => {
     render(
       <LocaleProvider locales={{ nl: LOCALE_NL }}>
@@ -40,11 +144,34 @@ describe("DatePicker", () => {
 });
 
 describe("DateRangePicker", () => {
+  it("opens the calendar on mount when asked", () => {
+    render(
+      <DateRangePicker
+        aria-label="Window"
+        value={{ start: new Date(2026, 6, 10), end: new Date(2026, 6, 14) }}
+        defaultOpen
+      />,
+    );
+    expect(screen.getByRole("grid")).toBeInTheDocument();
+    // Both endpoints are selected and the days between them carry the range attribute — the
+    // only surface in the package that paints either, and now the only one with a baseline.
+    expect(screen.getByRole("grid").querySelectorAll('[aria-selected="true"]')).toHaveLength(2);
+    expect(
+      screen.getByRole("grid").querySelectorAll('[data-in-range="true"]').length,
+    ).toBeGreaterThan(0);
+  });
+
+  // Day cells are matched by the text a user sees rather than by accessible name: the name is
+  // now the whole date, and these two tests mount no LocaleProvider, so a name-based query
+  // would depend on the host machine's locale.
+  const dayCells = (text: string) =>
+    screen.getAllByRole("gridcell").filter((cell) => cell.textContent === text);
+
   it("selects a start/end range and closes after the end", () => {
     const onChange = vi.fn();
     render(<DateRangePicker aria-label="Window" defaultValue={{ start: new Date(2026, 6, 10), end: null }} onChange={onChange} />);
     fireEvent.click(screen.getByRole("button", { name: "Window" }));
-    fireEvent.click(screen.getByRole("gridcell", { name: "12" }));
+    fireEvent.click(dayCells("12")[0]!);
     expect(onChange).toHaveBeenCalledWith({ start: new Date(2026, 6, 10), end: new Date(2026, 6, 12) });
     expect(screen.queryByRole("grid")).not.toBeInTheDocument();
   });
@@ -61,8 +188,8 @@ describe("DateRangePicker", () => {
       />,
     );
     fireEvent.click(screen.getByRole("button", { name: "Window" }));
-    expect(screen.getAllByRole("gridcell", { name: "4" })[0]).toBeDisabled();
-    fireEvent.click(screen.getAllByRole("gridcell", { name: "8" })[0]);
+    expect(dayCells("4")[0]).toBeDisabled();
+    fireEvent.click(dayCells("8")[0]!);
     expect(onChange).toHaveBeenCalledWith({ start: new Date(2026, 6, 8), end: null });
   });
 });