@lovett/ui 0.0.11 → 0.1.0

package/src/thread/__tests__/thread.test.tsx

@@ -0,0 +1,662 @@
+/**
+ * Thread — the behaviours ADR-147 actually promises.
+ *
+ * Written against the acceptance criteria rather than the happy path. The
+ * clock is frozen by passing `now`, so nothing here is time-dependent
+ * (CLAUDE.md §7) and the ticker never starts.
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { Thread } from '../thread'
+import { REACTION_META } from '../reactions'
+import type { ThreadComment } from '../types'
+import { FIXTURE_NOW, LONG_BODY, THREAD_FIXTURE } from './fixtures/thread-fixture'
+
+function textarea(label: string): HTMLTextAreaElement {
+  const node = document.querySelector<HTMLTextAreaElement>(`textarea[aria-label="${label}"]`)
+  expect(node).not.toBeNull()
+  if (node === null) throw new Error(`no textarea ${label}`)
+  return node
+}
+
+function commentBox(id: string): HTMLElement {
+  const node = document.querySelector<HTMLElement>(`[data-comment-id="${id}"]`)
+  expect(node).not.toBeNull()
+  if (node === null) throw new Error(`no comment ${id}`)
+  return node
+}
+
+/**
+ * The byline row of one comment.
+ *
+ * Scoping to it matters now that the reply composer renders "Replying to
+ * <name>": a display name legitimately appears twice inside a comment box, and
+ * a bare `getByText` on the name would be ambiguous. The composer copy is
+ * clipped and `aria-hidden` while closed, so this is a test-ergonomics
+ * correction rather than a real duplicate.
+ */
+function byline(id: string): HTMLElement {
+  const node = commentBox(id).querySelector<HTMLElement>('[data-thread-byline]')
+  expect(node).not.toBeNull()
+  if (node === null) throw new Error(`no byline ${id}`)
+  return node
+}
+
+/**
+ * THE live region. One per thread, always mounted, so this is a `getBy` rather
+ * than a `queryBy` even before it has said anything.
+ *
+ * The text is read through `spoken()` because the region alternates a trailing
+ * NBSP to force a re-announcement when two consecutive messages are identical
+ * — every screen reader trims it, so a test that asserted the raw string would
+ * be asserting an implementation detail no user can hear.
+ */
+function liveRegion(): HTMLElement {
+  return screen.getByRole('status')
+}
+
+function spoken(): string {
+  return (liveRegion().textContent ?? '').replace(/\u{00A0}/gu, '').trim()
+}
+
+function renderThread(overrides: Partial<React.ComponentProps<typeof Thread>> = {}) {
+  return render(
+    <Thread
+      comments={THREAD_FIXTURE}
+      now={FIXTURE_NOW}
+      locale="en-GB"
+      defaultSort="new"
+      {...overrides}
+    />,
+  )
+}
+
+describe('Thread — rendering', () => {
+  it('renders every comment in the fixture and reports the count', () => {
+    renderThread()
+    expect(screen.getByText(String(THREAD_FIXTURE.length))).toBeTruthy()
+    expect(screen.getByText(/Pulling the second flight forward/)).toBeTruthy()
+  })
+
+  it('renders a one-word body and a 2,000-character body without crashing', () => {
+    renderThread()
+    expect(LONG_BODY.length).toBe(2000)
+    expect(screen.getByText('Shipped.')).toBeTruthy()
+    expect(commentBox('c-long').textContent).toContain('The flighting plan holds')
+  })
+
+  it('degrades a null author and a null display name without fabricating one', () => {
+    renderThread()
+    // author === null (ON DELETE SET NULL)
+    expect(within(byline('c-deleted-child-a')).getByText('Deleted user')).toBeTruthy()
+    // a real user with only an email
+    expect(within(byline('c-deleted-child-b')).getByText('jordan@example.com')).toBeTruthy()
+  })
+
+  it('puts the exact instant in a <time datetime>, and the relative label beside it', () => {
+    renderThread()
+    const time = within(commentBox('c-reactions')).getByText('6m')
+    expect(time.tagName).toBe('TIME')
+    expect(time.getAttribute('datetime')).toBe(new Date(FIXTURE_NOW - 6 * 60_000).toISOString())
+  })
+
+  it('marks an edited comment', () => {
+    renderThread()
+    expect(within(commentBox('c-mentions')).getByText('· edited')).toBeTruthy()
+  })
+
+  it('renders a user mention and a task mention as chips, and a plain link as a link', () => {
+    renderThread()
+    const box = commentBox('c-mentions')
+    expect(within(box).getByText('Marcus Webb')).toBeTruthy()
+    expect(within(box).getByText('Slice B migration')).toBeTruthy()
+    const link = within(box).getByText('the plan')
+    expect(link.getAttribute('href')).toBe('https://example.com/plan')
+  })
+
+  it('renders image and file attachments', () => {
+    renderThread()
+    const box = commentBox('c-attachments')
+    expect(within(box).getAllByRole('img').length).toBe(2)
+    expect(within(box).getByText('creative-spec.pdf')).toBeTruthy()
+  })
+})
+
+describe('Thread — D4 deletion and orphans', () => {
+  it('renders a deleted parent as a tombstone WITH its replies still under it', () => {
+    renderThread()
+    const parent = commentBox('c-deleted-parent')
+    // The byline stands in for the author, and the body is blanked. Asserted
+    // by position rather than by counting, because "Replying to [deleted]" in
+    // the always-mounted composer is a legitimate third occurrence.
+    expect(within(byline('c-deleted-parent')).getByText('[deleted]')).toBeTruthy()
+    expect(within(parent).getByText('[deleted]', { selector: 'p' })).toBeTruthy()
+    // The children are nested INSIDE the tombstone, not promoted alongside it.
+    expect(within(parent).getByText(/Agreed, and the same applies/)).toBeTruthy()
+    expect(within(parent).getByText(/Still true after the rebrief/)).toBeTruthy()
+  })
+
+  it('labels a reply whose parent is not on this page', () => {
+    renderThread()
+    expect(
+      within(commentBox('c-orphan')).getByText(/In reply to a comment that isn/),
+    ).toBeTruthy()
+  })
+})
+
+describe('Thread — collapse, paging and the depth cap', () => {
+  it('shows three replies then "Show 5 more replies"', () => {
+    renderThread()
+    const many = commentBox('c-many')
+    expect(within(many).getByText('Market 3 confirmed.')).toBeTruthy()
+    expect(within(many).queryByText('Market 4 confirmed.')).toBeNull()
+
+    fireEvent.click(within(many).getByRole('button', { name: 'Show 5 more replies' }))
+    expect(within(commentBox('c-many')).getByText('Market 8 confirmed.')).toBeTruthy()
+  })
+
+  // Collapse folds the SUBTREE, not the comment's own body. The old "byline
+  // renders identically in both states" rule existed to stop the row resizing
+  // when its body was folded away; folding the replies instead makes that
+  // impossible by construction, and the byline check below is what is left of
+  // it. There is exactly ONE collapse control per comment — the circle on the
+  // rail — and its name deliberately differs from the summary chip's.
+  it('folds a subtree into a summary and leaves the comment above it untouched', () => {
+    renderThread()
+    const before = byline('c-many').textContent
+    const collapse = within(commentBox('c-many')).getByRole('button', {
+      name: 'Collapse replies to Priya Nair',
+    })
+    fireEvent.click(collapse)
+
+    expect(byline('c-many').textContent).toBe(before)
+    // The comment itself is still fully readable...
+    expect(
+      within(commentBox('c-many')).getByText('Dropping the full list of markets below.'),
+    ).toBeTruthy()
+    // ...and only its replies are gone.
+    expect(within(commentBox('c-many')).queryByText('Market 1 confirmed.')).toBeNull()
+
+    // A summary, not a bare count: faces and a recency, behind one control.
+    const summary = within(commentBox('c-many')).getByRole('button', {
+      name: 'Show 8 replies to Priya Nair',
+    })
+    expect(summary.textContent).toContain('8 replies')
+  })
+
+  it('nests without a cap by default — every level of the chain renders', () => {
+    renderThread()
+    expect(screen.getByText('Level three.')).toBeTruthy()
+    expect(screen.getByText('Level four, past the render cap.')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Continue this thread' })).toBeNull()
+  })
+
+  it('caps the render when a consumer asks for one, and reaches the rest through "Continue this thread"', () => {
+    renderThread({ maxDepth: 2 })
+    expect(screen.getByText('Level three.')).toBeTruthy()
+    expect(screen.queryByText('Level four, past the render cap.')).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Continue this thread' }))
+    expect(screen.getByText('Level four, past the render cap.')).toBeTruthy()
+  })
+
+  it('hands the cap to a consumer that has somewhere to navigate to', () => {
+    const onContinueThread = vi.fn()
+    renderThread({ maxDepth: 2, onContinueThread })
+    fireEvent.click(screen.getByRole('button', { name: 'Continue this thread' }))
+    expect(onContinueThread).toHaveBeenCalledWith('c-deep-2')
+    // The consumer owns it now, so nothing expanded in place.
+    expect(screen.queryByText('Level four, past the render cap.')).toBeNull()
+  })
+})
+
+describe('Thread — D17 optimistic send', () => {
+  it('shows a pending send', () => {
+    renderThread()
+    expect(within(commentBox('c-pending')).getByText('Sending…')).toBeTruthy()
+  })
+
+  it('announces a failed send with role="alert" and offers a retry', () => {
+    const onRetry = vi.fn()
+    renderThread({ onRetry })
+    const alert = within(commentBox('c-failed')).getByRole('alert')
+    expect(alert.textContent).toContain('This comment did not send.')
+    fireEvent.click(within(alert).getByRole('button', { name: 'Try again' }))
+    expect(onRetry).toHaveBeenCalledWith('c-failed')
+  })
+})
+
+describe('Thread — D8 reactions', () => {
+  it('reports the reaction key rather than holding state locally', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    const chip = within(commentBox('c-reactions')).getByRole('button', { name: 'Agree — 7' })
+    expect(chip.getAttribute('aria-pressed')).toBe('true')
+    fireEvent.click(chip)
+    expect(onReact).toHaveBeenCalledWith('c-reactions', 'up')
+  })
+
+  it('offers the bounded set behind an "Add a reaction" control', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    const box = commentBox('c-one-word')
+    fireEvent.click(within(box).getByRole('button', { name: 'Add a reaction' }))
+    fireEvent.click(within(box).getByRole('button', { name: 'Celebrate' }))
+    expect(onReact).toHaveBeenCalledWith('c-one-word', 'celebrate')
+  })
+})
+
+describe('Thread — D8 reactions are emoji, keys are not', () => {
+  it('draws the glyph but keeps the accessible name a WORD', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    const chip = within(commentBox('c-reactions')).getByRole('button', { name: 'Agree — 7' })
+    // The glyph is what a sighted reader sees...
+    expect(chip.textContent).toContain(REACTION_META.up.emoji)
+    // ...and "party popper" is never what a screen reader says. The label is
+    // the meaning, not the picture.
+    expect(chip.getAttribute('aria-label')).toBe('Agree — 7')
+  })
+
+  it('still stores a bounded KEY, never the emoji literal', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    fireEvent.click(within(commentBox('c-reactions')).getByRole('button', { name: 'Agree — 7' }))
+    expect(onReact).toHaveBeenCalledWith('c-reactions', 'up')
+  })
+})
+
+describe('Thread — the byline overflow menu', () => {
+  it('renders only the items whose callbacks exist', () => {
+    const onEdit = vi.fn()
+    renderThread({ onEdit })
+    fireEvent.click(
+      within(commentBox('c-one-word')).getByRole('button', {
+        name: "More actions for Lee Ndiaye's comment",
+      }),
+    )
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).toBeTruthy()
+    expect(screen.queryByRole('menuitem', { name: 'Copy link' })).toBeNull()
+    // Absent, not disabled — a permanently greyed row reads as broken.
+    expect(screen.queryByRole('menuitem', { name: 'Delete' })).toBeNull()
+  })
+
+  it('marks Delete destructive and reports the comment id', () => {
+    const onDelete = vi.fn()
+    const onCopyLink = vi.fn()
+    renderThread({ onDelete, onCopyLink })
+    fireEvent.click(
+      within(commentBox('c-one-word')).getByRole('button', {
+        name: "More actions for Lee Ndiaye's comment",
+      }),
+    )
+    expect(screen.getByRole('menuitem', { name: 'Copy link' })).toBeTruthy()
+    const del = screen.getByRole('menuitem', { name: 'Delete' })
+    expect(del.getAttribute('data-variant')).toBe('destructive')
+    fireEvent.click(del)
+    expect(onDelete).toHaveBeenCalledWith('c-one-word')
+  })
+
+  it('offers no overflow at all when nothing can be done', () => {
+    // No callbacks and no clipboard in this environment, so the trigger must
+    // not render — an empty menu is worse than no menu.
+    renderThread()
+    expect(
+      within(commentBox('c-one-word')).queryByRole('button', {
+        name: "More actions for Lee Ndiaye's comment",
+      }),
+    ).toBeNull()
+  })
+
+  it('copies the body itself and reports a clipboard REJECTION rather than assuming success', async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error('denied'))
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    })
+    const onCopyText = vi.fn()
+    try {
+      renderThread({ onCopyText })
+      fireEvent.click(
+        within(commentBox('c-one-word')).getByRole('button', {
+          name: "More actions for Lee Ndiaye's comment",
+        }),
+      )
+      fireEvent.click(screen.getByRole('menuitem', { name: 'Copy text' }))
+      expect(writeText).toHaveBeenCalledWith('Shipped.')
+      await vi.waitFor(() => {
+        expect(onCopyText).toHaveBeenCalledWith('c-one-word', false)
+      })
+    } finally {
+      Reflect.deleteProperty(navigator, 'clipboard')
+    }
+  })
+})
+
+describe('Thread — the composer', () => {
+  it('renders no composer at all when the surface is read-only', () => {
+    renderThread()
+    expect(screen.queryByLabelText('Add a comment')).toBeNull()
+  })
+
+  it('submits the root draft, and on Cmd/Ctrl+Enter', () => {
+    const onSubmit = vi.fn()
+    renderThread({ onSubmit })
+    const field = screen.getByLabelText('Add a comment')
+    fireEvent.change(field, { target: { value: '  Looks right to me.  ' } })
+    fireEvent.keyDown(field, { key: 'Enter', metaKey: true })
+    expect(onSubmit).toHaveBeenCalledWith('Looks right to me.')
+  })
+
+  it('formats the current selection for real — the toolbar is not decoration', () => {
+    const onSubmit = vi.fn()
+    renderThread({ onSubmit })
+    const field = textarea('Add a comment')
+    fireEvent.change(field, { target: { value: 'ship it' } })
+    field.setSelectionRange(0, 4)
+    fireEvent.click(screen.getByRole('button', { name: 'Bold' }))
+    expect(textarea('Add a comment').value).toBe('**ship** it')
+  })
+
+  it('replies to a specific comment with its parentId', () => {
+    const onSubmit = vi.fn()
+    renderThread({ onSubmit })
+    const box = commentBox('c-one-word')
+    fireEvent.click(within(box).getByRole('button', { name: 'Reply to Lee Ndiaye' }))
+    const field = within(commentBox('c-one-word')).getByRole('textbox', {
+      name: 'Reply to Lee Ndiaye',
+    })
+    fireEvent.change(field, { target: { value: 'Nice.' } })
+    fireEvent.keyDown(field, { key: 'Enter', ctrlKey: true })
+    expect(onSubmit).toHaveBeenCalledWith('Nice.', 'c-one-word')
+  })
+})
+
+describe('Thread — sort', () => {
+  it('ranks by top, and switches to newest', () => {
+    const empty: readonly ThreadComment[] = []
+    const { unmount } = render(<Thread comments={empty} now={FIXTURE_NOW} />)
+    expect(screen.getByText(/No comments yet/)).toBeTruthy()
+    unmount()
+
+    renderThread({ defaultSort: 'top' })
+    const first = document.querySelectorAll('[data-comment-id]')[0]
+    expect(first?.getAttribute('data-comment-id')).toBe('c-reactions')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Newest' }))
+    const nowFirst = document.querySelectorAll('[data-comment-id]')[0]
+    expect(nowFirst?.getAttribute('data-comment-id')).toBe('c-pending')
+  })
+})
+
+describe('Thread — HIGH 1/2: the reaction picker holds its focus', () => {
+  function openPicker(commentId: string): HTMLElement {
+    const box = commentBox(commentId)
+    const trigger = within(box).getByRole('button', { name: 'Add a reaction' })
+    fireEvent.click(trigger)
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+    return trigger
+  }
+
+  it('returns focus to the trigger when a reaction is chosen', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    const trigger = openPicker('c-one-word')
+
+    fireEvent.click(within(commentBox('c-one-word')).getByRole('button', { name: 'Celebrate' }))
+
+    expect(onReact).toHaveBeenCalledWith('c-one-word', 'celebrate')
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    // The button that was just pressed is now inside an aria-hidden panel. If
+    // focus had stayed on it, it would be sitting on an element that is not in
+    // the accessibility tree and the next Tab would restart from <body>.
+    expect(document.activeElement).toBe(trigger)
+    const panel = document.getElementById(trigger.getAttribute('aria-controls') ?? '')
+    expect(panel?.getAttribute('aria-hidden')).toBe('true')
+    expect(panel?.contains(document.activeElement)).toBe(false)
+  })
+
+  it('closes on Escape and returns focus to the trigger', () => {
+    const onReact = vi.fn()
+    renderThread({ onReact })
+    const trigger = openPicker('c-one-word')
+    const celebrate = within(commentBox('c-one-word')).getByRole('button', { name: 'Celebrate' })
+    celebrate.focus()
+
+    fireEvent.keyDown(celebrate, { key: 'Escape' })
+
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).toBe(trigger)
+    // Escape is a dismissal, never a choice.
+    expect(onReact).not.toHaveBeenCalled()
+  })
+
+  it('closes on Escape from the trigger itself', () => {
+    renderThread({ onReact: vi.fn() })
+    const trigger = openPicker('c-one-word')
+    fireEvent.keyDown(trigger, { key: 'Escape' })
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('dismisses on a pointer press outside WITHOUT stealing focus back', () => {
+    renderThread({ onReact: vi.fn() })
+    const trigger = openPicker('c-one-word')
+    // Focus is not inside the panel, so the press is choosing its own target
+    // and pulling focus to the trigger would fight it.
+    fireEvent.pointerDown(document.body)
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).not.toBe(trigger)
+  })
+
+  it('leaves the picker alone when the press is inside the bar', () => {
+    renderThread({ onReact: vi.fn() })
+    const trigger = openPicker('c-one-word')
+    fireEvent.pointerDown(trigger)
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('unbinds the outside listener when the picker closes', () => {
+    const add = vi.spyOn(document, 'addEventListener')
+    const remove = vi.spyOn(document, 'removeEventListener')
+    try {
+      renderThread({ onReact: vi.fn() })
+      const before = remove.mock.calls.filter(([type]) => type === 'pointerdown').length
+      const trigger = openPicker('c-one-word')
+      expect(add.mock.calls.filter(([type]) => type === 'pointerdown').length).toBeGreaterThan(0)
+      fireEvent.keyDown(trigger, { key: 'Escape' })
+      // Bound while open, gone the moment it closes — no idle document
+      // listener per comment for the life of the thread.
+      expect(remove.mock.calls.filter(([type]) => type === 'pointerdown').length).toBe(before + 1)
+    } finally {
+      add.mockRestore()
+      remove.mockRestore()
+    }
+  })
+})
+
+describe('Thread — HIGH 3: the polite live region', () => {
+  it('is rendered EMPTY on mount and kept in the DOM', () => {
+    renderThread()
+    const region = liveRegion()
+    expect(region.getAttribute('aria-live')).toBe('polite')
+    // A live region injected at the moment it has something to say is the
+    // documented way to get an announcement that never arrives.
+    expect(spoken()).toBe('')
+  })
+
+  it('says nothing on first render, however many comments arrive with it', () => {
+    // The failure this guards: every page load reading the comment count aloud.
+    renderThread()
+    expect(spoken()).toBe('')
+    expect(THREAD_FIXTURE.length).toBeGreaterThan(1)
+  })
+
+  it('announces a comment the viewer posted landing', () => {
+    const { rerender } = renderThread()
+    expect(spoken()).toBe('')
+
+    const landed = THREAD_FIXTURE.map((comment) =>
+      comment.id === 'c-pending' ? { ...comment, state: 'sent' as const } : comment,
+    )
+    rerender(<Thread comments={landed} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+
+    expect(spoken()).toBe('Comment posted')
+  })
+
+  it('announces comments that arrived without the viewer posting them', () => {
+    const { rerender } = renderThread()
+    const arrived: readonly ThreadComment[] = [
+      ...THREAD_FIXTURE,
+      {
+        id: 'c-polled',
+        author: { id: 'usr_new', name: 'Ada Cole' },
+        bodyMd: 'Came in on the poll.',
+        createdAt: FIXTURE_NOW - 1000,
+      },
+    ]
+    rerender(<Thread comments={arrived} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(spoken()).toBe('1 new comment')
+  })
+
+  it('does not mistake the viewer’s own optimistic send for someone else’s comment', () => {
+    const { rerender } = renderThread()
+    const optimistic: readonly ThreadComment[] = [
+      ...THREAD_FIXTURE,
+      {
+        id: 'c-mine',
+        author: { id: 'usr_me', name: 'Me' },
+        bodyMd: 'Sending this now.',
+        createdAt: FIXTURE_NOW,
+        state: 'pending',
+      },
+    ]
+    rerender(<Thread comments={optimistic} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    // In flight, and "Sending…" is already on screen — nothing to say yet.
+    expect(spoken()).toBe('')
+
+    const settled = optimistic.map((comment) =>
+      comment.id === 'c-mine' ? { ...comment, state: 'sent' as const } : comment,
+    )
+    rerender(<Thread comments={settled} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(spoken()).toBe('Comment posted')
+  })
+
+  it('announces what happened to the replies on collapse and on expand', () => {
+    renderThread()
+    fireEvent.click(
+      within(commentBox('c-many')).getByRole('button', {
+        name: 'Collapse replies to Priya Nair',
+      }),
+    )
+    // aria-expanded reports that a state changed. It does not report what
+    // happened to the eight comments that just left the page.
+    expect(spoken()).toBe('Collapsed 8 replies')
+
+    fireEvent.click(
+      within(commentBox('c-many')).getByRole('button', {
+        name: 'Show 8 replies to Priya Nair',
+      }),
+    )
+    expect(spoken()).toBe('Expanded 8 replies')
+  })
+
+  it('re-announces two CONSECUTIVE identical messages', () => {
+    // Two polls, one new comment each. Both messages read "1 new comment", and
+    // a live region speaks on CHANGE — so written naively the second one is
+    // silent and someone hears about the first reply and never the second.
+    const { rerender } = renderThread()
+    const poll = (n: number): readonly ThreadComment[] => [
+      ...THREAD_FIXTURE,
+      ...Array.from({ length: n }, (_unused, index) => ({
+        id: `c-polled-${String(index)}`,
+        author: { id: 'usr_new', name: 'Ada Cole' },
+        bodyMd: 'Came in on the poll.',
+        createdAt: FIXTURE_NOW - 1000,
+      })),
+    ]
+
+    rerender(<Thread comments={poll(1)} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(spoken()).toBe('1 new comment')
+    const first = liveRegion().textContent
+
+    rerender(<Thread comments={poll(2)} now={FIXTURE_NOW} locale="en-GB" defaultSort="new" />)
+    expect(spoken()).toBe('1 new comment')
+    // Same words to a listener, a different text node to the AT.
+    expect(liveRegion().textContent).not.toBe(first)
+  })
+})
+
+describe('Thread — MEDIUM 4: the comments are a real list', () => {
+  /** Every `<ul>` whose nearest comment frame is this one. */
+  function ownLists(frame: HTMLElement): HTMLElement[] {
+    return Array.from(frame.querySelectorAll<HTMLElement>('ul')).filter(
+      (list) => list.closest('[data-comment-id]') === frame,
+    )
+  }
+
+  it('puts every root in a <ul> as an <li>', () => {
+    renderThread()
+    const root = commentBox('c-reactions')
+    const item = root.closest('li')
+    expect(item).not.toBeNull()
+    expect(item?.parentElement?.tagName).toBe('UL')
+    expect(item?.parentElement?.getAttribute('role')).toBe('list')
+  })
+
+  it('makes every reply an <li> inside its parent comment’s own <ul>', () => {
+    renderThread()
+    const parent = commentBox('c-many')
+    const reply = commentBox('c-many-1')
+    expect(reply.tagName).toBe('LI')
+    const lists = ownLists(parent)
+    expect(lists.length).toBe(1)
+    expect(lists[0]?.contains(reply)).toBe(true)
+    // Depth is the structure: this list is INSIDE the parent's item, so a
+    // reader gets the nesting from the markup and not from an indent.
+    expect(parent.contains(lists[0] ?? null)).toBe(true)
+  })
+
+  it('reports an item count that matches the replies actually shown', () => {
+    renderThread()
+    const parent = commentBox('c-many')
+    const list = ownLists(parent)[0]
+    const items = Array.from(list?.children ?? []).filter((el) => el.tagName === 'LI')
+    expect(items.length).toBe(3)
+
+    // "Show N more" is a control, not a reply, so it stays out of the list.
+    const more = within(parent).getByRole('button', { name: 'Show 5 more replies' })
+    expect(list?.contains(more)).toBe(false)
+
+    fireEvent.click(more)
+    const after = ownLists(commentBox('c-many'))[0]
+    expect(Array.from(after?.children ?? []).filter((el) => el.tagName === 'LI').length).toBe(8)
+  })
+
+  it('restates role="list" on every list, because list-style:none drops it in Safari', () => {
+    renderThread()
+    const lists = Array.from(document.querySelectorAll('ul'))
+    expect(lists.length).toBeGreaterThan(0)
+    for (const list of lists) {
+      expect(list.getAttribute('role')).toBe('list')
+      // The UA list indent is what a bare <ul> would have changed; these
+      // classes are the only reason the geometry is untouched.
+      expect(list.className).toContain('list-none')
+      expect(list.className).toContain('m-0')
+      expect(list.className).toContain('p-0')
+    }
+  })
+
+  it('keeps every comment box on the same padding it had before the list markup', () => {
+    renderThread()
+    // The connector maths reads --thread-row-gap off this padding and assumes
+    // sibling boxes are flush; the <li> swap must not have moved it.
+    for (const frame of Array.from(document.querySelectorAll<HTMLElement>('[data-comment-id]'))) {
+      expect(frame.style.paddingBlockStart).toBe('var(--thread-row-gap)')
+      expect(frame.className).toBe('relative')
+    }
+    expect(commentBox('c-many-1').style.paddingInlineStart).toBe('var(--thread-indent)')
+    // A root has no indent of its own.
+    expect(commentBox('c-many').style.paddingInlineStart).toBe('')
+  })
+})