@linktr.ee/messaging-react 4.4.7 → 4.4.8-rc-1788251276

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -6,6 +6,7 @@ import {
   renderWithProviders,
   screen,
   within,
+  userEvent,
 } from '../../test/utils'
 
 import { triggerDownload } from './_shared/triggerDownload'
@@ -38,7 +39,8 @@ const expectViewerOpen = (testId: string) => {
 }
 
 describe('MessageAttachment.Image', () => {
-  it('optimizes Linktree-hosted composer previews without changing the viewer source', () => {
+  it('optimizes Linktree-hosted composer previews without changing the viewer source', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Composer
         src="https://assets.linktr.ee/photo.jpg"
@@ -51,8 +53,9 @@ describe('MessageAttachment.Image', () => {
       'https://assets.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
     )
 
-    fireEvent.click(screen.getByLabelText('Open image'))
+    await user.click(screen.getByLabelText('Open image'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://assets.linktr.ee/photo.jpg'
     )
@@ -69,12 +72,14 @@ describe('MessageAttachment.Image', () => {
     const bubble = screen.getByTestId('image-attachment')
     expect(bubble).toBeInTheDocument()
     expect(screen.getByText('Here is the image')).toBeInTheDocument()
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(bubble.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/photo.jpg'
     )
   })
 
-  it('opens the ImageViewer lightbox when clicked', () => {
+  it('opens the ImageViewer lightbox when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
@@ -85,7 +90,7 @@ describe('MessageAttachment.Image', () => {
 
     expectViewerClosed('image-viewer')
 
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
 
     expectViewerOpen('image-viewer')
   })
@@ -121,7 +126,8 @@ describe('MessageAttachment.Image', () => {
     expect(screen.getByLabelText('Open image 3 of 3')).toBeInTheDocument()
   })
 
-  it('renders a download button inside the image viewer', () => {
+  it('renders a download button inside the image viewer', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
@@ -129,30 +135,33 @@ describe('MessageAttachment.Image', () => {
         filename="photo.jpg"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
     const viewer = expectViewerOpen('image-viewer')
     // The viewer chrome carries its own download action — separate
     // from any sibling download button on the bubble surface — so the
     // user can grab the image without leaving the lightbox.
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       viewer.querySelector('button[aria-label="Download photo.jpg"]')
     ).not.toBeNull()
   })
 
-  it('does not render carousel nav controls for a single image', () => {
+  it('does not render carousel nav controls for a single image', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
         filename="photo.jpg"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
     expectViewerOpen('image-viewer')
     expect(screen.queryByLabelText('Next image')).toBeNull()
     expect(screen.queryByLabelText('Previous image')).toBeNull()
   })
 
-  it('renders the stacked images as a carousel inside the viewer', () => {
+  it('renders the stacked images as a carousel inside the viewer', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Sent
         filename="album"
@@ -165,8 +174,9 @@ describe('MessageAttachment.Image', () => {
     )
 
     // Open the second tile — the viewer should land on image 2.
-    fireEvent.click(screen.getByLabelText('Open image 2 of 3'))
+    await user.click(screen.getByLabelText('Open image 2 of 3'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.jpg'
     )
@@ -174,26 +184,30 @@ describe('MessageAttachment.Image', () => {
     expect(viewer.textContent).toContain('2 / 3')
 
     // Next button advances by one.
-    fireEvent.click(screen.getByLabelText('Next image'))
+    await user.click(screen.getByLabelText('Next image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/c.jpg'
     )
     expect(viewer.textContent).toContain('3 / 3')
 
     // Next wraps from the last item back to the first.
-    fireEvent.click(screen.getByLabelText('Next image'))
+    await user.click(screen.getByLabelText('Next image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
 
     // Previous wraps from the first item to the last.
-    fireEvent.click(screen.getByLabelText('Previous image'))
+    await user.click(screen.getByLabelText('Previous image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/c.jpg'
     )
   })
 
-  it('uses ArrowRight / ArrowLeft to navigate stacked images', () => {
+  it('uses ArrowRight / ArrowLeft to navigate stacked images', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Sent
         items={[
@@ -202,18 +216,21 @@ describe('MessageAttachment.Image', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 2'))
+    await user.click(screen.getByLabelText('Open image 1 of 2'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
 
     fireEvent.keyDown(window, { key: 'ArrowRight' })
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.jpg'
     )
 
     fireEvent.keyDown(window, { key: 'ArrowLeft' })
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
@@ -242,6 +259,7 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
   const WIDTH_CAP_WEB_PX = 326
 
   const mediaBox = (label: string) =>
+    // eslint-disable-next-line testing-library/no-node-access -- the wrapper class is a deliberate DOM contract with no semantic query.
     screen.getByLabelText(label).parentElement as HTMLElement
 
   /** The `min(var(--…), Npx)` term the height cap contributes. */
@@ -319,6 +337,7 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
 
     // Scoped to the tile: the always-mounted `ImageViewer` renders a
     // second `<img>` for the same source.
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     const img = mediaBox('Open image 1 of 1').querySelector(
       'img'
     ) as HTMLImageElement
@@ -405,7 +424,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByText('PDF · 379.5 KB')).toBeInTheDocument()
   })
 
-  it('opens the PdfViewer when clicked', () => {
+  it('opens the PdfViewer when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Sent
         src="https://cdn.example.com/doc.pdf"
@@ -413,11 +433,12 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expectViewerOpen('pdf-viewer')
   })
 
-  it('forwards the onClick handler before opening the viewer', () => {
+  it('forwards the onClick handler before opening the viewer', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
@@ -426,7 +447,7 @@ describe('MessageAttachment.Pdf', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
@@ -457,7 +478,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Open c.pdf')).toBeInTheDocument()
   })
 
-  it('opens the viewer on the activated row in a stacked PDF bubble', () => {
+  it('opens the viewer on the activated row in a stacked PDF bubble', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         items={[
@@ -467,7 +489,7 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Open b.pdf'))
+    await user.click(screen.getByLabelText('Open b.pdf'))
     const viewer = expectViewerOpen('pdf-viewer')
     // The active filename surfaces as the dialog's accessible name —
     // the lightbox chrome is intentionally just close + carousel chrome
@@ -479,7 +501,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(viewer.textContent).toContain('2 / 2')
   })
 
-  it('navigates between stacked PDFs via the carousel controls', () => {
+  it('navigates between stacked PDFs via the carousel controls', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         items={[
@@ -489,18 +512,18 @@ describe('MessageAttachment.Pdf', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open a.pdf'))
+    await user.click(screen.getByLabelText('Open a.pdf'))
     const viewer = expectViewerOpen('pdf-viewer')
     expect(viewer.getAttribute('aria-label')).toBe('a.pdf')
 
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('b.pdf')
 
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('c.pdf')
 
     // Wraps back to the start.
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('a.pdf')
   })
 
@@ -537,7 +560,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Download c.pdf')).toBeInTheDocument()
   })
 
-  it('does not open the viewer when the Download button is clicked', () => {
+  it('does not open the viewer when the Download button is clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Sent
         src="https://cdn.example.com/notes.pdf"
@@ -545,7 +569,7 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Download notes.pdf'))
+    await user.click(screen.getByLabelText('Download notes.pdf'))
     // Download should fire on its own without bubbling up to the row
     // activation that opens the viewer.
     expectViewerClosed('pdf-viewer')
@@ -563,7 +587,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Dismiss attachment')).toBeInTheDocument()
   })
 
-  it('does not crash when items shrinks after the viewer opens (P1 regression)', () => {
+  it('does not crash when items shrinks after the viewer opens (P1 regression)', async () => {
+    const user = userEvent.setup()
     // Regression test for the PR #151 P1 reviewer finding:
     // `viewerIndex` was dereferenced directly against `resolvedItems`,
     // so a re-render with fewer items than the open index would crash
@@ -578,7 +603,7 @@ describe('MessageAttachment.Pdf', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open c.pdf'))
+    await user.click(screen.getByLabelText('Open c.pdf'))
     expectViewerOpen('pdf-viewer')
 
     expect(() =>
@@ -599,7 +624,8 @@ describe('MessageAttachment.Pdf', () => {
     )
   })
 
-  it('does not open the viewer when onClick returns false', () => {
+  it('does not open the viewer when onClick returns false', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn(() => false as const)
     renderWithProviders(
       <MessageAttachment.Pdf.Received
@@ -608,7 +634,7 @@ describe('MessageAttachment.Pdf', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expect(onClick).toHaveBeenCalledTimes(1)
     expectViewerClosed('pdf-viewer')
   })
@@ -669,7 +695,8 @@ describe('MessageAttachment.File', () => {
     expect(screen.getByLabelText('Download c.pdf')).toBeInTheDocument()
   })
 
-  it('downloads the file when the row is clicked and onClick allows it', () => {
+  it('downloads the file when the row is clicked and onClick allows it', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <MessageAttachment.File.Received
@@ -678,7 +705,7 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(onClick).toHaveBeenCalledWith(0)
     expect(mockTriggerDownload).toHaveBeenCalledTimes(1)
     expect(mockTriggerDownload).toHaveBeenCalledWith(
@@ -687,7 +714,8 @@ describe('MessageAttachment.File', () => {
     )
   })
 
-  it('lets onClick cancel the automatic download by returning false (P2 regression)', () => {
+  it('lets onClick cancel the automatic download by returning false (P2 regression)', async () => {
+    const user = userEvent.setup()
     // Regression test for the PR #151 P2 reviewer finding:
     // the docs advertised `onClick` as a hook for intercepting the
     // download (e.g. confirmation modal), but the handler used to fire
@@ -701,12 +729,13 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(onClick).toHaveBeenCalledTimes(1)
     expect(mockTriggerDownload).not.toHaveBeenCalled()
   })
 
-  it('still downloads when onClick returns void', () => {
+  it('still downloads when onClick returns void', async () => {
+    const user = userEvent.setup()
     // Belt-and-braces: void / undefined returns must not be confused
     // with `false` (the only cancellation sentinel).
     const onClick = vi.fn(() => undefined)
@@ -717,7 +746,7 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(mockTriggerDownload).toHaveBeenCalledTimes(1)
   })
 })
@@ -732,6 +761,7 @@ describe('MessageAttachment.Audio', () => {
       />
     )
     const bubble = screen.getByTestId('audio-attachment')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(bubble.querySelector('audio')).not.toBeNull()
     // No filename title — the native `<audio>` element doesn't expose
     // a title slot, so we render just the player.
@@ -741,7 +771,8 @@ describe('MessageAttachment.Audio', () => {
     expect(screen.queryByRole('button', { name: /download/i })).toBeNull()
   })
 
-  it('shows an inline dismiss button next to the player on Composer state', () => {
+  it('shows an inline dismiss button next to the player on Composer state', async () => {
+    const user = userEvent.setup()
     const onDismiss = vi.fn()
     renderWithProviders(
       <MessageAttachment.Audio.Composer
@@ -751,7 +782,7 @@ describe('MessageAttachment.Audio', () => {
     )
     const dismiss = screen.getByLabelText('Dismiss attachment')
     expect(dismiss).toBeInTheDocument()
-    fireEvent.click(dismiss)
+    await user.click(dismiss)
     expect(onDismiss).toHaveBeenCalledTimes(1)
   })
 
@@ -766,12 +797,14 @@ describe('MessageAttachment.Audio', () => {
       />
     )
     const bubble = screen.getByTestId('audio-attachment')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(bubble.querySelectorAll('audio')).toHaveLength(3)
   })
 })
 
 describe('MessageAttachment.Video', () => {
-  it('opens the VideoViewer when clicked', () => {
+  it('opens the VideoViewer when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Video.Received
         src="https://cdn.example.com/clip.mp4"
@@ -781,13 +814,14 @@ describe('MessageAttachment.Video', () => {
       />
     )
     expectViewerClosed('video-viewer')
-    fireEvent.click(screen.getByLabelText('Play video 1 of 1'))
+    await user.click(screen.getByLabelText('Play video 1 of 1'))
     expectViewerOpen('video-viewer')
     // Single-item viewer has no carousel chrome.
     expect(screen.queryByLabelText('Next video')).toBeNull()
   })
 
-  it('navigates between stacked videos via the carousel controls', () => {
+  it('navigates between stacked videos via the carousel controls', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Video.Sent
         filename="clip"
@@ -805,13 +839,15 @@ describe('MessageAttachment.Video', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Play video 1 of 2'))
+    await user.click(screen.getByLabelText('Play video 1 of 2'))
     const viewer = expectViewerOpen('video-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.mp4'
     )
 
-    fireEvent.click(screen.getByLabelText('Next video'))
+    await user.click(screen.getByLabelText('Next video'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.mp4'
     )
@@ -841,11 +877,13 @@ describe('MessageAttachment.Video overflow', () => {
     expect(screen.queryByLabelText('Play video 5 of 9')).toBeNull()
   })
 
-  it('opens the viewer on the fourth video from the overflow tile and pages to the ninth', () => {
+  it('opens the viewer on the fourth video from the overflow tile and pages to the ninth', async () => {
+    const user = userEvent.setup()
     renderWithProviders(<MessageAttachment.Video.Sent items={NINE_VIDEOS} />)
 
-    fireEvent.click(screen.getByLabelText('Play video 4 of 9'))
+    await user.click(screen.getByLabelText('Play video 4 of 9'))
     const viewer = expectViewerOpen('video-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/3.mp4'
     )
@@ -854,8 +892,9 @@ describe('MessageAttachment.Video overflow', () => {
 
     // The carousel spans all nine, not just the four the grid drew.
     for (let i = 0; i < 5; i += 1) {
-      fireEvent.click(screen.getByLabelText('Next video'))
+      await user.click(screen.getByLabelText('Next video'))
     }
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/8.mp4'
     )
@@ -867,7 +906,9 @@ describe('MessageAttachment.Video overflow', () => {
 
     const tiles = screen.getAllByRole('button', { name: /^Play video/ })
     // The badge is the only `svg` a poster tile renders.
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(tiles[0].querySelector('svg')).not.toBeNull()
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(tiles[3].querySelector('svg')).toBeNull()
   })
 })
@@ -878,6 +919,7 @@ describe('MessageAttachment.Video single-card aspect', () => {
   // jsdom never decodes an `<img>`, so `naturalWidth` stays 0 and `load`
   // never fires on its own — stub the intrinsic size and fire it.
   const loadPosterAt = (naturalWidth: number, naturalHeight: number) => {
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     const poster = screen.getByTestId('video-attachment').querySelector('img')
     if (!poster) throw new Error('no poster rendered')
     Object.defineProperty(poster, 'naturalWidth', {
@@ -892,6 +934,7 @@ describe('MessageAttachment.Video single-card aspect', () => {
   }
 
   const mediaAspect = () =>
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     screen.getByTestId('video-attachment').querySelector<HTMLElement>('[style]')
       ?.style.aspectRatio
 
@@ -1054,23 +1097,25 @@ describe('MessageAttachment.Video single-card aspect', () => {
 })
 
 describe('ViewerShell focus management', () => {
-  it('moves focus into the dialog when a viewer opens', () => {
+  it('moves focus into the dialog when a viewer opens', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         src="https://cdn.example.com/doc.pdf"
         filename="doc.pdf"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
 
     // The close button is the primary focus target in the viewer
     // toolbar — keyboard users should land on it on open so Escape
     // / Tab work without an extra click.
     const close = screen.getByLabelText('Close viewer')
-    expect(document.activeElement).toBe(close)
+    expect(close).toHaveFocus()
   })
 
-  it('restores focus to the opener when the viewer closes', () => {
+  it('restores focus to the opener when the viewer closes', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         src="https://cdn.example.com/doc.pdf"
@@ -1079,18 +1124,18 @@ describe('ViewerShell focus management', () => {
     )
     const opener = screen.getByLabelText('Open doc.pdf')
     opener.focus()
-    expect(document.activeElement).toBe(opener)
+    expect(opener).toHaveFocus()
 
-    fireEvent.click(opener)
+    await user.click(opener)
     expectViewerOpen('pdf-viewer')
 
-    fireEvent.click(screen.getByLabelText('Close viewer'))
+    await user.click(screen.getByLabelText('Close viewer'))
 
     // After close, focus should hop back to whatever was focused
     // before the viewer mounted (the row's Open button), and the
     // dialog should no longer carry the `[open]` attribute.
     expectViewerClosed('pdf-viewer')
-    expect(document.activeElement).toBe(opener)
+    expect(opener).toHaveFocus()
   })
 })
 
@@ -1103,6 +1148,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           alt="Photo"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const img = screen.getByTestId('image-attachment').querySelector('img')
       expect(img?.getAttribute('loading')).toBe('lazy')
       expect(img?.getAttribute('decoding')).toBe('async')
@@ -1116,6 +1162,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           loading="eager"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const img = screen.getByTestId('image-attachment').querySelector('img')
       expect(img?.getAttribute('loading')).toBe('eager')
       expect(img?.getAttribute('decoding')).toBe('async')
@@ -1135,13 +1182,15 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const [first, second] = Array.from(
+        // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
         screen.getByTestId('image-attachment').querySelectorAll('img')
       )
       expect(first?.getAttribute('loading')).toBe('eager')
       expect(second?.getAttribute('loading')).toBe('lazy')
     })
 
-    it('does not mount the viewer `<img>` while the lightbox is closed', () => {
+    it('does not mount the viewer `<img>` while the lightbox is closed', async () => {
+      const user = userEvent.setup()
       renderWithProviders(
         <MessageAttachment.Image.Sent
           src="https://cdn.example.com/photo.jpg"
@@ -1159,7 +1208,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
         })
       ).toHaveLength(0)
 
-      fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+      await user.click(screen.getByLabelText('Open image 1 of 1'))
       expect(
         within(screen.getByTestId('image-viewer')).getByRole('img', {
           hidden: true,
@@ -1177,6 +1226,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           mimeType="video/mp4"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const poster = screen.getByTestId('video-attachment').querySelector('img')
       expect(poster?.getAttribute('src')).toBe(
         'https://cdn.example.com/poster.jpg'
@@ -1185,7 +1235,8 @@ describe('MessageAttachment lazy-loading defaults', () => {
       expect(poster?.getAttribute('decoding')).toBe('async')
     })
 
-    it('opens the viewer with `<video preload="metadata">` for the active item', () => {
+    it('opens the viewer with `<video preload="metadata">` for the active item', async () => {
+      const user = userEvent.setup()
       renderWithProviders(
         <MessageAttachment.Video.Sent
           src="https://cdn.example.com/clip.mp4"
@@ -1194,7 +1245,8 @@ describe('MessageAttachment lazy-loading defaults', () => {
           filename="clip.mp4"
         />
       )
-      fireEvent.click(screen.getByLabelText('Play video 1 of 1'))
+      await user.click(screen.getByLabelText('Play video 1 of 1'))
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const video = screen.getByTestId('video-viewer').querySelector('video')
       expect(video?.getAttribute('preload')).toBe('metadata')
     })
@@ -1213,7 +1265,9 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const bubble = screen.getByTestId('video-attachment')
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       expect(bubble.querySelectorAll('video')).toHaveLength(0)
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       expect(bubble.querySelectorAll('img')).toHaveLength(4)
     })
   })
@@ -1228,6 +1282,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
       )
       const audio = screen
         .getByTestId('audio-attachment')
+        // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
         .querySelector('audio')
       expect(audio?.getAttribute('preload')).toBe('metadata')
     })
@@ -1243,6 +1298,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const audios = Array.from(
+        // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
         screen.getByTestId('audio-attachment').querySelectorAll('audio')
       )
       expect(audios).toHaveLength(3)
@@ -1265,6 +1321,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const audios = Array.from(
+        // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
         screen.getByTestId('audio-attachment').querySelectorAll('audio')
       )
       expect(audios[0]?.getAttribute('preload')).toBe('none')

package/src/components/MessageAttachment/_shared/Bubble.test.tsx

@@ -18,7 +18,9 @@ describe('Bubble', () => {
       </Bubble>
     )
     const bubble = screen.getByTestId('bubble')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     if (present) expect(bubble.querySelector('p')).not.toBeNull()
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     else expect(bubble.querySelector('p')).toBeNull()
     expect(bubble).toHaveClass(present ? 'pb-0' : 'py-2')
   })