@terpjs/react-core 0.6.1 → 0.8.0

package/src/ui/Button.test.tsx

@@ -7,20 +7,25 @@ import { Button } from "./Button";
 afterEach(cleanup);
 
 describe("Button", () => {
-  it("renders an accessible button with a default type and token styling", () => {
+  // These assert the attributes rather than `style.background` (ADR 0094). The variant is
+  // the semantic claim — that the sheet paints it is the sheet's business, and the visual
+  // baselines are what prove the paint. Asserting the absence of an inline style is the
+  // other half: it is what makes the rules in the sheet reachable at all, so a component
+  // that quietly regrew a base `style={}` would silently take back its own restyleability.
+  it("renders an accessible button with a default type and no inline styling", () => {
     render(<Button>Save</Button>);
     const button = screen.getByRole("button", { name: "Save" });
     expect(button).toHaveAttribute("type", "button");
     expect(button).toHaveAttribute("data-terp", "button");
     expect(button).toHaveAttribute("data-variant", "primary");
-    expect(button.style.background).toContain("var(--color-brand-primary)");
+    expect(button.getAttribute("style")).toBeNull();
   });
 
-  it("renders the ghost variant with a transparent background", () => {
+  it("names the ghost variant on the element", () => {
     render(<Button variant="ghost">Cancel</Button>);
     const button = screen.getByRole("button", { name: "Cancel" });
     expect(button).toHaveAttribute("data-variant", "ghost");
-    expect(button.style.background).toBe("transparent");
+    expect(button.getAttribute("style")).toBeNull();
   });
 
   it("renders a leading icon before the children", () => {
@@ -32,5 +37,13 @@ describe("Button", () => {
     expect(button.contains(icon)).toBe(true);
     expect(button.textContent).toBe("iDo it");
   });
+
+  it("still forwards an explicit style, so framework callers keep their escape", () => {
+    // The sheet owns the base; a one-off geometry override (LoginView's full-width submit)
+    // is inline and therefore still wins, which is the boundary ADR 0094 draws between
+    // styling policy and a measured value.
+    render(<Button style={{ width: "100%" }}>Wide</Button>);
+    expect(screen.getByRole("button", { name: "Wide" }).style.width).toBe("100%");
+  });
 });
 

package/src/ui/Button.tsx

@@ -1,7 +1,6 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 
 import { injectTerpStyles } from "../styles";
-import { CONTROL_TEXT_STYLE } from "./controlStyles";
 
 injectTerpStyles();
 
@@ -13,78 +12,26 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
 }
 
-const baseStyle: CSSProperties = {
-  ...CONTROL_TEXT_STYLE,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "var(--space-2)",
-  fontWeight: "var(--font-weight-medium)" as never,
-  lineHeight: 1.2,
-  width: "fit-content",
-  maxWidth: "100%",
-  minHeight: "2.25rem",
-  padding: "0 var(--space-4)",
-  border: "1px solid transparent",
-  borderRadius: "var(--radius-md)",
-  boxSizing: "border-box",
-  cursor: "pointer",
-  whiteSpace: "normal",
-  textAlign: "center",
-};
-
-const variantStyle: Record<ButtonVariant, CSSProperties> = {
-  primary: {
-    background: "var(--color-brand-primary)",
-    color: "var(--color-brand-primary-contrast)",
-    boxShadow: "var(--shadow-sm)",
-  },
-  secondary: {
-    background: "var(--color-neutral-0)",
-    color: "var(--color-neutral-900)",
-    borderColor: "var(--color-neutral-300)",
-  },
-  danger: {
-    background: "var(--color-status-danger)",
-    color: "var(--color-neutral-0)",
-  },
-  ghost: {
-    background: "transparent",
-    color: "var(--color-neutral-700)",
-  },
-};
-
-const iconWrapStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-};
-
 /**
- * Token-styled button — use instead of a raw `<button>` (the module-boundary rule). It
- * styles only via the design-token CSS variables, so it themes with the app. Hover,
- * active and `:focus-visible` states are layered on via the injected react-core sheet,
- * keyed by the `data-terp` / `data-variant` attributes set below.
+ * Token-styled button — use instead of a raw `<button>` (the module-boundary rule).
+ *
+ * It renders no inline styles: the geometry, the per-variant colours and the hover /
+ * active / disabled / `:focus-visible` states all live in the injected react-core sheet,
+ * matched on the `data-terp` / `data-variant` attributes set below (ADR 0094). So the
+ * variant is a fact about the element rather than a style object chosen in here — which
+ * is what a test should assert, and what an app's `theme.css` can restyle.
  */
 export function Button({
   variant = "primary",
   icon,
-  style,
   type = "button",
   children,
   ...rest
 }: ButtonProps) {
   return (
-    <button
-      type={type}
-      data-terp="button"
-      data-variant={variant}
-      {...rest}
-      style={{ ...baseStyle, ...variantStyle[variant], ...style }}
-    >
+    <button type={type} data-terp="button" data-variant={variant} {...rest}>
       {icon !== undefined && (
-        <span aria-hidden="true" style={iconWrapStyle}>
+        <span aria-hidden="true" data-terp="button-icon">
           {icon}
         </span>
       )}

package/src/ui/Card.test.tsx

@@ -17,8 +17,12 @@ describe("Card", () => {
     expect(heading).toBeInTheDocument();
     const card = heading.closest('[data-terp="card"]') as HTMLElement;
     expect(card.tagName).toBe("SECTION");
-    expect(card.style.border).toContain("var(--color-neutral-200)");
-    expect(card.style.background).toContain("var(--color-neutral-0)");
+    // The surface is a sheet rule (ADR 0094); the card's own claims are its element, its
+    // gap step and that the title is a real h3 inside the header row.
+    expect(card.getAttribute("style")).toBeNull();
+    expect(card).toHaveAttribute("data-gap", "3");
+    expect(heading).toHaveAttribute("data-terp", "card-title");
+    expect(heading.closest('[data-terp="card-header"]')).not.toBeNull();
     expect(screen.getByText("Uren per maand.")).toBeInTheDocument();
     expect(screen.getByText("body")).toBeInTheDocument();
   });

package/src/ui/Card.tsx

@@ -1,9 +1,12 @@
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 
 import type { SpaceToken } from "../layout";
+import { injectTerpStyles } from "../styles";
 import { useUiText } from "../uiText";
 import type { UiText } from "../uiText";
 
+injectTerpStyles();
+
 export interface CardProps
   extends Omit<HTMLAttributes<HTMLElement>, "style" | "title"> {
   /** Optional section heading, rendered as an `<h3>` in the card's header row. */
@@ -19,37 +22,6 @@ export interface CardProps
   children?: ReactNode;
 }
 
-const cardStyle: CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  background: "var(--color-neutral-0)",
-  border: "1px solid var(--color-neutral-200)",
-  borderRadius: "var(--radius-lg)",
-  padding: "var(--space-4)",
-  minWidth: 0,
-};
-
-const headerStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flexWrap: "wrap",
-  gap: "var(--space-3)",
-};
-
-const titleStyle: CSSProperties = {
-  margin: 0,
-  fontSize: "var(--font-size-base)",
-  fontWeight: "var(--font-weight-semibold)" as CSSProperties["fontWeight"],
-  lineHeight: 1.3,
-};
-
-const descriptionStyle: CSSProperties = {
-  margin: 0,
-  color: "var(--color-neutral-600)",
-  fontSize: "var(--font-size-sm)",
-};
-
 /**
  * A token-styled surface that groups one block of a page — the sanctioned way to give
  * sections visual separation (border + background + padding) without module CSS, and
@@ -70,23 +42,23 @@ export function Card({
   const resolve = useUiText();
   const hasHeader = title !== undefined || actions !== undefined;
   return (
-    <Component {...rest} data-terp="card" style={{ ...cardStyle, gap: `var(--space-${gap})` }}>
+    <Component {...rest} data-terp="card" data-gap={String(gap)}>
       {hasHeader ? (
-        <div data-terp="card-header" style={headerStyle}>
-          <div style={{ minWidth: 0 }}>
-            {title !== undefined ? <h3 style={titleStyle}>{resolve(title)}</h3> : null}
+        <div data-terp="card-header">
+          <div data-terp="card-heading">
+            {title !== undefined ? <h3 data-terp="card-title">{resolve(title)}</h3> : null}
             {description !== undefined ? (
-              <p style={descriptionStyle}>{resolve(description)}</p>
+              <p data-terp="card-description">{resolve(description)}</p>
             ) : null}
           </div>
           {actions !== undefined ? (
-            <div data-terp="card-actions" style={{ flexShrink: 0 }}>
+            <div data-terp="card-actions">
               {actions}
             </div>
           ) : null}
         </div>
       ) : description !== undefined ? (
-        <p style={descriptionStyle}>{resolve(description)}</p>
+        <p data-terp="card-description">{resolve(description)}</p>
       ) : null}
       {children}
     </Component>

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-brand-primary)",
-  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-brand-primary)"
-      : "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 });
   });
 });