refactor(web): rely on preview dialog containment (#40363)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-09-19 10:11:30 +08:00 · 2026-08-10 02:56:20 +00:00
parent c35242731f
commit ed36ee5133
9 changed files with 27 additions and 37 deletions
@@ -1040,14 +1040,8 @@
    }
  },
  "web/app/components/base/file-uploader/audio-preview.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
    "jsx_a11y/media-has-caption": {
      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
    }
  },
  "web/app/components/base/file-uploader/dynamic-pdf-preview.tsx": {
@@ -1099,14 +1093,6 @@
      "count": 2
    }
  },
-  "web/app/components/base/file-uploader/pdf-preview.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
  "web/app/components/base/file-uploader/store.tsx": {
    "react/only-export-components": {
      "count": 4
@@ -1126,14 +1112,8 @@
    }
  },
  "web/app/components/base/file-uploader/video-preview.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
    "jsx_a11y/media-has-caption": {
      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
    }
  },
  "web/app/components/base/form/components/base/base-field.tsx": {
@@ -1480,9 +1460,6 @@
    }
  },
  "web/app/components/base/image-uploader/image-preview.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
    "jsx_a11y/no-static-element-interactions": {
      "count": 1
    },
@@ -46,14 +46,15 @@ describe('AudioPreview', () => {
    expect(onCancel).toHaveBeenCalled()
  })

-  it('should not close when backdrop is clicked', () => {
+  it('should not close when audio content is clicked', () => {
    const onCancel = vi.fn()
    render(
      <AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={onCancel} />,
    )

-    const dialog = screen.getByRole('dialog')
-    fireEvent.click(dialog)
+    const audio = document.querySelector('audio')
+    expect(audio).toBeInTheDocument()
+    fireEvent.click(audio!)

    expect(onCancel).not.toHaveBeenCalled()
  })
@@ -137,12 +137,10 @@ describe('PdfPreview', () => {
    expect(mockOnCancel).toHaveBeenCalled()
  })

-  it('should render the overlay and keep backdrop clicks from closing', () => {
+  it('should keep preview content clicks from closing', () => {
    render(<PdfPreview url="https://example.com/doc.pdf" onCancel={mockOnCancel} />)

-    const overlay = screen.getByRole('dialog')
-    expect(overlay).toBeInTheDocument()
-    fireEvent.click(overlay)
+    fireEvent.click(getScaleContainer())
    expect(mockOnCancel).not.toHaveBeenCalled()
  })
 })
@@ -46,14 +46,15 @@ describe('VideoPreview', () => {
    expect(onCancel).toHaveBeenCalled()
  })

-  it('should not close when backdrop is clicked', () => {
+  it('should not close when video content is clicked', () => {
    const onCancel = vi.fn()
    render(
      <VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />,
    )

-    const dialog = screen.getByRole('dialog')
-    fireEvent.click(dialog)
+    const video = document.querySelector('video')
+    expect(video).toBeInTheDocument()
+    fireEvent.click(video!)

    expect(onCancel).not.toHaveBeenCalled()
  })
@@ -22,7 +22,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({ url, title, onCancel }) => {
        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
        backdropClassName="bg-transparent!"
      >
-        <div tabIndex={-1} onClick={(e) => e.stopPropagation()}>
+        <div tabIndex={-1}>
          <audio controls title={title} autoPlay={false} preload="metadata">
            <source type="audio/mpeg" src={url} className="max-h-full max-w-full" />
          </audio>
@@ -58,7 +58,6 @@ const PdfPreview: FC<PdfPreviewProps> = ({ url, onCancel }) => {
      >
        <div
          tabIndex={-1}
-          onClick={(e) => e.stopPropagation()}
          className="h-[95vh] max-h-full w-screen max-w-full overflow-hidden"
          style={{
            transform: `scale(${scale})`,
@@ -22,7 +22,7 @@ const VideoPreview: FC<VideoPreviewProps> = ({ url, title, onCancel }) => {
        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
        backdropClassName="bg-transparent!"
      >
-        <div tabIndex={-1} onClick={(e) => e.stopPropagation()}>
+        <div tabIndex={-1}>
          <video controls title={title} autoPlay={false} preload="metadata">
            <source type="video/mp4" src={url} className="max-h-full max-w-full" />
          </video>
@@ -161,6 +161,21 @@ describe('ImagePreview', () => {
  })

  describe('User Interactions', () => {
+    it('should not close when image content is clicked', () => {
+      const onCancel = vi.fn()
+      render(
+        <ImagePreview
+          url="https://example.com/image.png"
+          title="Preview Image"
+          onCancel={onCancel}
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('img', { name: 'Preview Image' }))
+
+      expect(onCancel).not.toHaveBeenCalled()
+    })
+
    it('should call onCancel when close button is clicked', async () => {
      const user = userEvent.setup()
      const onCancel = vi.fn()
@@ -188,7 +188,6 @@ const ImagePreview: FC<ImagePreviewProps> = ({ url, title, onCancel, onPrev, onN
          data-testid="image-preview-container"
          tabIndex={-1}
          className="flex size-full items-center justify-center"
-          onClick={(e) => e.stopPropagation()}
          onWheel={handleWheel}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}