@estiva-app/ui 0.7.0 → 0.8.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
   "files": [
     "dist",
     "src",
+    "stories",
     "tailwind-preset.js",
     "tokens.css",
     "base.css",
@@ -27,9 +28,11 @@
     "build": "node build.mjs && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6008 --no-open",
     "build-storybook": "storybook build",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "test:a11y": "vitest run --project storybook-signal --project storybook-ship",
     "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -39,7 +42,10 @@
     "tailwindcss": "^3.4.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-vitest": "^10.6.0",
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.41.1",
     "@testing-library/dom": "^10.4.1",
@@ -49,9 +55,15 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "autoprefixer": "^10.4.27",
     "esbuild": "^0.28.0",
+    "eslint": "^10.10.0",
+    "eslint-plugin-better-tailwindcss": "^4.7.0",
+    "globals": "^17.12.0",
     "jsdom": "^30.0.1",
+    "playwright": "^1.63.0",
     "postcss": "^8.5.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -59,10 +71,12 @@
     "storybook": "^10.5.10",
     "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
+    "typescript-eslint": "^8.69.0",
     "vite": "^8.0.1",
     "vitest": "^4.1.11"
   },
   "dependencies": {
+    "@base-ui/react": "^1.8.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0"
   },

package/src/AppShell.stories.tsx

@@ -14,7 +14,13 @@ import { Sidebar } from './Sidebar'
 const meta = {
   title: 'Frame/AppShell',
   component: AppShell,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+    // the count chip is muted text, 3.06:1 on the active row in signal, and the info
+    // banner reads 3.99:1 on its wash in ship (AA 4.5:1).
+    a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } },
+  },
   args: { nav: null, children: null },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'floating'] },

package/src/AppShell.tsx

@@ -51,7 +51,7 @@ export function AppShell({ variant = 'solid', menu, logo, search, identity, bann
           <div
             className={cn(
               'flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface',
-              'signal:border signal:border-border-subtle signal:shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]',
+              'signal:border signal:border-border-subtle signal:shadow-highlight-inset',
             )}
           >
             {banner}

package/src/Avatar.stories.tsx

@@ -29,7 +29,9 @@ export const BrokenPicture: Story = { args: { src: 'http://localhost:1/nothing-h
 
 /** Peek's size scale, plus the smaller ones Ship uses in rows and menus. */
 export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the size captions are muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { controls: { disable: true }, a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   render: (args) => (
     <div className="flex items-end gap-3">
       {[16, 20, 22, 24, 28, 32, 36].map((size) => (

package/src/Banner.stories.tsx

@@ -4,7 +4,12 @@ import { Banner } from './Banner'
 const meta = {
   title: 'Feedback/Banner',
   component: Banner,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+    // the info tone reads 3.99:1 on its wash in ship (AA 4.5:1).
+    a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } },
+  },
   args: { tone: 'ok', children: 'Public key copied.' },
   argTypes: { tone: { control: 'inline-radio', options: ['ok', 'error', 'info', 'warning'] } },
 } satisfies Meta<typeof Banner>

package/src/Banner.tsx

@@ -19,7 +19,7 @@ export interface BannerProps {
   className?: string
 }
 
-const TONE: Record<BannerTone, string> = {
+const TONE_STYLES: Record<BannerTone, string> = {
   ok: 'bg-success-muted text-success-default',
   error: 'bg-error-muted text-error-default',
   info: 'bg-info-muted text-info-default',
@@ -28,7 +28,7 @@ const TONE: Record<BannerTone, string> = {
 
 export function Banner({ tone, children, className }: BannerProps) {
   return (
-    <div role={tone === 'error' ? 'alert' : 'status'} className={cn('px-4 py-2 text-body-2', TONE[tone], className)}>
+    <div role={tone === 'error' ? 'alert' : 'status'} className={cn('px-4 py-2 text-body-2', TONE_STYLES[tone], className)}>
       {children}
     </div>
   )

package/src/Breadcrumb.stories.tsx

@@ -5,6 +5,9 @@ import { Breadcrumb } from './Breadcrumb'
 const meta = {
   title: 'Navigation/Breadcrumb',
   component: Breadcrumb,
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the current item is muted text, 3.94:1 on --bg-base in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
   args: {
     items: [
       { label: 'Documents', href: '#' },

package/src/Button.mdx

@@ -32,7 +32,7 @@ The push-button for an action: a verb, clicked once — "Create", "Save",
 - Choosing a value → **Select**. Acting from a popover list → **MenuItem**.
 - A control the person may never be allowed to use is **absent, not
   disabled**. `disabled` is for *momentarily* unavailable — and it says why,
-  with a Tooltip ("Available after sign-in").
+  with `disabledReason` ("Available after sign-in").
 
 ## How
 
@@ -49,8 +49,22 @@ import { IconPlus } from '@tabler/icons-react'
   button balances its own padding around it.
 - `type` defaults to `"button"` — inside a form it submits only when you
   say `type="submit"`.
-- It is a native `<button>`, and every native prop passes through; the
-  visible label is the accessible name, so no `aria-label` is needed.
+- It is a native `<button>` on Base UI's Button, and every native prop
+  passes through; the visible label is the accessible name, so no
+  `aria-label` is needed.
+- `disabledReason="Sign in first"` disables it, keeps it reachable by
+  Tab, and shows the reason as a tooltip on hover. Say why, every time;
+  a bare `disabled` is for the moment between a click and its answer. The
+  reason shows on hover only for now; it will also show on keyboard focus
+  when Tooltip moves onto Base UI (stage 4). With a reason the button sits
+  in the tooltip's `inline-flex` wrapper.
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Onto the button, also when it is disabled with a reason; never when it is plain `disabled`. |
+| Space / Enter | The action. Nothing while disabled. |
 
 ## Props
 

package/src/Button.stories.tsx

@@ -23,9 +23,12 @@ export const Muted: Story = { args: { variant: 'muted' } }
 export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete project' } }
 export const Small: Story = { args: { variant: 'primary', size: 'small' } }
 export const WithLeadingIcon: Story = { args: { variant: 'primary', leadingIcon: <IconPlus stroke={1.5} className="size-4" /> } }
-/** Disabled is for a control that is momentarily unavailable — say why, with a tooltip. A control someone may never use is absent, not disabled. */
+/** Disabled is for a control that is momentarily unavailable — say why, with `disabledReason`. A control someone may never use is absent, not disabled. */
 export const Disabled: Story = { args: { variant: 'primary', disabled: true } }
 
+/** Disabled with its reason: hover to read it; Tab still reaches the button. */
+export const WithAReason: Story = { args: { variant: 'primary', disabledReason: 'Sign in to add items' } }
+
 /** Every variant × size × icon × disabled combination on one canvas. */
 export const AllVariants: Story = {
   parameters: { controls: { disable: true } },

package/src/Button.test.tsx

@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+/**
+ * What the Button page claims, pinned: a native button that does not submit
+ * unless told to, `disabled` as before, and `disabledReason` — disabled,
+ * still reachable by keyboard, the reason shown on hover (stage 2 of the
+ * migration).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { FormEvent } from 'react'
+import { Button } from './Button'
+
+afterEach(cleanup)
+
+describe('Button', () => {
+  it('is a native button that does not submit a form unless asked', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn((e: FormEvent<HTMLFormElement>) => e.preventDefault())
+    const onClick = vi.fn()
+    render(
+      <form onSubmit={onSubmit}>
+        <Button onClick={onClick}>Plain</Button>
+        <Button type="submit">Send</Button>
+      </form>,
+    )
+    const plain = screen.getByRole('button', { name: 'Plain' })
+    expect(plain.tagName).toBe('BUTTON')
+    expect(plain.getAttribute('type')).toBe('button')
+    await user.click(plain)
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+    await user.click(screen.getByRole('button', { name: 'Send' }))
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the leading icon before the label', () => {
+    render(<Button leadingIcon={<svg data-testid="icon" />}>Label</Button>)
+    const button = screen.getByRole('button', { name: 'Label' })
+    expect(button.firstElementChild).toBe(screen.getByTestId('icon'))
+  })
+
+  it('disabled: a real disabled button, out of the Tab order, that ignores clicks', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <>
+        <Button disabled onClick={onClick}>
+          Held
+        </Button>
+        <Button>After</Button>
+      </>,
+    )
+    const held = screen.getByRole('button', { name: 'Held' })
+    expect(held.hasAttribute('disabled')).toBe(true)
+    await user.click(held)
+    expect(onClick).not.toHaveBeenCalled()
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'After' }))
+  })
+
+  it('disabledReason: disabled, still reachable by Tab, the reason on hover', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <Button disabledReason="Sign in first" onClick={onClick}>
+        Add
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Add' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.hasAttribute('disabled')).toBe(false)
+    expect(screen.queryByRole('tooltip')).toBeNull()
+    await user.hover(button)
+    expect(screen.getByRole('tooltip').textContent).toBe('Sign in first')
+    await user.unhover(button)
+    expect(screen.queryByRole('tooltip')).toBeNull()
+    await user.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+    await user.tab()
+    expect(document.activeElement).toBe(button)
+  })
+
+  it('Space and Enter are the action, and nothing while disabled with a reason', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    const { unmount } = render(<Button onClick={onClick}>Go</Button>)
+    await user.tab()
+    await user.keyboard('{Enter}')
+    await user.keyboard(' ')
+    expect(onClick).toHaveBeenCalledTimes(2)
+    unmount()
+
+    const held = vi.fn()
+    render(
+      <Button disabledReason="Not now" onClick={held}>
+        Go
+      </Button>,
+    )
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Go' }))
+    await user.keyboard('{Enter}')
+    await user.keyboard(' ')
+    expect(held).not.toHaveBeenCalled()
+  })
+
+  it('passes native props through', () => {
+    render(
+      <Button form="f1" aria-pressed="true" data-x="y" className="mt-2">
+        Label
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Label' })
+    expect(button.getAttribute('form')).toBe('f1')
+    expect(button.getAttribute('aria-pressed')).toBe('true')
+    expect(button.getAttribute('data-x')).toBe('y')
+    expect(button.classList.contains('mt-2')).toBe(true)
+  })
+})

package/src/Button.tsx

@@ -1,21 +1,27 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { WithTooltip } from './Tooltip'
 
 /**
  * Peek's Button (2026-08-28), verbatim, plus what Ship added and Peek should
  * adopt: a `destructive` variant — the muted button in the error colour, for
  * "Delete project" and its kind; a destructive action is a button like any
  * other, not a dotted link — and `type="button"` by default, so a button
- * inside a form submits it only when asked to.
+ * inside a form submits it only when asked to. On Base UI's Button since
+ * stage 2 of the migration (2026-09-07).
  *
  * Three variants and two sizes: 32px default / 24px small, 6px radius, 500
- * weight. Sizes are spelled as arbitrary values for the reason the README
- * records: tailwind-merge drops a custom `text-{size}` that is followed by a
- * `text-{colour}`.
+ * weight. The sizes are the `btn-default` and `btn-small` type tokens.
  *
  * The primary reads in `text-inverse` on the accent — a theme decides what
  * that is (dark on Peek's light accents, light on Ship's dark one). Under
  * Signal it is also semibold, as Peek has it.
+ *
+ * `disabledReason` is the package's own rule, "only offer actions that can
+ * succeed", done once: the button is disabled, stays reachable by keyboard
+ * (Base UI's `focusableWhenDisabled`), and shows the reason as a tooltip on
+ * hover. Ship wrote that wrapper by hand six times.
  */
 export type ButtonVariant = 'primary' | 'outlined' | 'muted' | 'destructive'
 export type ButtonSize = 'default' | 'small'
@@ -25,6 +31,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize
   /** 16px, stroke 1.5 on the default size; 14px on small. */
   leadingIcon?: ReactNode
+  /** Why the action cannot succeed right now. Disables the button, keeps it
+   *  reachable by keyboard, and shows the reason as a tooltip on hover. */
+  disabledReason?: string
   children: ReactNode
 }
 
@@ -35,33 +44,38 @@ export function Button({
   className,
   children,
   disabled,
+  disabledReason,
   type = 'button',
   ...props
 }: ButtonProps) {
   const hasLeadingIcon = !!leadingIcon
-  return (
-    <button
+  const button = (
+    <BaseButton
       type={type}
-      className={cn(
-        'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
-        size === 'default' && 'h-8 text-[14px] leading-[14px]',
-        size === 'small' && 'h-6 text-[12px] leading-[12px]',
-        // Extra right padding beside a leading icon, for optical balance.
-        size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
-        size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
-        !disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
-        !disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer',
-        !disabled && variant === 'muted' && 'hover:bg-bg-hover text-text-primary cursor-pointer',
-        !disabled && variant === 'destructive' && 'hover:bg-error-muted text-error-default cursor-pointer',
-        disabled && 'bg-bg-disabled text-text-disabled pointer-events-none',
-        disabled && variant === 'outlined' && 'border border-border-default',
-        className,
-      )}
-      disabled={disabled}
+      disabled={disabled || !!disabledReason}
+      focusableWhenDisabled={!!disabledReason}
+      className={(state) =>
+        cn(
+          'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
+          size === 'default' && 'h-8 text-btn-default',
+          size === 'small' && 'h-6 text-btn-small',
+          // Extra right padding beside a leading icon, for optical balance.
+          size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
+          size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
+          !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
+          !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer',
+          !state.disabled && variant === 'muted' && 'hover:bg-bg-hover text-text-primary cursor-pointer',
+          !state.disabled && variant === 'destructive' && 'hover:bg-error-muted text-error-default cursor-pointer',
+          state.disabled && 'bg-bg-disabled text-text-disabled pointer-events-none',
+          state.disabled && variant === 'outlined' && 'border border-border-default',
+          className,
+        )
+      }
       {...props}
     >
       {leadingIcon}
       {children}
-    </button>
+    </BaseButton>
   )
+  return disabledReason ? <WithTooltip label={disabledReason}>{button}</WithTooltip> : button
 }

package/src/Checkbox.mdx

@@ -14,9 +14,10 @@ the parent owns the state.
 
 - A yes/no the person sets: an option in a form, an include/exclude in a
   list.
-- Inside a clickable row: pass **no `onChange`** and the square goes inert
-  — the row's own click does the toggling, and the checkbox just shows the
-  state.
+- Inside a clickable row: pass **no `onChange`**. The square then only
+  draws the state: it is hidden from assistive technology and takes no
+  focus, so the row is one control. The row says the state itself —
+  `aria-pressed` on a button row, `aria-selected` on an option in a list.
 
 <Canvas of={CheckboxStories.InsideARow} />
 
@@ -34,10 +35,20 @@ import { Checkbox } from '@estiva-app/ui'
 <Checkbox checked={done} onChange={setDone} aria-label="Mark as done" />
 ```
 
-- It renders as a button with the `checkbox` role, so it works standalone
-  or inside clickable rows; its click never bubbles to the row.
+- Built on Base UI Checkbox, as Base UI renders it: a `<span>` with
+  `role="checkbox"` and `aria-checked`, and a hidden `<input>` beside it
+  for forms. Its click never reaches the row around it.
 - Give it an `aria-label` unless visible text right beside it names it.
-- Space or Enter toggles it, as any button.
+- It does not move when it toggles: the tick is always in the box, hidden
+  when unchecked, so both states hang on a line of text the same way.
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | Onto the box. |
+| Space | Toggles it. |
+| Enter | Nothing. As on a native checkbox, Enter is the form's key. |
 
 ## Props
 

package/src/Checkbox.stories.tsx

@@ -1,11 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'
 import { useState } from 'react'
 import { Checkbox } from './Checkbox'
 
 const meta = {
   title: 'Inputs/Checkbox',
   component: Checkbox,
-  args: { checked: false, 'aria-label': 'Example' },
+  // `onChange` makes it the control; without one it is the picture of a
+  // state (the "inside a row" story), and these stories are about the control.
+  args: { checked: false, 'aria-label': 'Example', onChange: fn() },
   argTypes: { onChange: { control: false } },
 } satisfies Meta<typeof Checkbox>
 
@@ -28,8 +31,9 @@ export const Toggles: Story = {
 
 /**
  * Inside a clickable row the row owns the toggle: the checkbox gets no
- * `onChange` and goes inert, so the whole row is one target rather than two
- * fighting ones.
+ * `onChange`, draws the state, and is hidden from assistive technology, so
+ * the whole row is one control. The row says the state itself — here
+ * `aria-pressed`, on an option in a list `aria-selected`.
  */
 export const InsideARow: Story = {
   parameters: { controls: { disable: true } },
@@ -38,11 +42,12 @@ export const InsideARow: Story = {
     return (
       <button
         type="button"
+        aria-pressed={checked}
         onClick={() => setChecked((v) => !v)}
         className="flex w-64 items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-bg-hover"
       >
-        <Checkbox checked={checked} aria-label="Row state" />
-        <span className="text-[14px] leading-[1.4] text-text-primary">The row is the control</span>
+        <Checkbox checked={checked} />
+        <span className="text-body-2 text-text-primary">The row is the control</span>
       </button>
     )
   },

package/src/Checkbox.test.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+/**
+ * What the Checkbox page claims, pinned: the keys, the click that never
+ * reaches the row, and the second rendering — no `onChange`, a picture of
+ * the state that is not a control. The last one is what clears axe's
+ * `nested-interactive` on the "inside a row" story (stage 1 of the
+ * migration).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Checkbox } from './Checkbox'
+
+afterEach(cleanup)
+
+describe('Checkbox', () => {
+  it('is a checkbox that Space toggles, and Enter does not', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Checkbox checked={false} onChange={onChange} aria-label="Done" />)
+    const box = screen.getByRole('checkbox', { name: 'Done' })
+    expect(box.getAttribute('aria-checked')).toBe('false')
+
+    await user.tab()
+    expect(document.activeElement).toBe(box)
+    await user.keyboard('{Enter}')
+    expect(onChange).not.toHaveBeenCalled()
+    await user.keyboard(' ')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('toggles on click, and the click never reaches the row', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    const onRow = vi.fn()
+    render(
+      <div onClick={onRow}>
+        <Checkbox checked onChange={onChange} aria-label="Done" />
+      </div>,
+    )
+    await user.click(screen.getByRole('checkbox', { name: 'Done' }))
+    expect(onChange).toHaveBeenCalledWith(false)
+    expect(onRow).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when disabled', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Checkbox checked={false} disabled onChange={onChange} aria-label="Done" />)
+    const box = screen.getByRole('checkbox', { name: 'Done' })
+    expect(box.getAttribute('aria-disabled')).toBe('true')
+    await user.click(box)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('with no onChange is a picture of the state, not a control: the row gets the click', async () => {
+    const user = userEvent.setup()
+    const onRow = vi.fn()
+    const { container } = render(
+      <button type="button" aria-pressed onClick={onRow}>
+        <Checkbox checked aria-label="Ignored" />
+        The row is the control
+      </button>,
+    )
+    expect(screen.queryByRole('checkbox')).toBeNull()
+    const square = container.querySelector('[aria-hidden="true"]')
+    expect(square).not.toBeNull()
+    expect(container.querySelectorAll('input, [tabindex], [role="checkbox"]')).toHaveLength(0)
+    await user.click(square as HTMLElement)
+    expect(onRow).toHaveBeenCalledTimes(1)
+  })
+})