@estiva-app/ui 0.9.0 → 0.10.0

package/src/Button.tsx

@@ -1,7 +1,7 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
-import { WithTooltip } from './Tooltip'
+import { TooltipTrigger } from './Tooltip'
 
 /**
  * Peek's Button (2026-08-28), verbatim, plus what Ship added and Peek should
@@ -26,7 +26,17 @@ import { WithTooltip } from './Tooltip'
 export type ButtonVariant = 'primary' | 'outlined' | 'muted' | 'destructive'
 export type ButtonSize = 'default' | 'small'
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+/**
+ * `ComponentPropsWithRef`, not `ButtonHTMLAttributes`, so a `ref` reaches the
+ * element. React 19 passes `ref` to a function component as an ordinary prop,
+ * so nothing here forwards it by hand — it rides in on the spread below. What
+ * was missing was only the *type* saying so, which is enough to stop a caller.
+ *
+ * It matters because a Base UI part composes through `render`: at stage 4 a
+ * `Menu.Trigger` or a `Dialog.Close` **is** this Button rather than wrapping
+ * one, and a trigger that cannot be measured or focused is not a trigger.
+ */
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
   variant?: ButtonVariant
   size?: ButtonSize
   /** 16px, stroke 1.5 on the default size; 14px on small. */
@@ -66,7 +76,13 @@ export function Button({
           !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 && 'bg-bg-disabled text-text-disabled',
+          // `pointer-events-none` only where the button is truly out of reach.
+          // With a `disabledReason` the button IS the tooltip's trigger, and a
+          // trigger the pointer cannot land on never opens one — Base UI already
+          // swallows the click (`focusableWhenDisabled` gives `aria-disabled`
+          // and a prevented `onClick`), so nothing else needs it.
+          state.disabled && !disabledReason && 'pointer-events-none',
           state.disabled && variant === 'outlined' && 'border border-border-default',
           className,
         )
@@ -77,5 +93,5 @@ export function Button({
       {children}
     </BaseButton>
   )
-  return disabledReason ? <WithTooltip label={disabledReason}>{button}</WithTooltip> : button
+  return disabledReason ? <TooltipTrigger label={disabledReason}>{button}</TooltipTrigger> : button
 }

package/src/Checkbox.tsx

@@ -30,6 +30,8 @@ export interface CheckboxProps {
   onChange?: (checked: boolean) => void
   disabled?: boolean
   'aria-label'?: string
+  /** Set by a `Field` with `required`; a caller inside one owes nothing. */
+  'aria-required'?: boolean | 'true' | 'false'
   className?: string
 }
 
@@ -61,6 +63,7 @@ export function Checkbox({ checked, onChange, disabled = false, className, ...ar
       checked={checked}
       disabled={disabled}
       aria-label={aria['aria-label']}
+      aria-required={aria['aria-required']}
       onCheckedChange={(next) => onChange(next)}
       onClick={(e) => e.stopPropagation()}
       className={(state) => squareClasses(state.checked, state.disabled, true, className)}

package/src/Chip.tsx

@@ -8,8 +8,9 @@ import { cn } from './cn'
  * slots centre their icon (Ship's addition — an icon beside text otherwise
  * rides on the baseline).
  *
- * The label is the `chip` type token, 11px / 500; it is a plain class here,
- * never merged, so tailwind-merge cannot drop it.
+ * The label is the `chip` type token, 11px / 500. It used to be spelled as a
+ * plain class under a note that it must never be merged; `cn()` knows the ramp
+ * now, so a token size survives beside a colour and the note is retired.
  */
 export type ChipType = 'neutral' | 'brand' | 'info' | 'warning' | 'success' | 'error'
 

package/src/ChipInput.tsx

@@ -94,6 +94,8 @@ export interface ChipInputProps<T extends ChipInputOption = ChipInputOption> {
   chipLeading?: (option: T) => ReactNode
   /** Before a suggestion row's label, 32px. */
   rowLeading?: (option: T) => ReactNode
+  /** Set by a `Field` with `required`; a caller inside one owes nothing. */
+  'aria-required'?: boolean | 'true' | 'false'
 }
 
 export function ChipInput<T extends ChipInputOption = ChipInputOption>({
@@ -105,6 +107,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
   excludeIds = [],
   chipLeading,
   rowLeading,
+  ...aria
 }: ChipInputProps<T>) {
   const [query, setQuery] = useState('')
   const [highlight, setHighlight] = useState(0)
@@ -211,6 +214,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
             setTimeout(() => setIsFocused(false), 150)
           }}
           placeholder={value.length === 0 ? placeholder : ''}
+          aria-required={aria['aria-required']}
           className="flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
         />
       </div>

package/src/ConfirmDialog.mdx

@@ -44,7 +44,26 @@ import { ConfirmDialog } from '@estiva-app/ui'
 - While `onConfirm` runs, both buttons wait. Resolving `false` keeps the
   dialog open — your surface has said why; a resolved `void`/`true`
   closes it.
-- Escape and the backdrop click cancel, via the shell.
+- **Escape cancels; a press on the backdrop does not.** This is Base UI's
+  `AlertDialog`, through the shell's `alert` (Katerina, D20, 2026-09-07): a
+  destructive question is answered rather than clicked away. The backdrop
+  used to cancel, and that is the one behaviour stage 3 deliberately changed.
+- It announces itself as an alert (`role="alertdialog"`), so a screen reader
+  reads the question on arrival instead of waiting to be asked.
+- Focus is trapped in the card and returns to whatever opened it, as for
+  every dialog since stage 3.
+
+## Keys
+
+Different from `DialogShell`'s in one row, and it is the row that matters.
+
+| Input | What happens |
+|---|---|
+| Escape | cancels |
+| backdrop click | **nothing** — the question has to be answered (D20) |
+| close button | cancels |
+| Tab / Shift+Tab | cycles the controls inside the card, and cannot leave it |
+| on close | focus returns to whatever opened it |
 
 ## Props
 

package/src/ConfirmDialog.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+/**
+ * What the ConfirmDialog page claims, pinned.
+ *
+ * It had no test file. Its page makes four behavioural claims — the button's
+ * variant follows `destructive`, the buttons wait while the action runs, a
+ * refusal keeps the dialog open, and a backdrop press no longer closes it
+ * (D20) — and none of them was held by anything.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ConfirmDialog } from './ConfirmDialog'
+
+afterEach(cleanup)
+
+const Fixture = (props: Partial<Parameters<typeof ConfirmDialog>[0]> = {}) => (
+  <ConfirmDialog title="Delete this?" confirmLabel="Delete" onConfirm={() => {}} onClose={() => {}} {...props}>
+    This cannot be undone.
+  </ConfirmDialog>
+)
+
+describe('ConfirmDialog', () => {
+  it('is an alert dialog, named by its title', async () => {
+    render(<Fixture />)
+    expect(await screen.findByRole('alertdialog', { name: /Delete this\?/ })).toBeTruthy()
+  })
+
+  /** D20, Katerina 2026-09-07: a destructive question is answered, not clicked
+   *  away. Escape and the ✕ still cancel. */
+  it('does not close on a press outside', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<Fixture onClose={onClose} />)
+    const dialog = await screen.findByRole('alertdialog')
+    await user.click(dialog.ownerDocument.body)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('closes on Escape', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<Fixture onClose={onClose} />)
+    await screen.findByRole('alertdialog')
+    await user.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('closes on the ✕, which is the dialog’s own Close part', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<Fixture onClose={onClose} />)
+    await user.click(await screen.findByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('Cancel closes without confirming', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    const onConfirm = vi.fn()
+    render(<Fixture onClose={onClose} onConfirm={onConfirm} />)
+    await user.click(await screen.findByRole('button', { name: 'Cancel' }))
+    expect(onConfirm).not.toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('confirming runs the action and then closes', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    const onConfirm = vi.fn()
+    render(<Fixture onClose={onClose} onConfirm={onConfirm} />)
+    await user.click(await screen.findByRole('button', { name: 'Delete' }))
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  /** An action that resolves `false` has already said why, through the
+   *  caller's banner — so the dialog stays, with the question still on it. */
+  it('a refused action keeps it open', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<Fixture onClose={onClose} onConfirm={() => false} />)
+    await user.click(await screen.findByRole('button', { name: 'Delete' }))
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByRole('alertdialog')).toBeTruthy()
+  })
+
+  it('an action that resolves nothing still closes', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<Fixture onClose={onClose} onConfirm={async () => {}} />)
+    await user.click(await screen.findByRole('button', { name: 'Delete' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  /** While it runs, neither answer can be given again. */
+  it('the buttons wait while the action runs', async () => {
+    const user = userEvent.setup()
+    let release: (value: boolean) => void = () => {}
+    const onConfirm = vi.fn(() => new Promise<boolean>((resolve) => { release = resolve }))
+    render(<Fixture onConfirm={onConfirm} />)
+    await user.click(await screen.findByRole('button', { name: 'Delete' }))
+    // Plainly disabled, not `aria-disabled`: neither answer carries a reason
+    // to give, so the controls are out of reach rather than focusable.
+    expect((screen.getByRole('button', { name: 'Delete' }) as HTMLButtonElement).disabled).toBe(true)
+    expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(true)
+    release(true)
+  })
+})

package/src/ConfirmDialog.tsx

@@ -11,6 +11,11 @@ import { DialogShell } from './DialogShell'
  * archive); `primary` otherwise. While the action runs the buttons wait;
  * an action that resolves `false` keeps the dialog open, so the caller's
  * banner can say why.
+ *
+ * On Base UI's `AlertDialog` since stage 3 of the migration (2026-09-07),
+ * through `DialogShell`'s `alert`. **A press on the backdrop no longer
+ * closes it** (Katerina, D20): a destructive question is answered, not
+ * clicked away. Escape and the close button still cancel, as they did.
  */
 export interface ConfirmDialogProps {
   title: string
@@ -35,6 +40,7 @@ export function ConfirmDialog({ title, children, confirmLabel, destructive = fal
   }
   return (
     <DialogShell
+      alert
       title={title}
       onClose={onClose}
       bodyClassName="flex flex-col gap-3 text-body-2 text-text-primary"

package/src/DialogShell.mdx

@@ -23,7 +23,10 @@ footer for the buttons. A dialog is just what goes in the three slots.
 
 - A short list of verbs from a trigger → **Menu**.
 - "Are you sure?" → **ConfirmDialog** — it is this shell with the question
-  already wired.
+  already wired, and it is the *only* thing that uses `alert`. There is no
+  `alert` story here, on purpose: any example of it would be a confirmation
+  dialog rebuilt by hand, which is the one thing this bullet exists to stop.
+  Its canvases and its nine tests are on that page.
 - Telling someone what happened → **Toast**.
 
 ## How
@@ -52,16 +55,27 @@ import { DialogShell, Button } from '@estiva-app/ui'
   with `overflow-y-auto` for long lists). Rows in a height-capped flex
   body need `shrink-0`, or overflow crushes them.
 - The card names itself to assistive tech (`role="dialog"`, labelled by
-  `title`). Focus is not trapped or moved — give the first field
-  `autoFocus` where typing is the point.
+  its header — or by `title` when `headerContent` replaces that text).
+- **Focus is trapped and returned.** Tab cannot leave the card, and closing
+  puts focus back on whatever opened the dialog. This page said the opposite
+  until stage 3; it is Base UI's now, and pinned by `DialogShell.test.tsx`.
+  The rest of the page is marked `inert` while it is open, so a screen
+  reader cannot wander out either. `autoFocus` on the first field is still
+  worth setting where typing is the point — the trap decides where focus
+  *cannot* go, not where it starts.
+- `alert` for a question that has to be answered: a press on the backdrop
+  stops closing it (Katerina, D20). Escape and the ✕ still do.
+  `ConfirmDialog` sets it; a form or a roster should not.
 
 ## Keys
 
 | Input | What happens |
 |---|---|
 | Escape | closes |
-| backdrop click | closes |
+| backdrop click | closes — **except with `alert`, where nothing happens** |
 | close button | closes (it is an IconButton with its label) |
+| Tab / Shift+Tab | cycles the controls inside the card, and cannot leave it |
+| on close | focus returns to whatever opened the dialog |
 
 ## Props
 

package/src/DialogShell.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
+import { IconArrowLeft } from '@tabler/icons-react'
 import { Button } from './Button'
+import { Chip } from './Chip'
 import { DialogShell } from './DialogShell'
+import { IconButton } from './IconButton'
 import { Field } from './Field'
 import { TextInput } from './TextInput'
 import { Textarea } from './Textarea'
@@ -49,21 +52,68 @@ export const Default: Story = {
   },
 }
 
-/** A minimal confirmation dialog — single line of body, two buttons. */
-export const Confirmation: Story = {
+/**
+ * **`headerContent` replaces the title text** — a back button beside it, a
+ * count after it — and the ✕ stays. The dialog is then named by its `title`
+ * anyway, since there is no longer a heading to point at.
+ *
+ * There used to be a `Confirmation` story here. It hand-built what
+ * `ConfirmDialog` *is* — same question, same two buttons — and hand-built it
+ * wrongly: a plain dialog, so a press on the backdrop dismissed the question,
+ * which is exactly what D20 stopped. A story showing the thing the page's own
+ * "When not" tells you not to build is worse than no story (Katerina,
+ * 2026-09-08). These two show what this shell does that `ConfirmDialog`
+ * cannot.
+ */
+export const WithHeaderContent: Story = {
   args: {
-    title: 'Delete this?',
+    headerContent: (
+      <div className="flex items-center gap-2">
+        <IconButton aria-label="Back" tooltip="Back">
+          <IconArrowLeft size={16} stroke={1.5} />
+        </IconButton>
+        <span className="text-h4 text-text-primary">Item one</span>
+        <Chip label="3" />
+      </div>
+    ),
     footer: (
       <>
         <Button variant="muted">Cancel</Button>
-        <Button variant="destructive">Delete</Button>
+        <Button variant="primary">Save</Button>
+      </>
+    ),
+    children: <p className="text-body-2 leading-[1.4] text-text-primary">The header is the caller's, and the ✕ is still the dialog's.</p>,
+  },
+}
+
+/**
+ * **No footer.** The body keeps the card's own bottom edge — a roster, a list,
+ * anything that simply ends rather than asking a question. There is no divider
+ * under the body either, because there is nothing to divide it from.
+ */
+export const WithoutAFooter: Story = {
+  args: {
+    title: 'Item one',
+    footer: null,
+    bodyClassName: 'flex flex-col gap-3',
+    children: (
+      <>
+        {['Item one', 'Item two', 'Item three'].map((label) => (
+          <div key={label} className="flex items-center justify-between">
+            <span className="text-body-2 text-text-primary">{label}</span>
+            <span className="text-caption text-text-secondary">Value</span>
+          </div>
+        ))}
       </>
     ),
-    children: <p className="text-body-2 leading-[1.4] text-text-primary">This permanently removes it. It cannot be undone.</p>,
   },
 }
 
-/** Open it, then close it with the ✕, the backdrop, or Escape. */
+/**
+ * Open it, then close it with the ✕, the backdrop, or Escape. Tab around while
+ * it is open: focus cannot leave the card, and when the dialog closes it
+ * returns to the button that opened it. Neither was true before stage 3.
+ */
 export const OpenAndClose: Story = {
   args: { footer: null, children: null },
   render: (args) => {

package/src/DialogShell.test.tsx

@@ -0,0 +1,184 @@
+// @vitest-environment jsdom
+/**
+ * What the pages claim after stage 3, pinned.
+ *
+ * `DialogShell.mdx` said, in as many words, that this component did not trap
+ * focus. It does now, and a sentence that changed from "it does not" to "it
+ * does" is exactly the kind that needs a test under it — otherwise the page is
+ * the only thing holding the claim up.
+ *
+ * The one that is a *decision* rather than a capability is the last pair:
+ * a plain dialog closes when you press outside it, and a `ConfirmDialog` does
+ * not (Katerina, D20, 2026-09-07). Both are asserted, because the difference
+ * is the whole reason `alert` exists.
+ */
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from './Button'
+import { ConfirmDialog } from './ConfirmDialog'
+import { DialogShell } from './DialogShell'
+import { TextInput } from './TextInput'
+
+afterEach(cleanup)
+
+const Shell = ({ onClose }: { onClose: () => void }) => (
+  <DialogShell title="Rename topic" onClose={onClose} footer={<Button variant="primary">Save</Button>}>
+    <TextInput aria-label="Name" defaultValue="" />
+  </DialogShell>
+)
+
+describe('DialogShell', () => {
+  it('is named by its header', () => {
+    render(<Shell onClose={() => {}} />)
+    expect(screen.getByRole('dialog', { name: 'Rename topic' })).toBeTruthy()
+  })
+
+  it('is named by the title even when headerContent replaces the header text', () => {
+    // The name used to be spelled with `aria-label` in both branches. Now the
+    // header names it when the header is the title, so this is the branch that
+    // still needs the label — and the one that would silently go unnamed.
+    render(
+      <DialogShell title="Members" onClose={() => {}} headerContent={<span>Back · Members · 4</span>}>
+        <p>Body</p>
+      </DialogShell>,
+    )
+    expect(screen.getByRole('dialog', { name: 'Members' })).toBeTruthy()
+  })
+
+  it('closes on Escape', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Shell onClose={onClose} />)
+    await user.keyboard('{Escape}')
+    await waitFor(() => expect(onClose).toHaveBeenCalled())
+  })
+
+  it('closes on the close button', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Shell onClose={onClose} />)
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalled()
+  })
+
+  it('traps focus, which this component could not do before', async () => {
+    // Written expecting only that Tab could not reach the page behind the
+    // card. Base UI does more than that, and the first version of this test
+    // failed on it: the rest of the document is marked "inert" and
+    // "aria-hidden", so the button behind is not findable by role at all.
+    // Both halves are asserted, because the stronger one is what would go
+    // unnoticed if it weakened.
+    //
+    // The dialog portals to the body, so `container` holds nothing but the
+    // page behind it — which makes "focus never enters the page" one check.
+    const user = userEvent.setup()
+    const { container } = render(
+      <>
+        <button type="button">Behind the dialog</button>
+        <Shell onClose={() => {}} />
+      </>,
+    )
+    const behind = container.querySelector('button')!
+    expect(behind.textContent).toBe('Behind the dialog')
+    expect(screen.queryByRole('button', { name: 'Behind the dialog' })).toBeNull()
+
+    // Three controls in the card, so five tabs walk past the end of them.
+    for (let i = 0; i < 5; i++) {
+      await user.tab()
+      expect(container.contains(document.activeElement)).toBe(false)
+    }
+  })
+
+  it('focuses the card, not the ✕', async () => {
+    // Base UI's default is the first tabbable element, which here is the close
+    // button — so every dialog opened with a ring on its ✕. The screenshot
+    // diff caught it as a 28px square, and this is the guard so it cannot come
+    // back quietly.
+    render(<Shell onClose={() => {}} />)
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole('dialog'))
+    })
+  })
+
+  it('still lets a field with autoFocus take it', async () => {
+    // The two dialogs in Ship rely on this, and pinning the card as the initial
+    // focus is exactly the change that could have broken it.
+    render(
+      <DialogShell title="Rename topic" onClose={() => {}}>
+        <TextInput aria-label="Name" autoFocus defaultValue="" />
+      </DialogShell>,
+    )
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByLabelText('Name'))
+    })
+  })
+
+  it('returns focus to whatever opened it', async () => {
+    const user = userEvent.setup()
+    function Opener() {
+      const [open, setOpen] = useState(false)
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Open
+          </button>
+          {open && (
+            <DialogShell title="Rename topic" onClose={() => setOpen(false)}>
+              Body
+            </DialogShell>
+          )}
+        </>
+      )
+    }
+    render(<Opener />)
+    const opener = screen.getByRole('button', { name: 'Open' })
+    await user.click(opener)
+    await screen.findByRole('dialog', { name: 'Rename topic' })
+    await user.keyboard('{Escape}')
+    await waitFor(() => expect(document.activeElement).toBe(opener))
+  })
+
+  it('closes when you press outside it', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Shell onClose={onClose} />)
+    await user.click(document.querySelector('.bg-scrim') as HTMLElement)
+    await waitFor(() => expect(onClose).toHaveBeenCalled())
+  })
+})
+
+describe('ConfirmDialog', () => {
+  const Confirm = ({ onClose }: { onClose: () => void }) => (
+    <ConfirmDialog title="Delete project?" confirmLabel="Delete" destructive onConfirm={() => true} onClose={onClose}>
+      This cannot be undone.
+    </ConfirmDialog>
+  )
+
+  it('does NOT close when you press outside it (D20)', async () => {
+    // The difference from the dialog above, and the reason `alert` exists: a
+    // destructive question is answered, not clicked away.
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Confirm onClose={onClose} />)
+    await user.click(document.querySelector('.bg-scrim') as HTMLElement)
+    // Give the close a chance to happen before asserting that it did not.
+    await new Promise((r) => setTimeout(r, 50))
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByRole('alertdialog', { name: 'Delete project?' })).toBeTruthy()
+  })
+
+  it('still closes on Escape', async () => {
+    const onClose = vi.fn()
+    const user = userEvent.setup()
+    render(<Confirm onClose={onClose} />)
+    await user.keyboard('{Escape}')
+    await waitFor(() => expect(onClose).toHaveBeenCalled())
+  })
+
+  it('announces itself as an alert rather than a plain dialog', () => {
+    render(<Confirm onClose={() => {}} />)
+    expect(screen.getByRole('alertdialog')).toBeTruthy()
+  })
+})