From 7295d9306fa0b080836d8f535f0f26cd8d34fcd0 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:56:14 +0800
Subject: [PATCH] fix(web): name image previewer actions (#40283)

---
 .../image-previewer/__tests__/index.spec.tsx  | 19 +++++++------------
 .../datasets/common/image-previewer/index.tsx |  6 ++++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
index ce76a269ad2..29fdb2a9cfa 100644
--- a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx
@@ -32,15 +32,11 @@ const images = [
 
 const successfulResponse = () => new Response(new Blob(['test'], { type: 'image/png' }))
 
-const getPreviewButtons = () => {
-  const [closeButton, previousButton, nextButton] = screen.getAllByRole('button')
-
-  expect(closeButton).toBeInTheDocument()
-  expect(previousButton).toBeInTheDocument()
-  expect(nextButton).toBeInTheDocument()
-
-  return { closeButton: closeButton!, previousButton: previousButton!, nextButton: nextButton! }
-}
+const getPreviewButtons = () => ({
+  closeButton: screen.getByRole('button', { name: 'common.operation.close' }),
+  previousButton: screen.getByRole('button', { name: 'common.pagination.previous' }),
+  nextButton: screen.getByRole('button', { name: 'common.pagination.next' }),
+})
 
 describe('ImagePreviewer', () => {
   beforeEach(() => {
@@ -137,10 +133,9 @@ describe('ImagePreviewer', () => {
     render(<ImagePreviewer images={images} onClose={vi.fn()} />)
 
     expect(await screen.findByText(/Failed to load image/)).toHaveTextContent(images[0]!.url)
-    const [, retryButton] = screen.getAllByRole('button')
-    expect(retryButton).toBeInTheDocument()
+    const retryButton = screen.getByRole('button', { name: 'common.operation.retry' })
 
-    await user.click(retryButton!)
+    await user.click(retryButton)
 
     expect(await screen.findByRole('img', { name: 'image1.png' })).toBeInTheDocument()
     expect(mockFetch).toHaveBeenCalledTimes(4)
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index a334a8a1fe5..597d8e65e08 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -4,6 +4,7 @@ import { Kbd } from '@langgenius/dify-ui/kbd'
 import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@remixicon/react'
 import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { formatFileSize } from '@/utils/format'
 
@@ -29,6 +30,7 @@ type ImagePreviewerProps = {
 }
 
 const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerProps) => {
+  const { t } = useTranslation()
   const [currentIndex, setCurrentIndex] = useState(initialIndex)
   const [cachedImages, setCachedImages] = useState<Record<string, CachedImage>>(() => {
     return images.reduce(
@@ -159,6 +161,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
         <div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
           <Button
             variant="tertiary"
+            aria-label={t(($) => $['operation.close'], { ns: 'common' })}
             onClick={onClose}
             className="size-9 rounded-[10px] p-0"
             size="large"
@@ -173,6 +176,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
             <span>{`Failed to load image: ${currentImage!.url}. Please try again.`}</span>
             <Button
               variant="secondary"
+              aria-label={t(($) => $['operation.retry'], { ns: 'common' })}
               onClick={() => retryImage(currentImage!)}
               className="size-9 rounded-full p-0"
               size="large"
@@ -199,6 +203,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
         )}
         <Button
           variant="secondary"
+          aria-label={t(($) => $['pagination.previous'], { ns: 'common' })}
           onClick={prevImage}
           className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
           disabled={currentIndex === 0}
@@ -208,6 +213,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro
         </Button>
         <Button
           variant="secondary"
+          aria-label={t(($) => $['pagination.next'], { ns: 'common' })}
           onClick={nextImage}
           className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
           disabled={currentIndex === images.length - 1}