diff --git a/.agents/skills/frontend-testing/SKILL.md b/.agents/skills/frontend-testing/SKILL.md
index 86675dfeba..21c46d75bc 100644
--- a/.agents/skills/frontend-testing/SKILL.md
+++ b/.agents/skills/frontend-testing/SKILL.md
@@ -38,13 +38,13 @@ Run these commands from `web/`. From the repository root, prefix them with `pnpm
 pnpm test
 
 # Watch mode
-pnpm test:watch
+pnpm test --watch
 
 # Run specific file
 pnpm test path/to/file.spec.tsx
 
 # Generate coverage report
-pnpm test:coverage
+pnpm test --coverage
 
 # Analyze component complexity
 pnpm analyze-component <path>
@@ -220,7 +220,10 @@ Every test should clearly separate:
 ### 2. Black-Box Testing
 
 - Test observable behavior, not implementation details
-- Use semantic queries (getByRole, getByLabelText)
+- Use semantic queries (`getByRole` with accessible `name`, `getByLabelText`, `getByPlaceholderText`, `getByText`, and scoped `within(...)`)
+- Treat `getByTestId` as a last resort. If a control cannot be found by role/name, label, landmark, or dialog scope, fix the component accessibility first instead of adding or relying on `data-testid`.
+- Remove production `data-testid` attributes when semantic selectors can cover the behavior. Keep them only for non-visual mocked boundaries, editor/browser shims such as Monaco, canvas/chart output, or third-party widgets with no accessible DOM in the test environment.
+- Do not assert decorative icons by test id. Assert the named control that contains them, or mark decorative icons `aria-hidden`.
 - Avoid testing internal state directly
 - **Prefer pattern matching over hardcoded strings** in assertions:
 
diff --git a/e2e/features/step-definitions/apps/share-app.steps.ts b/e2e/features/step-definitions/apps/share-app.steps.ts
index d5742bdaa8..3ec038b065 100644
--- a/e2e/features/step-definitions/apps/share-app.steps.ts
+++ b/e2e/features/step-definitions/apps/share-app.steps.ts
@@ -40,7 +40,7 @@ Then('the shared app page should be accessible', async function (this: DifyWorld
 
 When('I run the shared workflow app', async function (this: DifyWorld) {
   const page = this.getPage()
-  const runButton = page.getByTestId('run-button')
+  const runButton = page.getByRole('button', { name: 'Execute' })
 
   await expect(runButton).toBeEnabled({ timeout: 15_000 })
   await runButton.click()
diff --git a/web/__tests__/base/notion-page-selector-flow.test.tsx b/web/__tests__/base/notion-page-selector-flow.test.tsx
index 6295d2dc00..ef813ee4bc 100644
--- a/web/__tests__/base/notion-page-selector-flow.test.tsx
+++ b/web/__tests__/base/notion-page-selector-flow.test.tsx
@@ -111,7 +111,7 @@ describe('Base Notion Page Selector Flow', () => {
     await user.type(screen.getByTestId('notion-search-input'), 'missing-page')
     expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
 
-    await user.click(screen.getByTestId('notion-search-input-clear'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
     expect(screen.getByTestId('notion-page-name-root-1')).toBeInTheDocument()
 
     await user.click(screen.getByTestId('notion-page-preview-root-1'))
@@ -134,7 +134,7 @@ describe('Base Notion Page Selector Flow', () => {
 
     expect(onSelectCredential).toHaveBeenCalledWith('c1')
 
-    await user.click(screen.getByTestId('notion-credential-selector-btn'))
+    await user.click(screen.getByRole('combobox', { name: /Workspace 1/ }))
     await user.click(screen.getByTestId('notion-credential-item-c2'))
 
     expect(mockInvalidPreImportNotionPages).toHaveBeenCalledWith({ datasetId: 'dataset-1', credentialId: 'c2' })
diff --git a/web/__tests__/share/text-generation-run-once-flow.test.tsx b/web/__tests__/share/text-generation-run-once-flow.test.tsx
index 2a5d1b882c..1471effa2d 100644
--- a/web/__tests__/share/text-generation-run-once-flow.test.tsx
+++ b/web/__tests__/share/text-generation-run-once-flow.test.tsx
@@ -119,7 +119,7 @@ describe('RunOnce – integration flow', () => {
     fireEvent.change(screen.getByPlaceholderText('Bio'), { target: { value: 'Hello' } })
 
     // Phase 3 – submit
-    fireEvent.click(screen.getByTestId('run-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'share.generation.run' }))
     expect(onSend).toHaveBeenCalledTimes(1)
 
     // Phase 4 – simulate "running" state
@@ -132,7 +132,7 @@ describe('RunOnce – integration flow', () => {
       />,
     )
 
-    const stopBtn = screen.getByTestId('stop-button')
+    const stopBtn = screen.getByRole('button', { name: 'share.generation.stopRun:{"defaultValue":"Stop Run"}' })
     expect(stopBtn).toBeInTheDocument()
     fireEvent.click(stopBtn)
     expect(onStop).toHaveBeenCalledTimes(1)
@@ -145,7 +145,7 @@ describe('RunOnce – integration flow', () => {
         runControl={{ onStop, isStopping: true }}
       />,
     )
-    expect(screen.getByTestId('stop-button')).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'share.generation.stopRun:{"defaultValue":"Stop Run"}' })).toBeDisabled()
   })
 
   it('clear resets all field types and allows re-submit', async () => {
@@ -174,7 +174,7 @@ describe('RunOnce – integration flow', () => {
 
     // Re-fill and submit
     fireEvent.change(screen.getByPlaceholderText('Question'), { target: { value: 'New' } })
-    fireEvent.click(screen.getByTestId('run-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'share.generation.run' }))
     expect(onSend).toHaveBeenCalledTimes(1)
   })
 
@@ -212,7 +212,7 @@ describe('RunOnce – integration flow', () => {
     fireEvent.change(screen.getByPlaceholderText('Text'), { target: { value: 'hello' } })
     fireEvent.change(screen.getByTestId('code-editor'), { target: { value: '{"a":1}' } })
 
-    fireEvent.click(screen.getByTestId('run-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'share.generation.run' }))
     expect(onSend).toHaveBeenCalledTimes(1)
   })
 })
diff --git a/web/app/(commonLayout)/datasets/layout.spec.tsx b/web/app/(commonLayout)/datasets/layout.spec.tsx
index 9c01cffba8..7abc2253ce 100644
--- a/web/app/(commonLayout)/datasets/layout.spec.tsx
+++ b/web/app/(commonLayout)/datasets/layout.spec.tsx
@@ -63,12 +63,12 @@ describe('DatasetsLayout', () => {
 
     render((
       <DatasetsLayout>
-        <div data-testid="datasets-content">datasets</div>
+        <div>datasets</div>
       </DatasetsLayout>
     ))
 
     expect(screen.getByRole('status')).toBeInTheDocument()
-    expect(screen.queryByTestId('datasets-content')).not.toBeInTheDocument()
+    expect(screen.queryByText('datasets')).not.toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
 
@@ -80,11 +80,11 @@ describe('DatasetsLayout', () => {
 
     render((
       <DatasetsLayout>
-        <div data-testid="datasets-content">datasets</div>
+        <div>datasets</div>
       </DatasetsLayout>
     ))
 
-    expect(screen.queryByTestId('datasets-content')).not.toBeInTheDocument()
+    expect(screen.queryByText('datasets')).not.toBeInTheDocument()
     await waitFor(() => {
       expect(mockReplace).toHaveBeenCalledWith('/apps')
     })
@@ -98,11 +98,11 @@ describe('DatasetsLayout', () => {
 
     render((
       <DatasetsLayout>
-        <div data-testid="datasets-content">datasets</div>
+        <div>datasets</div>
       </DatasetsLayout>
     ))
 
-    expect(screen.getByTestId('datasets-content')).toBeInTheDocument()
+    expect(screen.getByText('datasets')).toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
 })
diff --git a/web/app/(commonLayout)/role-route-guard.spec.tsx b/web/app/(commonLayout)/role-route-guard.spec.tsx
index ca1550f0b8..ef409393b0 100644
--- a/web/app/(commonLayout)/role-route-guard.spec.tsx
+++ b/web/app/(commonLayout)/role-route-guard.spec.tsx
@@ -48,12 +48,12 @@ describe('RoleRouteGuard', () => {
 
     render((
       <RoleRouteGuard>
-        <div data-testid="guarded-content">content</div>
+        <div>content</div>
       </RoleRouteGuard>
     ))
 
     expect(screen.getByRole('status')).toBeInTheDocument()
-    expect(screen.queryByTestId('guarded-content')).not.toBeInTheDocument()
+    expect(screen.queryByText('content')).not.toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
 
@@ -64,11 +64,11 @@ describe('RoleRouteGuard', () => {
 
     render((
       <RoleRouteGuard>
-        <div data-testid="guarded-content">content</div>
+        <div>content</div>
       </RoleRouteGuard>
     ))
 
-    expect(screen.queryByTestId('guarded-content')).not.toBeInTheDocument()
+    expect(screen.queryByText('content')).not.toBeInTheDocument()
     await waitFor(() => {
       expect(mockReplace).toHaveBeenCalledWith('/datasets')
     })
@@ -82,11 +82,11 @@ describe('RoleRouteGuard', () => {
 
     render((
       <RoleRouteGuard>
-        <div data-testid="guarded-content">content</div>
+        <div>content</div>
       </RoleRouteGuard>
     ))
 
-    expect(screen.getByTestId('guarded-content')).toBeInTheDocument()
+    expect(screen.getByText('content')).toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
 
@@ -98,11 +98,11 @@ describe('RoleRouteGuard', () => {
 
     render((
       <RoleRouteGuard>
-        <div data-testid="guarded-content">content</div>
+        <div>content</div>
       </RoleRouteGuard>
     ))
 
-    expect(screen.getByTestId('guarded-content')).toBeInTheDocument()
+    expect(screen.getByText('content')).toBeInTheDocument()
     expect(screen.queryByRole('status')).not.toBeInTheDocument()
     expect(mockReplace).not.toHaveBeenCalled()
   })
diff --git a/web/app/components/app/annotation/__tests__/filter.spec.tsx b/web/app/components/app/annotation/__tests__/filter.spec.tsx
index 8b69494e3f..5353a32c4b 100644
--- a/web/app/components/app/annotation/__tests__/filter.spec.tsx
+++ b/web/app/components/app/annotation/__tests__/filter.spec.tsx
@@ -243,10 +243,7 @@ describe('Filter', () => {
       )
 
       // Act
-      const input = screen.getByPlaceholderText('common.operation.search')
-      const clearButton = input.parentElement?.querySelector('div.cursor-pointer')
-      if (clearButton)
-        fireEvent.click(clearButton)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
 
       // Assert
       expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 938dcb03bd..961f313746 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -55,15 +55,23 @@ const BatchAction: FC<IBatchActionProps> = ({
           <span className="text-[13px] leading-[16px] font-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
         </div>
         <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
-        <div className="flex cursor-pointer items-center gap-x-0.5 px-3 py-2" onClick={showDeleteConfirm}>
-          <RiDeleteBinLine className="h-4 w-4 text-components-button-destructive-ghost-text" />
-          <button type="button" className="px-0.5 text-[13px] leading-[16px] font-medium text-components-button-destructive-ghost-text">
+        <button
+          type="button"
+          className="flex cursor-pointer items-center gap-x-0.5 border-none bg-transparent px-3 py-2 text-left text-components-button-destructive-ghost-text focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+          onClick={showDeleteConfirm}
+        >
+          <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+          <span className="px-0.5 text-[13px] leading-[16px] font-medium">
             {t('operation.delete', { ns: 'common' })}
-          </button>
-        </div>
+          </span>
+        </button>
 
         <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
-        <button type="button" className="px-3.5 py-2 text-[13px] leading-[16px] font-medium text-components-button-ghost-text" onClick={onCancel}>
+        <button
+          type="button"
+          className="border-none bg-transparent px-3.5 py-2 text-left text-[13px] leading-[16px] font-medium text-components-button-ghost-text focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={onCancel}
+        >
           {t('operation.cancel', { ns: 'common' })}
         </button>
       </div>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
index 5fc1cd25e1..8e6dd6cc28 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx
@@ -54,7 +54,7 @@ describe('CSVUploader', () => {
     const clickSpy = vi.spyOn(HTMLInputElement.prototype, 'click')
     renderComponent()
 
-    fireEvent.click(screen.getByText('appAnnotation.batchModal.browse'))
+    fireEvent.click(screen.getByRole('button', { name: 'appAnnotation.batchModal.browse' }))
 
     expect(clickSpy).toHaveBeenCalledTimes(1)
     clickSpy.mockRestore()
@@ -137,7 +137,7 @@ describe('CSVUploader', () => {
     clickSpy.mockRestore()
 
     const valueSetter = vi.spyOn(fileInput, 'value', 'set')
-    const removeTrigger = screen.getByTestId('remove-file-button')
+    const removeTrigger = screen.getByRole('button', { name: /operation\.delete$/ })
     fireEvent.click(removeTrigger)
 
     expect(updateFile).toHaveBeenCalledWith()
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
index c5d7232e12..74b59ff79f 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx
@@ -115,6 +115,14 @@ describe('BatchModal', () => {
     expect(props.onCancel).toHaveBeenCalledTimes(1)
   })
 
+  it('should call onCancel when close button is clicked', () => {
+    const { props } = renderComponent()
+
+    fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
+
+    expect(props.onCancel).toHaveBeenCalledTimes(1)
+  })
+
   it('should submit the csv file, poll status, and notify when import completes', async () => {
     vi.useFakeTimers({ shouldAdvanceTime: true })
     const { props } = renderComponent()
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index dc63b5c9be..75c3e8a66c 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -97,7 +97,13 @@ const CSVUploader: FC<Props> = ({
               <CSVIcon className="shrink-0" />
               <div className="text-text-tertiary">
                 {t('batchModal.csvUploadTitle', { ns: 'appAnnotation' })}
-                <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('batchModal.browse', { ns: 'appAnnotation' })}</span>
+                <button
+                  type="button"
+                  className="inline cursor-pointer border-none bg-transparent p-0 text-left text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={selectHandle}
+                >
+                  {t('batchModal.browse', { ns: 'appAnnotation' })}
+                </button>
               </div>
             </div>
             {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
@@ -113,9 +119,14 @@ const CSVUploader: FC<Props> = ({
             <div className="hidden items-center group-hover:flex">
               <Button variant="secondary" onClick={selectHandle}>{t('stepOne.uploader.change', { ns: 'datasetCreation' })}</Button>
               <div className="mx-2 h-4 w-px bg-divider-regular" />
-              <div className="cursor-pointer p-2" onClick={removeFile} data-testid="remove-file-button">
-                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
-              </div>
+              <button
+                type="button"
+                className="cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                aria-label={t('operation.delete', { ns: 'common' })}
+                onClick={removeFile}
+              >
+                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              </button>
             </div>
           </div>
         )}
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 0f6c27fd5a..7f1905c025 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -91,9 +91,14 @@ const BatchModal: FC<IBatchModalProps> = ({
       <DialogContent className="w-full max-w-[520px]! overflow-hidden! rounded-xl! border-none px-8 py-6 text-left align-middle">
 
         <div className="relative pb-1 system-xl-medium text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
-        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          aria-label={t('operation.close', { ns: 'common' })}
+          onClick={onCancel}
+        >
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
         <CSVUploader
           file={currentCSV}
           updateFile={handleFile}
diff --git a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
index a686ba9f2e..a3c63f5a0c 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
@@ -212,16 +212,16 @@ describe('SpecificGroupsOrMembers', () => {
       expect(screen.getByText(baseMember.name)).toBeInTheDocument()
     })
 
-    const groupItem = screen.getByText(baseGroup.name).closest('div')
-    const groupRemove = groupItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+    const groupRemove = screen.getAllByRole('button', { name: /operation\.remove$/ })[0]!
+
     fireEvent.click(groupRemove)
 
     await waitFor(() => {
       expect(screen.queryByText(baseGroup.name)).not.toBeInTheDocument()
     })
 
-    const memberItem = screen.getByText(baseMember.name).closest('div')
-    const memberRemove = memberItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+    const memberRemove = screen.getAllByRole('button', { name: /operation\.remove$/ })[0]!
+
     fireEvent.click(memberRemove)
 
     await waitFor(() => {
diff --git a/web/app/components/app/app-access-control/__tests__/specific-groups-or-members.spec.tsx b/web/app/components/app/app-access-control/__tests__/specific-groups-or-members.spec.tsx
index 7b198c4e66..e763521940 100644
--- a/web/app/components/app/app-access-control/__tests__/specific-groups-or-members.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/specific-groups-or-members.spec.tsx
@@ -86,11 +86,13 @@ describe('SpecificGroupsOrMembers', () => {
       expect(screen.getByText(baseMember.name)).toBeInTheDocument()
     })
 
-    const groupRemove = screen.getByText(baseGroup.name).closest('div')?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+    const removeButtons = screen.getAllByRole('button', { name: /operation\.remove$/ })
+    const groupRemove = removeButtons[0]!
+    const memberRemove = removeButtons[1]!
+
     fireEvent.click(groupRemove)
     expect(useAccessControlStore.getState().specificGroups).toEqual([])
 
-    const memberRemove = screen.getByText(baseMember.name).closest('div')?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
     fireEvent.click(memberRemove)
     expect(useAccessControlStore.getState().specificMembers).toEqual([])
   })
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index 38f9c2ab50..8d9bf19ea3 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -119,14 +119,40 @@ function SelectedGroupsBreadCrumb() {
   const handleReset = useCallback(() => {
     setSelectedGroupsForBreadcrumb([])
   }, [setSelectedGroupsForBreadcrumb])
+  const hasBreadcrumb = selectedGroupsForBreadcrumb.length > 0
+
   return (
     <div className="flex h-7 items-center gap-x-0.5 px-2 py-0.5">
-      <span className={cn('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('accessControlDialog.operateGroupAndMember.allMembers', { ns: 'app' })}</span>
+      {hasBreadcrumb
+        ? (
+            <button
+              type="button"
+              className="cursor-pointer border-none bg-transparent p-0 text-left system-xs-regular text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={handleReset}
+            >
+              {t('accessControlDialog.operateGroupAndMember.allMembers', { ns: 'app' })}
+            </button>
+          )
+        : (
+            <span className="system-xs-regular text-text-tertiary">{t('accessControlDialog.operateGroupAndMember.allMembers', { ns: 'app' })}</span>
+          )}
       {selectedGroupsForBreadcrumb.map((group, index) => {
+        const isLastGroup = index === selectedGroupsForBreadcrumb.length - 1
+
         return (
           <div key={index} className="flex items-center gap-x-0.5 system-xs-regular text-text-tertiary">
             <span>/</span>
-            <span className={index === selectedGroupsForBreadcrumb.length - 1 ? '' : 'cursor-pointer text-text-accent'} onClick={() => handleBreadCrumbClick(index)}>{group.name}</span>
+            {isLastGroup
+              ? <span>{group.name}</span>
+              : (
+                  <button
+                    type="button"
+                    className="cursor-pointer border-none bg-transparent p-0 text-left system-xs-regular text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                    onClick={() => handleBreadCrumbClick(index)}
+                  >
+                    {group.name}
+                  </button>
+                )}
           </div>
         )
       })}
diff --git a/web/app/components/app/app-access-control/specific-groups-or-members.tsx b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
index 2cacd2cf03..ce6619ec80 100644
--- a/web/app/components/app/app-access-control/specific-groups-or-members.tsx
+++ b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
@@ -120,6 +120,8 @@ type BaseItemProps = {
   onRemove?: () => void
 }
 function BaseItem({ icon, onRemove, children }: BaseItemProps) {
+  const { t } = useTranslation()
+
   return (
     <div className="group flex flex-row items-center gap-x-1 rounded-full border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 pr-1.5 shadow-xs">
       <div className="h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
@@ -128,9 +130,14 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
         </div>
       </div>
       {children}
-      <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={onRemove}>
-        <RiCloseCircleFill className="h-[14px] w-[14px] text-text-quaternary" />
-      </div>
+      <button
+        type="button"
+        className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        aria-label={t('operation.remove', { ns: 'common' })}
+        onClick={onRemove}
+      >
+        <RiCloseCircleFill className="h-[14px] w-[14px] text-text-quaternary" aria-hidden="true" />
+      </button>
     </div>
   )
 }
diff --git a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
index 942a199a87..252eddb47e 100644
--- a/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx
@@ -103,6 +103,22 @@ describe('VersionInfoModal', () => {
     expect(handleClose).toHaveBeenCalledTimes(1)
   })
 
+  it('should close when the close button is clicked', () => {
+    const handleClose = vi.fn()
+
+    render(
+      <VersionInfoModal
+        isOpen
+        onClose={handleClose}
+        onPublish={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'operation.close' }))
+
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
   it('should validate release note length and clear previous errors before publishing', () => {
     const handlePublish = vi.fn()
     const handleClose = vi.fn()
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index 264975a08b..4e5493d1b2 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -79,9 +79,14 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
             {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
           </div>
-          <div className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
-            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onClose}
+          >
+            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
         <div className="flex flex-col gap-y-4 px-6 py-3">
           <div className="flex flex-col gap-y-1">
diff --git a/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
index 51683ad948..604db8288a 100644
--- a/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/__tests__/index.spec.tsx
@@ -233,9 +233,7 @@ describe('ConfigVar', () => {
       const item = screen.getByTitle('name · Name')
       const itemContainer = item.closest('div.group')
       expect(itemContainer).not.toBeNull()
-      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
-      expect(actionButtons).toHaveLength(2)
-      fireEvent.click(actionButtons[0]!)
+      fireEvent.click(within(itemContainer as HTMLElement).getByRole('button', { name: 'common.operation.edit' }))
 
       const editDialog = await screen.findByRole('dialog')
       const saveButton = within(editDialog).getByRole('button', { name: 'common.operation.save' })
@@ -259,9 +257,7 @@ describe('ConfigVar', () => {
       const item = screen.getByTitle('first · First')
       const itemContainer = item.closest('div.group')
       expect(itemContainer).not.toBeNull()
-      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
-      expect(actionButtons).toHaveLength(2)
-      fireEvent.click(actionButtons[0]!)
+      fireEvent.click(within(itemContainer as HTMLElement).getByRole('button', { name: 'common.operation.edit' }))
 
       const inputs = await screen.findAllByPlaceholderText('appDebug.variableConfig.inputPlaceholder')
       fireEvent.change(inputs[0]!, { target: { value: 'second' } })
@@ -285,9 +281,7 @@ describe('ConfigVar', () => {
       const item = screen.getByTitle('first · First')
       const itemContainer = item.closest('div.group')
       expect(itemContainer).not.toBeNull()
-      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
-      expect(actionButtons).toHaveLength(2)
-      fireEvent.click(actionButtons[0]!)
+      fireEvent.click(within(itemContainer as HTMLElement).getByRole('button', { name: 'common.operation.edit' }))
 
       const inputs = await screen.findAllByPlaceholderText('appDebug.variableConfig.inputPlaceholder')
       fireEvent.change(inputs[1]!, { target: { value: 'Second' } })
@@ -318,7 +312,7 @@ describe('ConfigVar', () => {
         onPromptVariablesChange,
       })
 
-      const removeBtn = screen.getByTestId('var-item-delete-btn')
+      const removeBtn = screen.getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(removeBtn)
 
       expect(onPromptVariablesChange).toHaveBeenCalledWith([])
@@ -343,7 +337,7 @@ describe('ConfigVar', () => {
         },
       )
 
-      const deleteBtn = screen.getByTestId('var-item-delete-btn')
+      const deleteBtn = screen.getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(deleteBtn)
       // confirmation modal should show up
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
@@ -411,8 +405,7 @@ describe('ConfigVar', () => {
       const itemContainer = item.closest('div.group')
       expect(itemContainer).not.toBeNull()
 
-      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
-      fireEvent.click(actionButtons[0]!)
+      fireEvent.click(within(itemContainer as HTMLElement).getByRole('button', { name: 'common.operation.edit' }))
 
       const modalState = setShowExternalDataToolModal.mock.calls.at(-1)?.[0]
 
@@ -460,8 +453,7 @@ describe('ConfigVar', () => {
       const itemContainer = item.closest('div.group')
       expect(itemContainer).not.toBeNull()
 
-      const actionButtons = itemContainer!.querySelectorAll('div.h-6.w-6')
-      fireEvent.click(actionButtons[0]!)
+      fireEvent.click(within(itemContainer as HTMLElement).getByRole('button', { name: 'common.operation.edit' }))
 
       const modalState = setShowExternalDataToolModal.mock.calls.at(-1)?.[0]
 
diff --git a/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx b/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
index aae00bb2b7..6f4fe5f11a 100644
--- a/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
+++ b/web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx
@@ -39,7 +39,7 @@ describe('VarItem', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('var-item-delete-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.delete' }))
 
     expect(onRemove).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/app/configuration/config-var/config-select/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/config-select/__tests__/index.spec.tsx
index 337b3bfe1c..24517eb341 100644
--- a/web/app/components/app/configuration/config-var/config-select/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/__tests__/index.spec.tsx
@@ -44,12 +44,7 @@ describe('ConfigSelect Component', () => {
 
   it('handles option deletion', () => {
     render(<ConfigSelect {...defaultProps} />)
-    const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
-    const deleteButton = optionContainer?.querySelector('div[role="button"]')
-
-    if (!deleteButton)
-      return
-    fireEvent.click(deleteButton)
+    fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.delete' })[0]!)
     expect(defaultProps.onChange).toHaveBeenCalledWith(['Option 2'])
   })
 
@@ -86,7 +81,7 @@ describe('ConfigSelect Component', () => {
   it('applies delete hover styles', () => {
     render(<ConfigSelect {...defaultProps} />)
     const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
-    const deleteButton = optionContainer?.querySelector('div[role="button"]')
+    const deleteButton = screen.getAllByRole('button', { name: 'common.operation.delete' })[0]
 
     if (!deleteButton)
       return
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 24bc3b4a06..42878852d9 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -67,9 +67,10 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
-                <div
-                  role="button"
-                  className="absolute top-1/2 right-1.5 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+                <button
+                  type="button"
+                  aria-label={t('operation.delete', { ns: 'common' })}
+                  className="absolute top-1/2 right-1.5 block translate-y-[-50%] cursor-pointer rounded-md border-none bg-transparent p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
                   onClick={() => {
                     onChange(options.filter((_, i) => index !== i))
                     setDeletingID(null)
@@ -77,8 +78,8 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <RiDeleteBinLine className="h-3.5 w-3.5" />
-                </div>
+                  <RiDeleteBinLine className="h-3.5 w-3.5" aria-hidden="true" />
+                </button>
               </div>
             ))}
           </ReactSortable>
diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index 80c0bf6ac6..17568683d2 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -9,6 +9,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
 import IconTypeIcon from './input-type-icon'
@@ -36,6 +37,7 @@ const VarItem: FC<ItemProps> = ({
   onRemove,
   canDrag,
 }) => {
+  const { t } = useTranslation()
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
@@ -58,21 +60,24 @@ const VarItem: FC<ItemProps> = ({
           <IconTypeIcon type={type as IInputTypeIconProps['type']} className="text-text-tertiary" />
         </div>
         <div className={cn('hidden items-center justify-end rounded-lg', !readonly && 'group-hover:flex')}>
-          <div
-            className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5"
+          <button
+            type="button"
+            aria-label={t('operation.edit', { ns: 'common' })}
+            className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-black/5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onEdit}
           >
-            <RiEditLine className="h-4 w-4 text-text-tertiary" />
-          </div>
-          <div
-            data-testid="var-item-delete-btn"
-            className="flex h-6 w-6 cursor-pointer items-center justify-center text-text-tertiary hover:text-text-destructive"
+            <RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label={t('operation.delete', { ns: 'common' })}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-text-tertiary hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
             onClick={onRemove}
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <RiDeleteBinLine className="h-4 w-4" />
-          </div>
+            <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+          </button>
         </div>
       </div>
     </div>
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/__tests__/index.spec.tsx b/web/app/components/app/configuration/config/agent/agent-tools/__tests__/index.spec.tsx
index d668737a0a..628e34bbe0 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/__tests__/index.spec.tsx
@@ -368,7 +368,7 @@ describe('AgentTools', () => {
 
   it('should remove tool when delete action is clicked', async () => {
     const { getModelConfig } = renderAgentTools()
-    const deleteButton = screen.getByTestId('delete-removed-tool')
+    const deleteButton = screen.getByRole('button', { name: /operation\.delete/i })
     if (!deleteButton)
       throw new Error('Delete button not found')
     await userEvent.click(deleteButton)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 3242bcdcf8..8ad9ad1f8f 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -96,6 +96,7 @@ const AgentTools: FC = () => {
   }
 
   const [isDeleting, setIsDeleting] = useState<number>(-1)
+  const getDeleteToolLabel = (tool: AgentTool) => `${t('operation.delete', { ns: 'common' })} ${tool.tool_label || tool.tool_name}`
   const getToolValue = (tool: ToolDefaultValue) => {
     const currToolInCollections = collectionList.find(c => c.id === tool.provider_id)
     const currToolWithConfigs = currToolInCollections?.tools.find(t => t.name === tool.tool_name)
@@ -249,7 +250,7 @@ const AgentTools: FC = () => {
                           <div className="mb-1.5 text-text-tertiary">{t('toolNameUsageTip', { ns: 'tools' })}</div>
                           <button
                             type="button"
-                            className="cursor-pointer rounded-sm text-text-accent outline-hidden hover:underline focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+                            className="cursor-pointer rounded-sm border-none bg-transparent p-0 text-left text-text-accent outline-hidden hover:underline focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                             onClick={() => copy(item.tool_name)}
                           >
                             {t('copyToolName', { ns: 'tools' })}
@@ -280,8 +281,10 @@ const AgentTools: FC = () => {
                         {t('toolRemoved', { ns: 'tools' })}
                       </PopoverContent>
                     </Popover>
-                    <div
-                      className="cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive"
+                    <button
+                      type="button"
+                      aria-label={getDeleteToolLabel(item)}
+                      className="cursor-pointer rounded-md border-none bg-transparent p-1 text-text-tertiary outline-hidden hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                       onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
@@ -292,8 +295,8 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <RiDeleteBinLine className="h-4 w-4" />
-                    </div>
+                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                    </button>
                   </div>
                 )}
                 {!item.isDeleted && !readonly && (
@@ -320,8 +323,10 @@ const AgentTools: FC = () => {
                         </TooltipContent>
                       </Tooltip>
                     )}
-                    <div
-                      className="cursor-pointer rounded-md p-1 text-text-tertiary hover:text-text-destructive"
+                    <button
+                      type="button"
+                      aria-label={getDeleteToolLabel(item)}
+                      className="cursor-pointer rounded-md border-none bg-transparent p-1 text-text-tertiary outline-hidden hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
                       onClick={() => {
                         const newModelConfig = produce(modelConfig, (draft) => {
                           draft.agentConfig.tools.splice(index, 1)
@@ -331,10 +336,9 @@ const AgentTools: FC = () => {
                       }}
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
-                      data-testid="delete-removed-tool"
                     >
-                      <RiDeleteBinLine className="h-4 w-4" />
-                    </div>
+                      <RiDeleteBinLine className="h-4 w-4" aria-hidden="true" />
+                    </button>
                   </div>
                 )}
                 <div className={cn(item.isDeleted && 'opacity-50')}>
diff --git a/web/app/components/app/configuration/config/automatic/__tests__/instruction-editor.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/instruction-editor.spec.tsx
index c1d7edac13..da4f591b51 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/instruction-editor.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/instruction-editor.spec.tsx
@@ -82,7 +82,7 @@ describe('InstructionEditor', () => {
     expect(screen.getByTestId('error-block')).toHaveTextContent('true')
     expect(screen.getByTestId('last-run-block')).toHaveTextContent('true')
 
-    fireEvent.click(screen.getByText('generate.insertContext'))
+    fireEvent.click(screen.getByRole('button', { name: 'generate.insertContext' }))
 
     expect(mockEmit).toHaveBeenCalledWith(expect.objectContaining({
       instanceId: 'editor-1',
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 5596b335df..710f530c9e 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -113,7 +113,13 @@ const InstructionEditor: FC<Props> = ({
         <span>{t('generate.press', { ns: 'appDebug' })}</span>
         <span className="flex h-4 w-3.5 items-center justify-center rounded-sm bg-components-kbd-bg-gray system-kbd text-text-placeholder">/</span>
         <span>{t('generate.to', { ns: 'appDebug' })}</span>
-        <span onClick={handleInsertVariable} className="ml-1! cursor-pointer hover:border-b hover:border-dotted hover:border-text-tertiary hover:text-text-tertiary">{t('generate.insertContext', { ns: 'appDebug' })}</span>
+        <button
+          type="button"
+          className="ml-1! cursor-pointer border-none bg-transparent p-0 text-left hover:border-b hover:border-dotted hover:border-text-tertiary hover:text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={handleInsertVariable}
+        >
+          {t('generate.insertContext', { ns: 'appDebug' })}
+        </button>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 04cb3ffeda..80c2934195 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -218,7 +218,6 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
                           className="h-6 w-6 rounded-md"
-                          data-testid="close-icon"
                         />
                       </div>
                       <Debug
diff --git a/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx b/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx
index 65f03c92cd..036820f1b3 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx
@@ -17,8 +17,8 @@ describe('ContrlBtnGroup', () => {
       render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
 
       // Assert
-      expect(screen.getByTestId('apply-btn')).toBeInTheDocument()
-      expect(screen.getByTestId('reset-btn')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'appDebug.operation.applyConfig' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'appDebug.operation.resetConfig' })).toBeInTheDocument()
     })
   })
 
@@ -31,8 +31,8 @@ describe('ContrlBtnGroup', () => {
       render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
 
       // Act
-      fireEvent.click(screen.getByTestId('apply-btn'))
-      fireEvent.click(screen.getByTestId('reset-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'appDebug.operation.applyConfig' }))
+      fireEvent.click(screen.getByRole('button', { name: 'appDebug.operation.resetConfig' }))
 
       // Assert
       expect(onSave).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index 6ac485c097..c746d273ba 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
       <div className={`${s.ctrlBtn} flex h-full items-center gap-2 bg-white pl-4`}>
-        <Button variant="primary" onClick={onSave} data-testid="apply-btn">{t('operation.applyConfig', { ns: 'appDebug' })}</Button>
-        <Button onClick={onReset} data-testid="reset-btn">{t('operation.resetConfig', { ns: 'appDebug' })}</Button>
+        <Button variant="primary" onClick={onSave}>{t('operation.applyConfig', { ns: 'appDebug' })}</Button>
+        <Button onClick={onReset}>{t('operation.resetConfig', { ns: 'appDebug' })}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
index cf1df79d1e..cc7f574208 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx
@@ -372,7 +372,7 @@ describe('SettingsModal', () => {
 
       // Act
       await renderSettingsModal(createDataset())
-      await user.click(screen.getByText('datasetSettings.form.embeddingModelTipLink'))
+      await user.click(screen.getByRole('button', { name: 'datasetSettings.form.embeddingModelTipLink' }))
 
       // Assert
       expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 74e4ca5fe5..7e32ecde11 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -281,7 +281,13 @@ const SettingsModal: FC<SettingsModalProps> = ({
               </div>
               <div className="mt-2 w-full text-xs leading-6 text-text-tertiary">
                 {t('form.embeddingModelTip', { ns: 'datasetSettings' })}
-                <span className="cursor-pointer text-text-accent" onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}>{t('form.embeddingModelTipLink', { ns: 'datasetSettings' })}</span>
+                <button
+                  type="button"
+                  className="cursor-pointer border-none bg-transparent p-0 text-left text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
+                >
+                  {t('form.embeddingModelTipLink', { ns: 'datasetSettings' })}
+                </button>
               </div>
             </div>
           </div>
diff --git a/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx b/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
index 81c90deab6..f935abcee6 100644
--- a/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx
@@ -439,7 +439,7 @@ describe('PromptValuePanel', () => {
   it('collapses the user input panel and hides the clear and run actions', () => {
     renderPanel()
 
-    fireEvent.click(screen.getByText('appDebug.inputs.userInputField'))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.inputs.userInputField' }))
 
     expect(screen.queryByRole('button', { name: 'common.operation.clear' })).not.toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'appDebug.inputs.run' })).not.toBeInTheDocument()
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index bfcc13c23c..97988939d4 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -111,11 +111,15 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
     <>
       <div className="relative z-1 mx-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg shadow-md">
         <div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}>
-          <div className="flex cursor-pointer items-center gap-0.5 py-0.5" onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
+          <button
+            type="button"
+            className="flex cursor-pointer items-center gap-0.5 border-none bg-transparent px-0 py-0.5 text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}
+          >
             <div className="system-md-semibold-uppercase text-text-secondary">{t('inputs.userInputField', { ns: 'appDebug' })}</div>
-            {userInputFieldCollapse && <RiArrowRightSLine className="h-4 w-4 text-text-secondary" />}
-            {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" />}
-          </div>
+            {userInputFieldCollapse && <RiArrowRightSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
+            {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
+          </button>
           {!userInputFieldCollapse && (
             <div className="mt-1 system-xs-regular text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
           )}
diff --git a/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
index 59febff8d5..b80e98f8d7 100644
--- a/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/__tests__/index.spec.tsx
@@ -11,12 +11,12 @@ vi.mock('../app-list', () => ({
     onSuccess: () => void
   }) {
     return (
-      <div data-testid="app-list">
-        <button data-testid="app-list-success" onClick={onSuccess}>
+      <div role="region" aria-label="App list">
+        <button type="button" onClick={onSuccess}>
           Success
         </button>
         {onCreateFromBlank && (
-          <button data-testid="create-from-blank" onClick={onCreateFromBlank}>
+          <button type="button" onClick={onCreateFromBlank}>
             Create from Blank
           </button>
         )}
@@ -48,13 +48,13 @@ describe('CreateAppTemplateDialog', () => {
       render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
 
       expect(screen.getByRole('dialog'))!.toBeInTheDocument()
-      expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'App list' }))!.toBeInTheDocument()
     })
 
     it('should render create from blank button when onCreateFromBlank is provided', () => {
       render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
 
-      expect(screen.getByTestId('create-from-blank'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Create from Blank' }))!.toBeInTheDocument()
     })
 
     it('should not render create from blank button when onCreateFromBlank is not provided', () => {
@@ -62,7 +62,7 @@ describe('CreateAppTemplateDialog', () => {
 
       render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
 
-      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Create from Blank' })).not.toBeInTheDocument()
     })
   })
 
@@ -99,8 +99,8 @@ describe('CreateAppTemplateDialog', () => {
       const dialog = screen.getByRole('dialog')
       expect(dialog)!.toBeInTheDocument()
 
-      expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
-      expect(screen.getByTestId('app-list-success'))!.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'App list' }))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Success' }))!.toBeInTheDocument()
     })
 
     it('should call both onSuccess and onClose when app list success is triggered', () => {
@@ -115,7 +115,7 @@ describe('CreateAppTemplateDialog', () => {
         />,
       )
 
-      fireEvent.click(screen.getByTestId('app-list-success'))
+      fireEvent.click(screen.getByRole('button', { name: 'Success' }))
 
       expect(mockOnSuccess).toHaveBeenCalledTimes(1)
       expect(mockOnClose).toHaveBeenCalledTimes(1)
@@ -131,7 +131,7 @@ describe('CreateAppTemplateDialog', () => {
         />,
       )
 
-      fireEvent.click(screen.getByTestId('create-from-blank'))
+      fireEvent.click(screen.getByRole('button', { name: 'Create from Blank' }))
 
       expect(mockOnCreateFromBlank).toHaveBeenCalledTimes(1)
     })
@@ -186,8 +186,8 @@ describe('CreateAppTemplateDialog', () => {
         render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
       }).not.toThrow()
 
-      expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
-      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'App list' }))!.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Create from Blank' })).not.toBeInTheDocument()
     })
 
     it('should work with all required props only', () => {
@@ -202,7 +202,7 @@ describe('CreateAppTemplateDialog', () => {
       }).not.toThrow()
 
       expect(screen.getByRole('dialog'))!.toBeInTheDocument()
-      expect(screen.getByTestId('app-list'))!.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'App list' }))!.toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 128e597259..5b1eb1ac1f 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -27,10 +27,14 @@ export default function Sidebar({ current, categories, onClick, onCreateFromBlan
         {categories.map(category => (<CategoryItem key={category} category={category} active={current === category} onClick={onClick} />))}
       </ul>
       <Divider bgStyle="gradient" />
-      <div className="flex cursor-pointer items-center gap-1 px-3 py-1 text-text-tertiary" onClick={onCreateFromBlank}>
-        <RiStickyNoteAddLine className="h-3.5 w-3.5" />
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-3 py-1 text-left text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onCreateFromBlank}
+      >
+        <RiStickyNoteAddLine className="h-3.5 w-3.5" aria-hidden="true" />
         <span className="system-xs-regular">{t('newApp.startFromBlank', { ns: 'app' })}</span>
-      </div>
+      </button>
     </div>
   )
 }
@@ -42,19 +46,22 @@ type CategoryItemProps = {
 }
 function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return (
-    <li
-      className={cn('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
-      onClick={() => { onClick?.(category) }}
-    >
-      {category === AppCategories.RECOMMENDED && (
-        <div className="inline-flex h-5 w-5 items-center justify-center rounded-md">
-          <RiThumbUpLine className="h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" />
-        </div>
-      )}
-      <AppCategoryLabel
-        category={category}
-        className={cn('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')}
-      />
+    <li>
+      <button
+        type="button"
+        className={cn('group flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg border-none bg-transparent p-1 pl-3 text-left hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden [&.active]:bg-state-base-active', active && 'active')}
+        onClick={() => { onClick?.(category) }}
+      >
+        {category === AppCategories.RECOMMENDED && (
+          <div className="inline-flex h-5 w-5 items-center justify-center rounded-md">
+            <RiThumbUpLine className="h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" aria-hidden="true" />
+          </div>
+        )}
+        <AppCategoryLabel
+          category={category}
+          className={cn('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')}
+        />
+      </button>
     </li>
   )
 }
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 42514e986d..c27231bc87 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -146,11 +146,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                 <div className="mb-2 flex items-center">
                   <button
                     type="button"
-                    className="flex cursor-pointer items-center border-0 bg-transparent p-0"
+                    className="flex cursor-pointer items-center border-0 bg-transparent p-0 text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
                     <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
-                    <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
+                    <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} aria-hidden="true" />
                   </button>
                 </div>
                 {isAppTypeExpanded && (
@@ -249,12 +249,16 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
             <div className="flex items-center justify-between pt-5 pb-10">
-              <div className="flex cursor-pointer items-center gap-1 system-xs-regular text-text-tertiary" onClick={onCreateFromTemplate}>
+              <button
+                type="button"
+                className="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left system-xs-regular text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={onCreateFromTemplate}
+              >
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-px">
-                  <RiArrowRightLine className="h-3.5 w-3.5" />
+                  <RiArrowRightLine className="h-3.5 w-3.5" aria-hidden="true" />
                 </div>
-              </div>
+              </button>
               <div className="flex gap-2">
                 <Button onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
                 <Button disabled={isAppsFull || !name} className="gap-1" variant="primary" onClick={handleCreateApp}>
diff --git a/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx b/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
index ba097b355c..0240136d3e 100644
--- a/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
+++ b/web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx
@@ -157,7 +157,7 @@ describe('Uploader', () => {
     const hiddenInput = getHiddenInput()
     const clickSpy = vi.spyOn(hiddenInput, 'click')
 
-    fireEvent.click(screen.getByText('dslUploader.browse'))
+    fireEvent.click(screen.getByRole('button', { name: 'dslUploader.browse' }))
 
     expect(clickSpy).toHaveBeenCalled()
 
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index aeecb280d0..5b380bd9c5 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -112,7 +112,13 @@ const Uploader: FC<Props> = ({
               <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
-                <span className="cursor-pointer pl-1 text-text-accent" onClick={selectHandle}>{t('dslUploader.browse', { ns: 'app' })}</span>
+                <button
+                  type="button"
+                  className="inline cursor-pointer border-none bg-transparent p-0 pl-1 text-left text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={selectHandle}
+                >
+                  {t('dslUploader.browse', { ns: 'app' })}
+                </button>
               </div>
             </div>
             {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
diff --git a/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx b/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
index ceec1aa3c0..d8473378a0 100644
--- a/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/duplicate-modal/__tests__/index.spec.tsx
@@ -106,6 +106,27 @@ describe('DuplicateAppModal', () => {
     expect(onHide).toHaveBeenCalled()
   })
 
+  it('should call onHide when close button is clicked', async () => {
+    const onHide = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <DuplicateAppModal
+        appName="Demo App"
+        icon_type="emoji"
+        icon="🤖"
+        icon_background="#FFEAD5"
+        show
+        onConfirm={vi.fn()}
+        onHide={onHide}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'operation.close' }))
+
+    expect(onHide).toHaveBeenCalledTimes(1)
+  })
+
   it('should restore the original image icon when the picker closes without selecting', async () => {
     const onConfirm = vi.fn()
     const user = userEvent.setup()
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 7a83c6c277..996952ff2f 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -72,9 +72,14 @@ const DuplicateAppModal = ({
       <Dialog open={show}>
         <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none px-8 text-left align-middle">
 
-          <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onHide}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
           <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
           <div className="mb-9 system-sm-regular text-text-secondary">
             <div className="mb-2 system-md-medium">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
diff --git a/web/app/components/app/log-annotation/__tests__/index.spec.tsx b/web/app/components/app/log-annotation/__tests__/index.spec.tsx
index f75e782953..db657ed29a 100644
--- a/web/app/components/app/log-annotation/__tests__/index.spec.tsx
+++ b/web/app/components/app/log-annotation/__tests__/index.spec.tsx
@@ -15,19 +15,19 @@ vi.mock('@/next/navigation', () => ({
 
 vi.mock('@/app/components/app/annotation', () => ({
   default: ({ appDetail }: { appDetail: App }) => (
-    <div data-testid="annotation" data-app-id={appDetail.id} />
+    <section aria-label="Annotation log">{appDetail.id}</section>
   ),
 }))
 
 vi.mock('@/app/components/app/log', () => ({
   default: ({ appDetail }: { appDetail: App }) => (
-    <div data-testid="log" data-app-id={appDetail.id} />
+    <section aria-label="App log">{appDetail.id}</section>
   ),
 }))
 
 vi.mock('@/app/components/app/workflow-log', () => ({
   default: ({ appDetail }: { appDetail: App }) => (
-    <div data-testid="workflow-log" data-app-id={appDetail.id} />
+    <section aria-label="Workflow log">{appDetail.id}</section>
   ),
 }))
 
@@ -113,7 +113,7 @@ describe('LogAnnotation', () => {
 
       // Assert
       expect(screen.queryByText('appLog.title')).not.toBeInTheDocument()
-      expect(screen.getByTestId('workflow-log')).toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'Workflow log' })).toBeInTheDocument()
     })
   })
 
@@ -127,8 +127,8 @@ describe('LogAnnotation', () => {
       render(<LogAnnotation pageType={PageType.log} />)
 
       // Assert
-      expect(screen.getByTestId('log')).toBeInTheDocument()
-      expect(screen.queryByTestId('annotation')).not.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'App log' })).toBeInTheDocument()
+      expect(screen.queryByRole('region', { name: 'Annotation log' })).not.toBeInTheDocument()
     })
 
     it('should render annotation content when page type is annotation', () => {
@@ -139,8 +139,8 @@ describe('LogAnnotation', () => {
       render(<LogAnnotation pageType={PageType.annotation} />)
 
       // Assert
-      expect(screen.getByTestId('annotation')).toBeInTheDocument()
-      expect(screen.queryByTestId('log')).not.toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'Annotation log' })).toBeInTheDocument()
+      expect(screen.queryByRole('region', { name: 'App log' })).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/app/log/__tests__/empty-element.spec.tsx b/web/app/components/app/log/__tests__/empty-element.spec.tsx
index 3967097c12..41f82375f9 100644
--- a/web/app/components/app/log/__tests__/empty-element.spec.tsx
+++ b/web/app/components/app/log/__tests__/empty-element.spec.tsx
@@ -8,7 +8,7 @@ vi.mock('react-i18next', () => ({
     t: (key: string) => key,
   }),
   Trans: ({ i18nKey, components }: { i18nKey: string, components: Record<string, React.ReactNode> }) => (
-    <span data-testid="trans-component" data-i18n-key={i18nKey}>
+    <span>
       {i18nKey}
       {components.shareLink}
       {components.testLink}
@@ -54,8 +54,7 @@ describe('EmptyElement', () => {
       const appDetail = createMockAppDetail(AppModeEnum.CHAT)
       render(<EmptyElement appDetail={appDetail} />)
 
-      const transComponent = screen.getByTestId('trans-component')
-      expect(transComponent).toHaveAttribute('data-i18n-key', 'table.empty.element.content')
+      expect(screen.getByText('table.empty.element.content', { exact: false })).toBeInTheDocument()
     })
 
     it('should render ThreeDotsIcon SVG', () => {
diff --git a/web/app/components/app/log/__tests__/filter.spec.tsx b/web/app/components/app/log/__tests__/filter.spec.tsx
index ec1a0183be..3692c76a85 100644
--- a/web/app/components/app/log/__tests__/filter.spec.tsx
+++ b/web/app/components/app/log/__tests__/filter.spec.tsx
@@ -146,7 +146,7 @@ describe('Filter', () => {
 
       render(<Filter {...propsWithKeyword} />)
 
-      const clearButton = screen.getByTestId('input-clear')
+      const clearButton = screen.getByRole('button', { name: 'operation.clear' })
       fireEvent.click(clearButton)
 
       expect(mockSetQueryParams).toHaveBeenCalledWith({
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 8db5193f2d..5328efab02 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -351,52 +351,46 @@ export const AppCardOperations = ({
 
       if (key === 'launch' && launchConfigAction) {
         return (
-          <MaybeTooltip
-            key={key}
-            content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
-            tooltipClassName="mt-[-8px]"
-            show={disabled}
-          >
+          <div key={key} className="mr-1 inline-flex">
+            <MaybeTooltip
+              content={t('overview.appInfo.preUseReminder', { ns: 'appOverview' }) ?? ''}
+              tooltipClassName="mt-[-8px]"
+              show={disabled}
+            >
+              <Button
+                className="min-w-[88px] rounded-r-none border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
+                size="small"
+                variant="secondary"
+                onClick={onClick}
+                disabled={disabled}
+              >
+                <div className="flex h-full min-w-[88px] items-center justify-center rounded-l-md px-2 hover:bg-components-button-secondary-bg-hover">
+                  <div className="flex items-center justify-center gap-px">
+                    <Icon className="h-3.5 w-3.5" />
+                    <div className="px-[3px] system-xs-medium">{label}</div>
+                  </div>
+                </div>
+              </Button>
+            </MaybeTooltip>
+            <div
+              aria-hidden="true"
+              className="h-6 w-px shrink-0 bg-divider-regular opacity-100"
+            />
             <Button
-              className="mr-1 border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg"
+              aria-label={launchConfigAction.label}
+              className="w-8 rounded-l-none border-0 px-0 py-0 shadow-none backdrop-blur-none hover:bg-components-button-secondary-bg-hover"
               size="small"
               variant="secondary"
-              onClick={onClick}
-              disabled={disabled}
+              onClick={launchConfigAction.onClick}
+              disabled={disabled || launchConfigAction.disabled}
             >
-              <div className="flex h-full min-w-[88px] items-center justify-center rounded-l-md px-2 hover:bg-components-button-secondary-bg-hover">
+              <div className="flex h-full w-8 shrink-0 items-center justify-center rounded-r-md">
                 <div className="flex items-center justify-center gap-px">
-                  <Icon className="h-3.5 w-3.5" />
-                  <div className="px-[3px] system-xs-medium">{label}</div>
+                  <RiSettings2Line className="h-3.5 w-3.5" aria-hidden="true" />
                 </div>
               </div>
-              <div
-                aria-hidden="true"
-                className="h-4 w-px shrink-0 bg-divider-regular opacity-100"
-              />
-              <div
-                className="flex h-full w-8 shrink-0 items-center justify-center rounded-r-md hover:bg-components-button-secondary-bg-hover"
-                onClick={(event) => {
-                  event.stopPropagation()
-                  launchConfigAction.onClick()
-                }}
-                aria-label={launchConfigAction.label}
-                role="button"
-                tabIndex={disabled ? -1 : 0}
-                onKeyDown={(event) => {
-                  if (disabled)
-                    return
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    launchConfigAction.onClick()
-                  }
-                }}
-              >
-                <RiSettings2Line className="h-3.5 w-3.5" />
-              </div>
             </Button>
-          </MaybeTooltip>
+          </div>
         )
       }
 
diff --git a/web/app/components/app/overview/customize/__tests__/index.spec.tsx b/web/app/components/app/overview/customize/__tests__/index.spec.tsx
index 1f703afcd8..6b33cadcf7 100644
--- a/web/app/components/app/overview/customize/__tests__/index.spec.tsx
+++ b/web/app/components/app/overview/customize/__tests__/index.spec.tsx
@@ -310,7 +310,7 @@ describe('CustomizeModal', () => {
         expect(screen.getByText('appOverview.overview.appInfo.customize.title')).toBeInTheDocument()
       })
 
-      const closeButton = screen.getByTestId('modal-close-button')
+      const closeButton = screen.getByRole('button', { name: 'Close' })
       fireEvent.click(closeButton)
       expect(onClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index 46527c30f9..89b621f32b 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -53,7 +53,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
         <DialogDescription className="mt-2 body-md-regular text-text-secondary">
           {t(`${prefixCustomize}.explanation`, { ns: 'appOverview' })}
         </DialogDescription>
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
         <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
           <Tag bordered={true} hideBg={true} className="border-text-accent-secondary text-text-accent-secondary uppercase">
             {t(`${prefixCustomize}.way`, { ns: 'appOverview' })}
diff --git a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
index 99bf1e7436..d043046dc8 100644
--- a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
@@ -273,6 +273,15 @@ describe('SwitchAppModal', () => {
       expect(onClose).toHaveBeenCalledTimes(1)
     })
 
+    it('should call onClose when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const { onClose } = renderComponent()
+
+      await user.click(screen.getByRole('button', { name: /operation\.close$/ }))
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
     it('should switch app and navigate with push when keeping original', async () => {
       const user = userEvent.setup()
       // Arrange
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index c46ce7ad13..b88579fbe5 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -111,9 +111,14 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
       <Dialog open={show}>
         <DialogContent className={cn('w-full overflow-hidden! border-none text-left align-middle', cn('w-[600px] max-w-[600px] p-8'))}>
 
-          <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onClose}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
           <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
             <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
           </div>
@@ -161,7 +166,13 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           <div className="flex items-center justify-between pt-6">
             <div className="flex items-center">
               <Checkbox className="shrink-0" checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
-              <div className="ml-2 cursor-pointer text-sm leading-5 text-text-secondary" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('removeOriginal', { ns: 'app' })}</div>
+              <button
+                type="button"
+                className="ml-2 cursor-pointer border-none bg-transparent p-0 text-left text-sm leading-5 text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={() => setRemoveOriginal(!removeOriginal)}
+              >
+                {t('removeOriginal', { ns: 'app' })}
+              </button>
             </div>
             <div className="flex items-center">
               <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
diff --git a/web/app/components/app/workflow-log/__tests__/detail.spec.tsx b/web/app/components/app/workflow-log/__tests__/detail.spec.tsx
index a58f55b031..4abbfa24a5 100644
--- a/web/app/components/app/workflow-log/__tests__/detail.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/detail.spec.tsx
@@ -117,11 +117,9 @@ describe('DetailPanel', () => {
     })
 
     it('should render close button', () => {
-      const { container } = render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
 
-      // Close button has RiCloseLine icon
-      const closeButton = container.querySelector('span.cursor-pointer')
-      expect(closeButton).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
 
     it('should render Run component with correct URLs', () => {
@@ -173,12 +171,11 @@ describe('DetailPanel', () => {
       const user = userEvent.setup()
       const onClose = vi.fn()
 
-      const { container } = render(<DetailPanel runID="run-123" onClose={onClose} />)
+      render(<DetailPanel runID="run-123" onClose={onClose} />)
 
-      const closeButton = container.querySelector('span.cursor-pointer')
-      expect(closeButton).toBeInTheDocument()
+      const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
 
-      await user.click(closeButton!)
+      await user.click(closeButton)
 
       expect(onClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/app/workflow-log/__tests__/filter.spec.tsx b/web/app/components/app/workflow-log/__tests__/filter.spec.tsx
index 237862fd71..59063dfb98 100644
--- a/web/app/components/app/workflow-log/__tests__/filter.spec.tsx
+++ b/web/app/components/app/workflow-log/__tests__/filter.spec.tsx
@@ -328,22 +328,14 @@ describe('Filter', () => {
       const user = userEvent.setup()
       const setQueryParams = vi.fn()
 
-      const { container } = render(
+      render(
         <Filter
           queryParams={createDefaultQueryParams({ keyword: 'test' })}
           setQueryParams={setQueryParams}
         />,
       )
 
-      // The Input component renders a clear icon div inside the input wrapper
-      // when showClearIcon is true and value exists
-      const inputWrapper = container.querySelector('.w-\\[200px\\]')
-
-      // Find the clear icon div (has cursor-pointer class and contains RiCloseCircleFill)
-      const clearIconDiv = inputWrapper?.querySelector('div.cursor-pointer')
-
-      expect(clearIconDiv)!.toBeInTheDocument()
-      await user.click(clearIconDiv!)
+      await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
 
       expect(setQueryParams).toHaveBeenCalledWith({
         status: 'all',
diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index 05cd6f1676..f0e80f11c0 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -27,9 +27,14 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
 
   return (
     <div className="relative flex grow flex-col pt-3">
-      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onClose}>
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </span>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onClose}
+      >
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+      </button>
       <div className="flex items-center bg-components-panel-bg">
         <h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
         {canReplay && (
@@ -38,11 +43,11 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
               render={(
                 <button
                   type="button"
-                  className="mr-1 flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-base-hover"
+                  className="mr-1 flex h-6 w-6 items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-state-base-hover"
                   aria-label={t('runDetail.testWithParams', { ns: 'appLog' })}
                   onClick={handleReplay}
                 >
-                  <RiPlayLargeLine className="h-4 w-4 text-text-tertiary" />
+                  <RiPlayLargeLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
                 </button>
               )}
             />
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 78d9a329e6..51e038dbb6 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -130,12 +130,17 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
           <tr>
             <td className="w-5 rounded-l-lg bg-background-section-burn pr-1 pl-2 whitespace-nowrap"></td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">
-              <div className="flex cursor-pointer items-center hover:text-text-secondary" onClick={handleSort}>
+              <button
+                type="button"
+                className="flex cursor-pointer items-center border-none bg-transparent p-0 text-left hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={handleSort}
+              >
                 {t('table.header.startTime', { ns: 'appLog' })}
                 <ArrowDownIcon
                   className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
+                  aria-hidden="true"
                 />
-              </div>
+              </button>
             </td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.status', { ns: 'appLog' })}</td>
             <td className="bg-background-section-burn py-1.5 pl-3 whitespace-nowrap">{t('table.header.runtime', { ns: 'appLog' })}</td>
diff --git a/web/app/components/base/__tests__/alert.spec.tsx b/web/app/components/base/__tests__/alert.spec.tsx
index 10c1a6bbfa..3d4e683d19 100644
--- a/web/app/components/base/__tests__/alert.spec.tsx
+++ b/web/app/components/base/__tests__/alert.spec.tsx
@@ -25,8 +25,7 @@ describe('Alert', () => {
 
     it('should render the close icon', () => {
       render(<Alert {...defaultProps} />)
-      const closeIcon = screen.getByTestId('close-icon')
-      expect(closeIcon).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
   })
 
@@ -66,7 +65,7 @@ describe('Alert', () => {
     it('should call onHide when close button is clicked', () => {
       const onHide = vi.fn()
       render(<Alert {...defaultProps} onHide={onHide} />)
-      const closeButton = screen.getByTestId('close-icon')
+      const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
       fireEvent.click(closeButton)
       expect(onHide).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
index 78d4a06c4a..4c8a1d24bf 100644
--- a/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx
@@ -172,7 +172,7 @@ describe('AgentLogDetail', () => {
 
       await renderAndWaitForData()
 
-      fireEvent.click(screen.getByText(/runLog.tracing/i))
+      fireEvent.click(screen.getByRole('button', { name: /runLog.tracing/i }))
 
       await waitFor(() => {
         const tracingTab = screen.getByText(/runLog.tracing/i)
@@ -188,13 +188,13 @@ describe('AgentLogDetail', () => {
 
       await renderAndWaitForData()
 
-      fireEvent.click(screen.getByText(/runLog.tracing/i))
+      fireEvent.click(screen.getByRole('button', { name: /runLog.tracing/i }))
 
       await waitFor(() => {
         expect(screen.getByText(/runLog.tracing/i).getAttribute('data-active')).toBe('true')
       })
 
-      fireEvent.click(screen.getByText(/runLog.detail/i))
+      fireEvent.click(screen.getByRole('button', { name: /runLog.detail/i }))
 
       await waitFor(() => {
         const detailTab = screen.getByText(/runLog.detail/i)
diff --git a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
index d8c595202a..1c8e79f4aa 100644
--- a/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/agent-log-modal/__tests__/index.spec.tsx
@@ -124,7 +124,7 @@ describe('AgentLogModal', () => {
 
     render(<AgentLogModal {...mockProps} />)
 
-    const closeBtn = screen.getByRole('heading', { name: /appLog.runDetail.workflowTitle/i }).nextElementSibling!
+    const closeBtn = screen.getByRole('button', { name: 'common.operation.close' })
     fireEvent.click(closeBtn)
 
     expect(mockProps.onCancel).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index b12777dfe5..24c192c47e 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -67,12 +67,22 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({ activeTab = 'DETAIL', convers
     <div className="relative flex grow flex-col">
       {/* tab */}
       <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4">
-        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'DETAIL'} onClick={() => switchTab('DETAIL')}>
+        <button
+          type="button"
+          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary')}
+          data-active={currentTab === 'DETAIL'}
+          onClick={() => switchTab('DETAIL')}
+        >
           {t('detail', { ns: 'runLog' })}
-        </div>
-        <div className={cn('mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')} data-active={currentTab === 'TRACING'} onClick={() => switchTab('TRACING')}>
+        </button>
+        <button
+          type="button"
+          className={cn('mr-6 cursor-pointer border-x-0 border-t-0 border-b-2 border-transparent bg-transparent px-0 py-3 text-left text-[13px] leading-[18px] font-semibold text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary')}
+          data-active={currentTab === 'TRACING'}
+          onClick={() => switchTab('TRACING')}
+        >
           {t('tracing', { ns: 'runLog' })}
-        </div>
+        </button>
       </div>
       {/* panel detail */}
       <div className={cn('h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg', currentTab !== 'DETAIL' && '!bg-background-section')}>
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index 0739d0774a..c6f036ede0 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -46,9 +46,14 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
       ref={ref}
     >
       <h1 className="text-md shrink-0 px-4 py-1 font-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
-      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onCancel}>
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </span>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onCancel}
+      >
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+      </button>
       <AgentLogDetail
         conversationID={currentLogItem.conversationId}
         messageID={currentLogItem.id}
diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index 8dfe0e4ff5..4072e113d2 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -3,6 +3,7 @@ import { cva } from 'class-variance-authority'
 import {
   memo,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   type?: 'info'
@@ -26,6 +27,8 @@ const Alert: React.FC<Props> = ({
   onHide,
   className,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <div className={cn('pointer-events-none w-full', className)}>
       <div
@@ -41,12 +44,14 @@ const Alert: React.FC<Props> = ({
             {message}
           </div>
         </div>
-        <div
-          className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
           onClick={onHide}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="close-icon" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
       </div>
     </div>
   )
diff --git a/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx b/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
index 7f452e64e9..589ad5554e 100644
--- a/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/app-icon-picker/__tests__/index.spec.tsx
@@ -195,10 +195,10 @@ describe('AppIconPicker', () => {
       const { onSelect } = renderPicker()
 
       await waitFor(() => {
-        expect(screen.queryAllByTestId(/emoji-container-/i).length).toBeGreaterThan(0)
+        expect(document.querySelector('em-emoji')?.closest('button'))!.toBeInTheDocument()
       })
 
-      const firstEmoji = screen.queryAllByTestId(/emoji-container-/i)[0]
+      const firstEmoji = document.querySelector('em-emoji')?.closest('button')
       if (!firstEmoji)
         throw new Error('Could not find emoji option')
 
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 3ca453213d..999193deed 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -88,8 +88,9 @@ const AudioBtn = ({
             <span className="inline-flex">
               <button
                 type="button"
+                aria-label={tooltipContent}
                 disabled={audioState === 'loading'}
-                className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
+                className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
                 onClick={handleToggle}
               >
                 {audioState === 'loading'
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index 1290fff871..cb7146a8c6 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -1,8 +1,8 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
-import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
 
@@ -11,6 +11,7 @@ type AudioPlayerProps = {
   srcs?: string[] // Support multiple sources
 }
 const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
+  const { t } = useTranslation()
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
@@ -22,6 +23,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
   const [hoverTime, setHoverTime] = useState(0)
   const [isAudioAvailable, setIsAudioAvailable] = useState(true)
   const { theme } = useTheme()
+  const playPauseLabel = t(isPlaying ? 'operation.pause' : 'operation.play', { ns: 'common' })
   useEffect(() => {
     const audio = audioRef.current
     /* v8 ignore next 2 - @preserve */
@@ -245,10 +247,10 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
         {/* If srcs array is provided, render multiple source elements */}
         {srcs && srcs.map((srcUrl, index) => (<source key={index} src={srcUrl} />))}
       </audio>
-      <button type="button" data-testid="play-pause-btn" className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled" onClick={togglePlay} disabled={!isAudioAvailable}>
+      <button type="button" aria-label={playPauseLabel} className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled" onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
-          ? (<div className="i-ri-pause-circle-fill h-5 w-5" />)
-          : (<div className="i-ri-play-large-fill h-5 w-5" />)}
+          ? (<div className="i-ri-pause-circle-fill h-5 w-5" aria-hidden="true" />)
+          : (<div className="i-ri-play-large-fill h-5 w-5" aria-hidden="true" />)}
       </button>
       <div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>
         <div className="flex h-8 items-center justify-center">
diff --git a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
index f05c5d2582..3d27286c76 100644
--- a/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
+++ b/web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx
@@ -50,6 +50,9 @@ function getReactProps<T extends Element>(el: T): Record<string, ReactEventHandl
   return key ? (el as unknown as Record<string, Record<string, ReactEventHandler>>)[key]! : {}
 }
 
+const getPlayButton = () => screen.getByRole('button', { name: 'common.operation.play' })
+const getPauseButton = () => screen.getByRole('button', { name: 'common.operation.pause' })
+
 // ─── Setup / teardown ─────────────────────────────────────────────────────────
 
 beforeEach(() => {
@@ -77,7 +80,7 @@ describe('AudioPlayer — rendering', () => {
   it('should render the play button and audio element when given a src', () => {
     render(<AudioPlayer src="https://example.com/a.mp3" />)
 
-    expect(screen.getByTestId('play-pause-btn'))!.toBeInTheDocument()
+    expect(getPlayButton())!.toBeInTheDocument()
     expect(document.querySelector('audio'))!.toBeInTheDocument()
     expect(document.querySelector('audio')?.getAttribute('src')).toBe('https://example.com/a.mp3')
   })
@@ -93,7 +96,7 @@ describe('AudioPlayer — rendering', () => {
 
   it('should render without crashing when no props are supplied', () => {
     render(<AudioPlayer />)
-    expect(screen.getByTestId('play-pause-btn'))!.toBeInTheDocument()
+    expect(getPlayButton())!.toBeInTheDocument()
   })
 })
 
@@ -102,7 +105,7 @@ describe('AudioPlayer — rendering', () => {
 describe('AudioPlayer — play/pause', () => {
   it('should call audio.play() on first button click', async () => {
     render(<AudioPlayer src="https://example.com/a.mp3" />)
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
 
     await act(async () => {
       fireEvent.click(btn)
@@ -113,13 +116,13 @@ describe('AudioPlayer — play/pause', () => {
 
   it('should call audio.pause() on second button click', async () => {
     render(<AudioPlayer src="https://example.com/a.mp3" />)
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
 
     await act(async () => {
       fireEvent.click(btn)
     })
     await act(async () => {
-      fireEvent.click(btn)
+      fireEvent.click(getPauseButton())
     })
 
     expect(HTMLMediaElement.prototype.pause).toHaveBeenCalledTimes(1)
@@ -127,7 +130,7 @@ describe('AudioPlayer — play/pause', () => {
 
   it('should show the pause icon while playing and play icon while paused', async () => {
     render(<AudioPlayer src="https://example.com/a.mp3" />)
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
 
     expect(btn.querySelector('.i-ri-play-large-fill'))!.toBeInTheDocument()
     expect(btn.querySelector('.i-ri-pause-circle-fill')).not.toBeInTheDocument()
@@ -136,23 +139,25 @@ describe('AudioPlayer — play/pause', () => {
       fireEvent.click(btn)
     })
 
-    expect(btn.querySelector('.i-ri-pause-circle-fill'))!.toBeInTheDocument()
-    expect(btn.querySelector('.i-ri-play-large-fill')).not.toBeInTheDocument()
+    const pauseBtn = getPauseButton()
+    expect(pauseBtn.querySelector('.i-ri-pause-circle-fill'))!.toBeInTheDocument()
+    expect(pauseBtn.querySelector('.i-ri-play-large-fill')).not.toBeInTheDocument()
   })
 
   it('should reset to stopped state when the audio ends', async () => {
     render(<AudioPlayer src="https://example.com/a.mp3" />)
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
 
     await act(async () => {
       fireEvent.click(btn)
     })
-    expect(btn.querySelector('.i-ri-pause-circle-fill'))!.toBeInTheDocument()
+    expect(getPauseButton().querySelector('.i-ri-pause-circle-fill'))!.toBeInTheDocument()
 
     const audio = document.querySelector('audio') as HTMLAudioElement
     await act(async () => {
       audio.dispatchEvent(new Event('ended'))
     })
+    expect(getPlayButton().querySelector('.i-ri-play-large-fill'))!.toBeInTheDocument()
 
     expect(btn.querySelector('.i-ri-play-large-fill'))!.toBeInTheDocument()
   })
@@ -165,7 +170,7 @@ describe('AudioPlayer — play/pause', () => {
       audio.dispatchEvent(new Event('error'))
     })
 
-    expect(screen.getByTestId('play-pause-btn'))!.toBeDisabled()
+    expect(getPlayButton())!.toBeDisabled()
   })
 })
 
@@ -216,7 +221,7 @@ describe('AudioPlayer — audio events', () => {
       audio.dispatchEvent(new Event('error'))
     })
 
-    expect(screen.getByTestId('play-pause-btn'))!.toBeDisabled()
+    expect(getPlayButton())!.toBeDisabled()
   })
 })
 
@@ -276,7 +281,7 @@ describe('AudioPlayer — waveform generation', () => {
     render(<AudioPlayer srcs={['blob:something']} />)
     await advanceWaveformTimer()
 
-    expect(screen.getByTestId('play-pause-btn'))!.toBeDisabled()
+    expect(getPlayButton())!.toBeDisabled()
   })
 
   it('should not trigger waveform generation when no src or srcs provided', async () => {
@@ -462,7 +467,7 @@ describe('AudioPlayer — missing coverage', () => {
     vi.spyOn(HTMLMediaElement.prototype, 'play').mockRejectedValue(new Error('play failed'))
 
     render(<AudioPlayer src="https://example.com/audio.mp3" />)
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
 
     await act(async () => {
       fireEvent.click(btn)
@@ -530,7 +535,7 @@ describe('AudioPlayer — missing coverage', () => {
     render(<AudioPlayer src="blob:https://example.com" />)
     await advanceWaveformTimer() // sets isAudioAvailable to false (invalid protocol)
 
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
     await act(async () => {
       fireEvent.click(btn)
     })
@@ -549,7 +554,7 @@ describe('AudioPlayer — missing coverage', () => {
       audio.dispatchEvent(new Event('error'))
     })
 
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
     const props = getReactProps(btn)
 
     await act(async () => {
@@ -606,7 +611,7 @@ describe('AudioPlayer — additional branch coverage', () => {
       audio.dispatchEvent(new Event('error'))
     })
 
-    expect(screen.queryByTestId('play-pause-btn'))!.toBeDisabled()
+    expect(getPlayButton())!.toBeDisabled()
   })
 
   it('should update current time on timeupdate event', async () => {
@@ -627,7 +632,7 @@ describe('AudioPlayer — additional branch coverage', () => {
       audio.dispatchEvent(new Event('error'))
     })
 
-    const btn = screen.getByTestId('play-pause-btn')
+    const btn = getPlayButton()
     await act(async () => {
       fireEvent.click(btn)
     })
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
index 83a8666e79..563adbd59e 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx
@@ -1333,10 +1333,10 @@ describe('ChatWrapper', () => {
 
     render(<ChatWrapper />)
 
-    fireEvent.click(await screen.findByTestId('edit-btn'))
+    fireEvent.click(await screen.findByRole('button', { name: 'common.operation.edit' }))
     const editedTextarea = await screen.findByDisplayValue('Original question')
     fireEvent.change(editedTextarea, { target: { value: 'Edited question text' } })
-    fireEvent.click(screen.getByTestId('save-edit-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
 
     await waitFor(() => {
       expect(handleSend).toHaveBeenCalledWith(
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
index a54533b194..084911c75a 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
@@ -184,7 +184,7 @@ describe('HeaderInMobile', () => {
     render(<HeaderInMobile />)
 
     // Open dropdown (More button)
-    fireEvent.click(await screen.findByTestId('mobile-more-btn'))
+    fireEvent.click(await screen.findByRole('button', { name: 'common.operation.more' }))
 
     // Find and click "View Chat Settings"
     await waitFor(() => {
@@ -213,7 +213,7 @@ describe('HeaderInMobile', () => {
     render(<HeaderInMobile />)
 
     // Open dropdown and chat settings
-    fireEvent.click(await screen.findByTestId('mobile-more-btn'))
+    fireEvent.click(await screen.findByRole('button', { name: 'common.operation.more' }))
     await waitFor(() => {
       expect(screen.getByText(/share\.chat\.viewChatSettings/i))!.toBeInTheDocument()
     })
@@ -241,7 +241,7 @@ describe('HeaderInMobile', () => {
     render(<HeaderInMobile />)
 
     // Open dropdown
-    fireEvent.click(await screen.findByTestId('mobile-more-btn'))
+    fireEvent.click(await screen.findByRole('button', { name: 'common.operation.more' }))
 
     // "View Chat Settings" should not be present
     await waitFor(() => {
@@ -259,7 +259,7 @@ describe('HeaderInMobile', () => {
     render(<HeaderInMobile />)
 
     // Open dropdown
-    fireEvent.click(await screen.findByTestId('mobile-more-btn'))
+    fireEvent.click(await screen.findByRole('button', { name: 'common.operation.more' }))
 
     // Click "New Conversation" or "Reset Chat"
     await waitFor(() => {
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
index 525f9b89a5..3a2cbfd4cb 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx
@@ -19,7 +19,7 @@ describe('MobileOperationDropdown Component', () => {
     render(<MobileOperationDropdown {...defaultProps} />)
 
     // Trigger button should be present (ActionButton renders a button)
-    const trigger = screen.getByRole('button')
+    const trigger = screen.getByRole('button', { name: 'common.operation.more' })
     expect(trigger).toBeInTheDocument()
 
     // Menu should be hidden initially
@@ -39,7 +39,7 @@ describe('MobileOperationDropdown Component', () => {
     const user = userEvent.setup()
     render(<MobileOperationDropdown {...defaultProps} hideViewChatSettings={true} />)
 
-    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
 
     expect(screen.getByText('share.chat.resetChat')).toBeInTheDocument()
     expect(screen.queryByText('share.chat.viewChatSettings')).not.toBeInTheDocument()
@@ -49,7 +49,7 @@ describe('MobileOperationDropdown Component', () => {
     const user = userEvent.setup()
     render(<MobileOperationDropdown {...defaultProps} />)
 
-    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
 
     // Reset Chat
     await user.click(screen.getByText('share.chat.resetChat'))
@@ -57,7 +57,7 @@ describe('MobileOperationDropdown Component', () => {
       expect(defaultProps.handleResetChat).toHaveBeenCalledTimes(1)
     })
 
-    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
     // View Chat Settings
     await user.click(screen.getByText('share.chat.viewChatSettings'))
     await waitFor(() => {
@@ -68,7 +68,7 @@ describe('MobileOperationDropdown Component', () => {
   it('applies hover state to ActionButton when open', async () => {
     const user = userEvent.setup()
     render(<MobileOperationDropdown {...defaultProps} />)
-    const trigger = screen.getByRole('button')
+    const trigger = screen.getByRole('button', { name: 'common.operation.more' })
 
     // closed state
     expect(trigger).not.toHaveClass('action-btn-hover')
@@ -82,7 +82,7 @@ describe('MobileOperationDropdown Component', () => {
     const user = userEvent.setup()
     render(<MobileOperationDropdown {...defaultProps} />)
 
-    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.more' }))
     await user.click(screen.getByText('share.chat.resetChat'))
 
     await waitFor(() => {
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 97180704f8..29821e3c5a 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -32,13 +32,16 @@ const MobileOperationDropdown = ({
       onOpenChange={setOpen}
     >
       <DropdownMenuTrigger
-        render={<div />}
-        data-testid="mobile-more-btn"
-      >
-        <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
-          <div className="i-ri-more-fill h-[18px] w-[18px]" />
-        </ActionButton>
-      </DropdownMenuTrigger>
+        render={(
+          <ActionButton
+            aria-label={t('operation.more', { ns: 'common' })}
+            size="l"
+            state={open ? ActionButtonState.Hover : ActionButtonState.Default}
+          >
+            <div className="i-ri-more-fill h-[18px] w-[18px]" aria-hidden="true" />
+          </ActionButton>
+        )}
+      />
       <DropdownMenuContent
         placement="bottom-end"
         sideOffset={4}
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx
index b46bcc4607..afd4178d56 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx
@@ -7,9 +7,9 @@ import Item from '../item'
 vi.mock('@/app/components/base/chat/chat-with-history/sidebar/operation', () => ({
   default: ({ togglePin, onRenameConversation, onDelete, isItemHovering, isActive, isPinned }: { togglePin: () => void, onRenameConversation: () => void, onDelete: () => void, isItemHovering: boolean, isActive: boolean, isPinned: boolean }) => (
     <div data-testid="mock-operation">
-      <button onClick={togglePin} data-testid="pin-button">Pin</button>
-      <button onClick={onRenameConversation} data-testid="rename-button">Rename</button>
-      <button onClick={onDelete} data-testid="delete-button">Delete</button>
+      <button onClick={togglePin}>Pin</button>
+      <button onClick={onRenameConversation}>Rename</button>
+      <button onClick={onDelete}>Delete</button>
       <span data-hovering={isItemHovering} data-testid="hover-indicator">Hovering</span>
       <span data-active={isActive} data-testid="active-indicator">Active</span>
       <span data-pinned={isPinned} data-testid="pinned-indicator">Pinned</span>
@@ -137,7 +137,7 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} isPin={true} />)
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenCalledWith('unpin', mockItem)
     })
 
@@ -146,7 +146,7 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} isPin={false} />)
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenCalledWith('pin', mockItem)
     })
 
@@ -155,7 +155,7 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} />)
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenCalledWith('pin', mockItem)
     })
   })
@@ -213,7 +213,7 @@ describe('Item', () => {
       const onChangeConversation = vi.fn()
       render(<Item {...defaultProps} onChangeConversation={onChangeConversation} />)
 
-      const deleteButton = screen.getByTestId('delete-button')
+      const deleteButton = screen.getByRole('button', { name: 'Delete' })
       await user.click(deleteButton)
 
       // onChangeConversation should not be called when Operation button is clicked
@@ -225,7 +225,7 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} />)
 
-      await user.click(screen.getByTestId('delete-button'))
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
       expect(onOperate).toHaveBeenCalledWith('delete', mockItem)
     })
 
@@ -234,7 +234,7 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} />)
 
-      await user.click(screen.getByTestId('rename-button'))
+      await user.click(screen.getByRole('button', { name: 'Rename' }))
       expect(onOperate).toHaveBeenCalledWith('rename', mockItem)
     })
 
@@ -243,9 +243,9 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} />)
 
-      await user.click(screen.getByTestId('rename-button'))
-      await user.click(screen.getByTestId('pin-button'))
-      await user.click(screen.getByTestId('delete-button'))
+      await user.click(screen.getByRole('button', { name: 'Rename' }))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
 
       expect(onOperate).toHaveBeenCalledTimes(3)
     })
@@ -296,13 +296,13 @@ describe('Item', () => {
       const onOperate = vi.fn()
       render(<Item {...defaultProps} onOperate={onOperate} />)
 
-      await user.click(screen.getByTestId('rename-button'))
+      await user.click(screen.getByRole('button', { name: 'Rename' }))
       expect(onOperate).toHaveBeenNthCalledWith(1, 'rename', mockItem)
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenNthCalledWith(2, 'pin', mockItem)
 
-      await user.click(screen.getByTestId('delete-button'))
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
       expect(onOperate).toHaveBeenNthCalledWith(3, 'delete', mockItem)
     })
 
@@ -314,12 +314,12 @@ describe('Item', () => {
         <Item {...defaultProps} onOperate={onOperate} isPin={false} />,
       )
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenCalledWith('pin', mockItem)
 
       rerender(<Item {...defaultProps} onOperate={onOperate} isPin={true} />)
 
-      await user.click(screen.getByTestId('pin-button'))
+      await user.click(screen.getByRole('button', { name: 'Pin' }))
       expect(onOperate).toHaveBeenCalledWith('unpin', mockItem)
     })
   })
@@ -412,7 +412,7 @@ describe('Item', () => {
 
       rerender(<Item {...defaultProps} onOperate={newOnOperate} />)
 
-      await user.click(screen.getByTestId('delete-button'))
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
 
       expect(newOnOperate).toHaveBeenCalledWith('delete', mockItem)
       expect(oldOnOperate).not.toHaveBeenCalled()
diff --git a/web/app/components/base/chat/chat/__tests__/chat-log-modals.spec.tsx b/web/app/components/base/chat/chat/__tests__/chat-log-modals.spec.tsx
index 36e7cec67d..d888fbce98 100644
--- a/web/app/components/base/chat/chat/__tests__/chat-log-modals.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/chat-log-modals.spec.tsx
@@ -98,7 +98,7 @@ describe('ChatLogModals', () => {
         />,
       )
 
-      await user.click(screen.getByTestId('close-btn-container'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(setCurrentLogItem).toHaveBeenCalled()
       expect(setShowPromptLogModal).toHaveBeenCalledWith(false)
diff --git a/web/app/components/base/chat/chat/__tests__/question.spec.tsx b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
index df02cc1e03..9da528737a 100644
--- a/web/app/components/base/chat/chat/__tests__/question.spec.tsx
+++ b/web/app/components/base/chat/chat/__tests__/question.spec.tsx
@@ -183,7 +183,7 @@ describe('Question component', () => {
 
     renderWithProvider(makeItem())
 
-    const copyBtn = screen.getByTestId('copy-btn')
+    const copyBtn = screen.getByRole('button', { name: 'common.operation.copy' })
     await user.click(copyBtn)
 
     await waitFor(() => {
@@ -195,8 +195,8 @@ describe('Question component', () => {
   it('should not show edit action when enableEdit is false', () => {
     renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { enableEdit: false })
 
-    expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
-    expect(screen.queryByTestId('edit-btn')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.copy' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.edit' })).not.toBeInTheDocument()
   })
 
   it('should enter edit mode when edit action clicked, allow editing and call onRegenerate on resend', async () => {
@@ -206,7 +206,7 @@ describe('Question component', () => {
     const item = makeItem()
     renderWithProvider(item, onRegenerate)
 
-    const editBtn = screen.getByTestId('edit-btn')
+    const editBtn = screen.getByRole('button', { name: 'common.operation.edit' })
     await user.click(editBtn)
 
     const textbox = await screen.findByRole('textbox')
@@ -227,14 +227,14 @@ describe('Question component', () => {
     const user = userEvent.setup()
     const { container } = renderWithProvider(makeItem())
 
-    const editBtn = screen.getByTestId('edit-btn')
+    const editBtn = screen.getByRole('button', { name: 'common.operation.edit' })
     await user.click(editBtn)
 
     const textbox = await screen.findByRole('textbox')
     await user.clear(textbox)
     await user.type(textbox, 'Edited question')
 
-    const cancelBtn = await screen.findByTestId('cancel-edit-btn')
+    const cancelBtn = await screen.findByRole('button', { name: 'common.operation.cancel' })
     await user.click(cancelBtn)
 
     await waitFor(() => {
@@ -250,7 +250,7 @@ describe('Question component', () => {
 
     renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     await user.clear(textbox)
@@ -269,7 +269,7 @@ describe('Question component', () => {
 
     renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     await user.clear(textbox)
@@ -285,7 +285,7 @@ describe('Question component', () => {
 
     renderWithProvider(makeItem(), onRegenerate)
 
-    fireEvent.click(screen.getByTestId('edit-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = screen.getByRole('textbox')
 
     fireEvent.compositionStart(textbox)
@@ -302,7 +302,7 @@ describe('Question component', () => {
       const onRegenerate = vi.fn() as unknown as OnRegenerate
       renderWithProvider(makeItem(), onRegenerate)
 
-      fireEvent.click(screen.getByTestId('edit-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.edit' }))
       const textbox = screen.getByRole('textbox')
       fireEvent.change(textbox, { target: { value: 'IME guard text' } })
 
@@ -392,7 +392,7 @@ describe('Question component', () => {
 
     renderWithProvider(item, onRegenerate)
 
-    const editBtn = screen.getByTestId('edit-btn')
+    const editBtn = screen.getByRole('button', { name: 'common.operation.edit' })
     await user.click(editBtn)
 
     const textbox = await screen.findByRole('textbox')
@@ -431,7 +431,7 @@ describe('Question component', () => {
 
     renderWithProvider(item, onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     // Press Shift+Enter
@@ -445,7 +445,7 @@ describe('Question component', () => {
     const onRegenerate = vi.fn() as unknown as OnRegenerate
     renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     // Create an event with nativeEvent.isComposing = true
@@ -461,7 +461,7 @@ describe('Question component', () => {
     const onRegenerate = vi.fn() as unknown as OnRegenerate
     const { unmount } = renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     fireEvent.compositionStart(textbox)
@@ -471,11 +471,11 @@ describe('Question component', () => {
     fireEvent.compositionStart(textbox)
     fireEvent.compositionEnd(textbox)
 
-    const cancelBtn = await screen.findByTestId('cancel-edit-btn')
+    const cancelBtn = await screen.findByRole('button', { name: 'common.operation.cancel' })
     await user.click(cancelBtn)
 
     // Test unmount clearing timer
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox2 = await screen.findByRole('textbox')
     fireEvent.compositionStart(textbox2)
     fireEvent.compositionEnd(textbox2)
@@ -489,13 +489,13 @@ describe('Question component', () => {
     const onRegenerate = vi.fn() as unknown as OnRegenerate
     renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     fireEvent.compositionStart(textbox)
     fireEvent.compositionEnd(textbox) // starts timer
 
-    const saveBtn = screen.getByTestId('save-edit-btn')
+    const saveBtn = screen.getByRole('button', { name: 'common.operation.save' })
     await user.click(saveBtn) // handleResend clears timer
 
     expect(onRegenerate).toHaveBeenCalled()
@@ -661,14 +661,14 @@ describe('Question component', () => {
   it('should hide edit button when enableEdit is explicitly true', () => {
     renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { enableEdit: true })
 
-    expect(screen.getByTestId('edit-btn')).toBeInTheDocument()
-    expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.edit' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.copy' })).toBeInTheDocument()
   })
 
   it('should show copy button always regardless of enableEdit setting', () => {
     renderWithProvider(makeItem(), vi.fn() as unknown as OnRegenerate, { enableEdit: false })
 
-    expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.copy' })).toBeInTheDocument()
   })
 
   it('should not render content switch when no siblings exist', () => {
@@ -687,7 +687,7 @@ describe('Question component', () => {
     const user = userEvent.setup()
     renderWithProvider(makeItem())
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     expect(textbox).toHaveValue('This is the question content')
@@ -713,7 +713,7 @@ describe('Question component', () => {
 
     const { container } = renderWithProvider(makeItem({ message_files: files }))
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
 
     // FileList should be visible in edit mode with mb-3 margin
     expect(screen.getByText(/test.txt/i)).toBeInTheDocument()
@@ -769,7 +769,7 @@ describe('Question component', () => {
     const onRegenerate = vi.fn() as unknown as OnRegenerate
     renderWithProvider(makeItem(), onRegenerate)
 
-    await userEvent.click(screen.getByTestId('edit-btn'))
+    await userEvent.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     // Rapid composition cycles
@@ -792,7 +792,7 @@ describe('Question component', () => {
     const onRegenerate = vi.fn() as unknown as OnRegenerate
     renderWithProvider(makeItem(), onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     await user.clear(textbox)
@@ -821,7 +821,7 @@ describe('Question component', () => {
     const item = makeItem({ message_files: files })
     renderWithProvider(item, onRegenerate)
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
 
     await user.clear(textbox)
@@ -842,24 +842,24 @@ describe('Question component', () => {
     renderWithProvider(makeItem())
 
     // First edit cycle
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     let textbox = await screen.findByRole('textbox')
     fireEvent.compositionStart(textbox)
     fireEvent.compositionEnd(textbox)
 
     // Cancel and re-edit
-    let cancelBtn = await screen.findByTestId('cancel-edit-btn')
+    let cancelBtn = await screen.findByRole('button', { name: 'common.operation.cancel' })
     await user.click(cancelBtn)
 
     // Second edit cycle
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     textbox = await screen.findByRole('textbox')
     expect(textbox).toHaveValue('This is the question content')
 
     fireEvent.compositionStart(textbox)
     fireEvent.compositionEnd(textbox)
 
-    cancelBtn = await screen.findByTestId('cancel-edit-btn')
+    cancelBtn = await screen.findByRole('button', { name: 'common.operation.cancel' })
     await user.click(cancelBtn)
 
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
@@ -875,7 +875,7 @@ describe('Question component', () => {
     expect(contentContainer).toHaveClass('rounded-2xl')
     expect(contentContainer).toHaveClass('bg-background-gradient-bg-fill-chat-bubble-bg-3')
 
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
 
     // Edit mode classes
     expect(contentContainer).toHaveClass('rounded-[24px]')
@@ -918,8 +918,8 @@ describe('Question component', () => {
       </ChatContextProvider>,
     )
 
-    await user.click(screen.getByTestId('edit-btn'))
-    await user.click(screen.getByTestId('save-edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
+    await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
     // Should not throw
   })
 
@@ -969,7 +969,7 @@ describe('Question component', () => {
   it('should clear timer on unmount when timer is active', async () => {
     const user = userEvent.setup()
     const { unmount } = renderWithProvider(makeItem())
-    await user.click(screen.getByTestId('edit-btn'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     const textbox = await screen.findByRole('textbox')
     fireEvent.compositionStart(textbox)
     fireEvent.compositionEnd(textbox) // starts timer
diff --git a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
index 094c5c987b..816fd33341 100644
--- a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
@@ -219,13 +219,13 @@ describe('Operation', () => {
 
     it('should show copy and regenerate buttons', () => {
       renderOperation()
-      expect(screen.getByTestId('copy-btn'))!.toBeInTheDocument()
-      expect(screen.getByTestId('regenerate-btn'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'operation.copy' }))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'operation.regenerate' }))!.toBeInTheDocument()
     })
 
     it('should hide regenerate button when noChatInput is true', () => {
       renderOperation({ ...baseProps, noChatInput: true })
-      expect(screen.queryByTestId('regenerate-btn')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'operation.regenerate' })).not.toBeInTheDocument()
     })
 
     it('should show TTS button when text_to_speech is enabled', () => {
@@ -259,7 +259,7 @@ describe('Operation', () => {
     it('should copy content on copy click', async () => {
       const user = userEvent.setup()
       renderOperation()
-      await user.click(screen.getByTestId('copy-btn'))
+      await user.click(screen.getByRole('button', { name: 'operation.copy' }))
       expect(copy).toHaveBeenCalledWith('Hello world')
     })
 
@@ -274,7 +274,7 @@ describe('Operation', () => {
         ],
       }
       renderOperation({ ...baseProps, item })
-      await user.click(screen.getByTestId('copy-btn'))
+      await user.click(screen.getByRole('button', { name: 'operation.copy' }))
       expect(copy).toHaveBeenCalledWith('Hello World')
     })
   })
@@ -283,7 +283,7 @@ describe('Operation', () => {
     it('should call onRegenerate on regenerate click', async () => {
       const user = userEvent.setup()
       renderOperation()
-      await user.click(screen.getByTestId('regenerate-btn'))
+      await user.click(screen.getByRole('button', { name: 'operation.regenerate' }))
       expect(mockContextValue.onRegenerate).toHaveBeenCalledWith(baseItem)
     })
   })
@@ -299,7 +299,7 @@ describe('Operation', () => {
       const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
       renderOperation({ ...baseProps, item })
       expect(screen.queryByTestId('audio-btn')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('copy-btn')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'operation.copy' })).not.toBeInTheDocument()
     })
   })
 
@@ -793,7 +793,7 @@ describe('Operation', () => {
       const user = userEvent.setup()
       const item: ChatItem = { ...baseItem, agent_thoughts: [] }
       renderOperation({ ...baseProps, item })
-      await user.click(screen.getByTestId('copy-btn'))
+      await user.click(screen.getByRole('button', { name: 'operation.copy' }))
       expect(copy).toHaveBeenCalledWith('Hello world')
     })
 
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx
index 4b3f7b2445..fb6c1259c0 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx
@@ -50,7 +50,7 @@ describe('HumanInputForm', () => {
     expect(contentItems[1])!.toHaveTextContent('{{#$output.field1#}}')
     expect(contentItems[2])!.toHaveTextContent('Part 2')
 
-    const buttons = screen.getAllByTestId('action-button')
+    const buttons = screen.getAllByRole('button').filter(button => button.textContent !== 'Update')
     expect(buttons).toHaveLength(4)
     expect(buttons[0])!.toHaveTextContent('Submit')
     expect(buttons[1])!.toHaveTextContent('Cancel')
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
index 0e7881d972..18d9d72376 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -49,7 +49,6 @@ const HumanInputForm = ({
             disabled={isSubmitting}
             variant={getButtonStyle(action.button_style) as ButtonProps['variant']}
             onClick={() => submit(formToken, action.id, inputs)}
-            data-testid="action-button"
           >
             {action.title}
           </Button>
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 6804271d64..265435acb0 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -328,13 +328,12 @@ function Operation({
                   copy(content)
                   toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                 }}
-                data-testid="copy-btn"
               >
                 <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />
               </ActionButton>
             )}
             {!noChatInput && (
-              <ActionButton aria-label={regenerateLabel} onClick={() => onRegenerate?.(item)} data-testid="regenerate-btn">
+              <ActionButton aria-label={regenerateLabel} onClick={() => onRegenerate?.(item)}>
                 <span aria-hidden="true" className="i-ri-reset-left-line h-4 w-4" />
               </ActionButton>
             )}
diff --git a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
index f17f94ff9e..8896533f28 100644
--- a/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx
@@ -312,7 +312,7 @@ describe('ChatInputArea', () => {
 
     it('should render the send button', () => {
       render(<ChatInputArea visionConfig={mockVisionConfig} />)
-      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.send' })).toBeInTheDocument()
     })
   })
 
@@ -334,7 +334,7 @@ describe('ChatInputArea', () => {
       const textarea = getTextarea()!
 
       await user.type(textarea, 'Hello world')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
 
       expect(onSend).toHaveBeenCalled()
       expect(textarea).toHaveValue('')
@@ -448,14 +448,14 @@ describe('ChatInputArea', () => {
   describe('Voice Input', () => {
     it('should render the voice input button when enabled', () => {
       render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
-      expect(screen.getByTestId('voice-input-button')).toBeTruthy()
+      expect(screen.getByRole('button', { name: 'common.voiceInput.start' })).toBeTruthy()
     })
 
     it('should handle stop recording in VoiceInput', async () => {
       const user = userEvent.setup({ delay: null })
       render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
 
-      await user.click(screen.getByTestId('voice-input-button'))
+      await user.click(screen.getByRole('button', { name: 'common.voiceInput.start' }))
       // Wait for VoiceInput to show speaking
       await screen.findByText(/voiceInput.speaking/i)
       const stopBtn = screen.getByTestId('voice-input-stop')
@@ -473,7 +473,7 @@ describe('ChatInputArea', () => {
       const user = userEvent.setup({ delay: null })
       render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
 
-      await user.click(screen.getByTestId('voice-input-button'))
+      await user.click(screen.getByRole('button', { name: 'common.voiceInput.start' }))
       await screen.findByText(/voiceInput.speaking/i)
       const stopBtn = screen.getByTestId('voice-input-stop')
       await user.click(stopBtn)
@@ -493,7 +493,7 @@ describe('ChatInputArea', () => {
 
       render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
 
-      await user.click(screen.getByTestId('voice-input-button'))
+      await user.click(screen.getByRole('button', { name: 'common.voiceInput.start' }))
 
       // Permission denied should trigger error toast
       await waitFor(() => {
@@ -513,7 +513,7 @@ describe('ChatInputArea', () => {
 
       render(<ChatInputArea speechToTextConfig={{ enabled: true }} visionConfig={mockVisionConfig} />)
 
-      await user.click(screen.getByTestId('voice-input-button'))
+      await user.click(screen.getByRole('button', { name: 'common.voiceInput.start' }))
       await screen.findByText(/voiceInput.speaking/i)
       const stopBtn = screen.getByTestId('voice-input-stop')
       await user.click(stopBtn)
@@ -532,7 +532,7 @@ describe('ChatInputArea', () => {
       const onSend = vi.fn()
       render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
 
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
       expect(onSend).not.toHaveBeenCalled()
       expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
     })
@@ -543,7 +543,7 @@ describe('ChatInputArea', () => {
       render(<ChatInputArea onSend={onSend} isResponding visionConfig={mockVisionConfig} />)
 
       await user.type(getTextarea()!, 'Hello')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
       expect(onSend).not.toHaveBeenCalled()
       expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
     })
@@ -555,7 +555,7 @@ describe('ChatInputArea', () => {
 
       render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
       await user.type(getTextarea()!, 'Hello')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
 
       expect(onSend).not.toHaveBeenCalled()
       expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'info' }))
@@ -569,7 +569,7 @@ describe('ChatInputArea', () => {
 
       render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
       await user.type(getTextarea()!, 'Hello')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
 
       expect(onSend).toHaveBeenCalledWith('Hello', [completedFile])
     })
@@ -586,7 +586,7 @@ describe('ChatInputArea', () => {
 
       render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
       await user.type(getTextarea()!, 'Remote test')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
 
       expect(onSend).toHaveBeenCalledWith('Remote test', [remoteFile])
     })
@@ -598,7 +598,7 @@ describe('ChatInputArea', () => {
       render(<ChatInputArea onSend={onSend} visionConfig={mockVisionConfig} />)
 
       await user.type(getTextarea()!, 'Validation fail')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
 
       expect(onSend).not.toHaveBeenCalled()
     })
@@ -608,7 +608,7 @@ describe('ChatInputArea', () => {
       render(<ChatInputArea visionConfig={mockVisionConfig} />)
 
       await user.type(getTextarea()!, 'No onSend')
-      await user.click(screen.getByTestId('send-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.send' }))
       // Should not throw
     })
   })
@@ -663,7 +663,7 @@ describe('ChatInputArea', () => {
       mockIsMultipleLine.value = true
       render(<ChatInputArea visionConfig={mockVisionConfig} />)
       // Send button should still be present
-      expect(screen.getByTestId('send-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.send' })).toBeInTheDocument()
     })
 
     it('should handle drag enter event on textarea', () => {
diff --git a/web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx
index bda994cd43..5a34a7a7ea 100644
--- a/web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx
@@ -58,7 +58,8 @@ describe('Operation', () => {
         />,
       )
 
-      expect(screen.getAllByRole('button')).toHaveLength(2)
+      expect(screen.getByRole('button', { name: 'common.voiceInput.start' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.send' })).toBeInTheDocument()
     })
 
     it('should not render voice input button when speechToTextConfig.enabled is false', () => {
@@ -136,8 +137,7 @@ describe('Operation', () => {
         />,
       )
 
-      const buttons = screen.getAllByRole('button')
-      const voiceButton = buttons[0]
+      const voiceButton = screen.getByRole('button', { name: 'common.voiceInput.start' })
 
       await user.click(voiceButton!)
 
@@ -157,8 +157,7 @@ describe('Operation', () => {
         />,
       )
 
-      const buttons = screen.getAllByRole('button')
-      const voiceButton = buttons[0]
+      const voiceButton = screen.getByRole('button', { name: 'common.voiceInput.start' })
 
       expect(voiceButton)!.toBeDisabled()
 
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 05e55e038a..d09ea0da5d 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -12,6 +12,7 @@ import {
 } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 
@@ -33,6 +34,8 @@ const Operation: FC<OperationProps> = ({
   onSend,
   theme,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <div
       className={cn(
@@ -49,20 +52,20 @@ const Operation: FC<OperationProps> = ({
             speechToTextConfig?.enabled && (
               <ActionButton
                 size="l"
+                aria-label={t('voiceInput.start', { ns: 'common' })}
                 disabled={readonly}
                 onClick={onShowVoiceInput}
-                data-testid="voice-input-button"
               >
-                <RiMicLine className="h-5 w-5" />
+                <RiMicLine className="h-5 w-5" aria-hidden="true" />
               </ActionButton>
             )
           }
         </div>
         <Button
+          aria-label={t('operation.send', { ns: 'common' })}
           className="ml-3 w-8 px-0"
           variant="primary"
           onClick={readonly ? noop : onSend}
-          data-testid="send-button"
           style={
             theme
               ? {
@@ -71,7 +74,7 @@ const Operation: FC<OperationProps> = ({
               : {}
           }
         >
-          <RiSendPlane2Fill className="h-4 w-4" />
+          <RiSendPlane2Fill className="h-4 w-4" aria-hidden="true" />
         </Button>
       </div>
     </div>
diff --git a/web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx b/web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx
index 1b8518e869..d861014305 100644
--- a/web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx
+++ b/web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx
@@ -61,6 +61,8 @@ const makeData = (overrides: Partial<Resources> = {}): Resources => ({
 const openPopup = async (user: ReturnType<typeof userEvent.setup>) => {
   await user.click(screen.getByTestId('popup-trigger'))
 }
+const getDownloadButton = (name = 'report.pdf') => screen.getByRole('button', { name })
+const queryDownloadButton = (name = 'report.pdf') => screen.queryByRole('button', { name })
 
 describe('Popup', () => {
   beforeEach(() => {
@@ -142,7 +144,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.getByTestId('popup-download-btn'))!.toBeInTheDocument()
+      expect(getDownloadButton()).toBeInTheDocument()
     })
 
     it('should render download button in header for file dataSourceType with dataset_id', async () => {
@@ -157,7 +159,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.getByTestId('popup-download-btn'))!.toBeInTheDocument()
+      expect(getDownloadButton()).toBeInTheDocument()
     })
 
     it('should render plain document name in header (no button) for notion type', async () => {
@@ -173,7 +175,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+      expect(queryDownloadButton('Notion Doc')).not.toBeInTheDocument()
     })
 
     it('should render plain document name in header when dataset_id is absent', async () => {
@@ -188,7 +190,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+      expect(queryDownloadButton()).not.toBeInTheDocument()
     })
 
     it('should disable the download button while isDownloading is true', async () => {
@@ -201,7 +203,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.getByTestId('popup-download-btn'))!.toBeDisabled()
+      expect(getDownloadButton()).toBeDisabled()
     })
   })
 
@@ -457,7 +459,7 @@ describe('Popup', () => {
       render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       await waitFor(() => {
         expect(mockDownloadDocument).toHaveBeenCalledWith({ datasetId: 'ds-1', documentId: 'doc-1' })
@@ -471,7 +473,7 @@ describe('Popup', () => {
       render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       await waitFor(() => expect(mockDownloadDocument).toHaveBeenCalled())
       expect(mockDownloadUrl).not.toHaveBeenCalled()
@@ -489,7 +491,7 @@ describe('Popup', () => {
 
       await openPopup(user)
 
-      expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+      expect(queryDownloadButton('Notion Doc')).not.toBeInTheDocument()
       expect(mockDownloadDocument).not.toHaveBeenCalled()
     })
 
@@ -502,7 +504,7 @@ describe('Popup', () => {
       render(<Popup data={makeData({ dataSourceType: 'upload_file' })} />)
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       expect(mockDownloadDocument).not.toHaveBeenCalled()
     })
@@ -520,7 +522,7 @@ describe('Popup', () => {
       )
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       await waitFor(() => {
         expect(mockDownloadDocument).toHaveBeenCalledWith({ datasetId: 'ds-1', documentId: 'primary-doc-id' })
@@ -539,7 +541,7 @@ describe('Popup', () => {
       )
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       await waitFor(() => {
         expect(mockDownloadDocument).toHaveBeenCalled()
@@ -559,7 +561,7 @@ describe('Popup', () => {
       )
 
       await openPopup(user)
-      await user.click(screen.getByTestId('popup-download-btn'))
+      await user.click(getDownloadButton())
 
       expect(mockDownloadDocument).not.toHaveBeenCalled()
     })
@@ -741,7 +743,7 @@ describe('Popup', () => {
         // we check the handler directly if possible, or just the button absence.
         // Even if the button is rendered (it shouldn't be based on line 71),
         // we check the handler directly if possible, or just the button absence.
-        expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+        expect(queryDownloadButton()).not.toBeInTheDocument()
       })
 
       it('should return early if both documentIds are missing', async () => {
@@ -756,7 +758,7 @@ describe('Popup', () => {
           />,
         )
         await openPopup(user)
-        const btn = screen.queryByTestId('popup-download-btn')
+        const btn = queryDownloadButton()
         if (btn) {
           await user.click(btn)
           expect(mockDownloadDocument).not.toHaveBeenCalled()
@@ -774,7 +776,7 @@ describe('Popup', () => {
           />,
         )
         await openPopup(user)
-        expect(screen.queryByTestId('popup-download-btn')).not.toBeInTheDocument()
+        expect(queryDownloadButton()).not.toBeInTheDocument()
       })
     })
   })
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index 9ea4a6b742..5854fdceac 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -70,9 +70,8 @@ const Popup: FC<PopupProps> = ({
                 {(data.dataSourceType === 'upload_file' || data.dataSourceType === 'file') && !!data.sources?.[0]?.dataset_id
                   ? (
                       <button
-                        data-testid="popup-download-btn"
                         type="button"
-                        className="cursor-pointer truncate text-text-tertiary hover:underline"
+                        className="cursor-pointer truncate border-none bg-transparent p-0 text-left text-text-tertiary hover:underline"
                         onClick={handleDownloadUploadFile}
                         disabled={isDownloading}
                       >
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 5bfd8a3000..e5393d1737 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -52,6 +52,8 @@ const Question: FC<QuestionProps> = ({
   const {
     onRegenerate,
   } = useChatContext()
+  const copyLabel = t('operation.copy', { ns: 'common' })
+  const editLabel = t('operation.edit', { ns: 'common' })
 
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(content)
@@ -168,17 +170,17 @@ const Question: FC<QuestionProps> = ({
             style={{ right: contentWidth + 8 }}
           >
             <ActionButton
-              data-testid="copy-btn"
+              aria-label={copyLabel}
               onClick={() => {
                 copy(content)
                 toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
               }}
             >
-              <div className="i-ri-clipboard-line h-4 w-4" />
+              <div className="i-ri-clipboard-line h-4 w-4" aria-hidden="true" />
             </ActionButton>
             {enableEdit && (
-              <ActionButton data-testid="edit-btn" onClick={handleEdit}>
-                <div className="i-ri-edit-line h-4 w-4" />
+              <ActionButton aria-label={editLabel} onClick={handleEdit}>
+                <div className="i-ri-edit-line h-4 w-4" aria-hidden="true" />
               </ActionButton>
             )}
           </div>
@@ -222,8 +224,8 @@ const Question: FC<QuestionProps> = ({
                     />
                   </div>
                   <div className="flex items-center justify-end gap-2">
-                    <Button className="min-w-24" onClick={handleCancelEditing} data-testid="cancel-edit-btn">{t('operation.cancel', { ns: 'common' })}</Button>
-                    <Button className="min-w-24" variant="primary" onClick={handleResend} data-testid="save-edit-btn">{t('operation.save', { ns: 'common' })}</Button>
+                    <Button className="min-w-24" onClick={handleCancelEditing}>{t('operation.cancel', { ns: 'common' })}</Button>
+                    <Button className="min-w-24" variant="primary" onClick={handleResend}>{t('operation.save', { ns: 'common' })}</Button>
                   </div>
                 </div>
               )}
diff --git a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
index 3142bcd315..8b3c6bb3ca 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx
@@ -153,7 +153,7 @@ describe('EmbeddedChatbot Header', () => {
     it('should render reset button when allowResetChat is true and conversation exists', () => {
       render(<Header title="Test Chatbot" allowResetChat={true} />)
 
-      expect(screen.getByTestId('reset-chat-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'share.chat.resetChat' })).toBeInTheDocument()
     })
 
     it('should call onCreateNewChat when reset button is clicked', async () => {
@@ -161,7 +161,7 @@ describe('EmbeddedChatbot Header', () => {
       const onCreateNewChat = vi.fn()
       render(<Header title="Test Chatbot" allowResetChat={true} onCreateNewChat={onCreateNewChat} />)
 
-      await user.click(screen.getByTestId('reset-chat-button'))
+      await user.click(screen.getByRole('button', { name: 'share.chat.resetChat' }))
       expect(onCreateNewChat).toHaveBeenCalled()
     })
 
@@ -218,7 +218,7 @@ describe('EmbeddedChatbot Header', () => {
     it('should render mobile reset button when allowed', () => {
       render(<Header title="Mobile Chatbot" isMobile allowResetChat />)
 
-      expect(screen.getByTestId('mobile-reset-chat-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'share.chat.resetChat' })).toBeInTheDocument()
     })
 
     it('should NOT render mobile reset button when currentConversationId is missing', () => {
@@ -228,7 +228,7 @@ describe('EmbeddedChatbot Header', () => {
       } as EmbeddedChatbotContextValue)
       render(<Header title="Mobile Chatbot" isMobile allowResetChat />)
 
-      expect(screen.queryByTestId('mobile-reset-chat-button')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'share.chat.resetChat' })).not.toBeInTheDocument()
     })
 
     it('should render ViewFormDropdown in mobile when conditions are met', () => {
@@ -247,7 +247,7 @@ describe('EmbeddedChatbot Header', () => {
 
       await dispatchChatbotConfigMessage('https://parent.com', { isToggledByButton: true, isDraggable: false })
 
-      const expandBtn = await screen.findByTestId('mobile-expand-button')
+      const expandBtn = await screen.findByRole('button', { name: 'share.chat.expand' })
       expect(expandBtn).toBeInTheDocument()
 
       await user.click(expandBtn)
@@ -276,7 +276,7 @@ describe('EmbeddedChatbot Header', () => {
 
       await dispatchChatbotConfigMessage('https://parent.com', { isToggledByButton: true, isDraggable: false })
 
-      const expandBtn = await screen.findByTestId('expand-button')
+      const expandBtn = await screen.findByRole('button', { name: 'share.chat.expand' })
       expect(expandBtn).toBeInTheDocument()
 
       await user.click(expandBtn)
@@ -295,7 +295,7 @@ describe('EmbeddedChatbot Header', () => {
       await dispatchChatbotConfigMessage('https://parent.com', { isToggledByButton: true, isDraggable: true })
 
       await waitFor(() => {
-        expect(screen.queryByTestId('expand-button')).not.toBeInTheDocument()
+        expect(screen.queryByRole('button', { name: 'share.chat.expand' })).not.toBeInTheDocument()
       })
     })
 
@@ -305,12 +305,12 @@ describe('EmbeddedChatbot Header', () => {
 
       await dispatchChatbotConfigMessage('https://secure.com', { isToggledByButton: true, isDraggable: false })
 
-      await screen.findByTestId('expand-button')
+      await screen.findByRole('button', { name: 'share.chat.expand' })
 
       await dispatchChatbotConfigMessage('https://malicious.com', { isToggledByButton: false, isDraggable: false })
 
       // Should still be visible (not hidden by the malicious message)
-      expect(screen.getByTestId('expand-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'share.chat.expand' })).toBeInTheDocument()
     })
 
     it('should ignore non-config messages for origin locking', async () => {
@@ -327,7 +327,7 @@ describe('EmbeddedChatbot Header', () => {
       await dispatchChatbotConfigMessage('https://second.com', { isToggledByButton: true, isDraggable: false })
 
       // Should lock to second.com
-      const expandBtn = await screen.findByTestId('expand-button')
+      const expandBtn = await screen.findByRole('button', { name: 'share.chat.expand' })
       expect(expandBtn).toBeInTheDocument()
     })
 
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 6d0cc9bc06..22c1e95bc8 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -114,11 +114,15 @@ const Header: FC<IHeaderProps> = ({
               <Tooltip>
                 <TooltipTrigger
                   render={(
-                    <ActionButton size="l" onClick={handleToggleExpand} data-testid="expand-button">
+                    <ActionButton
+                      size="l"
+                      aria-label={expanded ? t('chat.collapse', { ns: 'share' }) : t('chat.expand', { ns: 'share' })}
+                      onClick={handleToggleExpand}
+                    >
                       {
                         expanded
-                          ? <div className="i-ri-collapse-diagonal-2-line h-[18px] w-[18px]" />
-                          : <div className="i-ri-expand-diagonal-2-line h-[18px] w-[18px]" />
+                          ? <div className="i-ri-collapse-diagonal-2-line h-[18px] w-[18px]" aria-hidden="true" />
+                          : <div className="i-ri-expand-diagonal-2-line h-[18px] w-[18px]" aria-hidden="true" />
                       }
                     </ActionButton>
                   )}
@@ -133,8 +137,12 @@ const Header: FC<IHeaderProps> = ({
             <Tooltip>
               <TooltipTrigger
                 render={(
-                  <ActionButton size="l" onClick={onCreateNewChat} data-testid="reset-chat-button">
-                    <div className="i-ri-reset-left-line h-[18px] w-[18px]" />
+                  <ActionButton
+                    size="l"
+                    aria-label={t('chat.resetChat', { ns: 'share' })}
+                    onClick={onCreateNewChat}
+                  >
+                    <div className="i-ri-reset-left-line h-[18px] w-[18px]" aria-hidden="true" />
                   </ActionButton>
                 )}
               />
@@ -171,11 +179,15 @@ const Header: FC<IHeaderProps> = ({
             <Tooltip>
               <TooltipTrigger
                 render={(
-                  <ActionButton size="l" onClick={handleToggleExpand} data-testid="mobile-expand-button">
+                  <ActionButton
+                    size="l"
+                    aria-label={expanded ? t('chat.collapse', { ns: 'share' }) : t('chat.expand', { ns: 'share' })}
+                    onClick={handleToggleExpand}
+                  >
                     {
                       expanded
-                        ? <div className={cn('i-ri-collapse-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
-                        : <div className={cn('i-ri-expand-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+                        ? <div className={cn('i-ri-collapse-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} aria-hidden="true" />
+                        : <div className={cn('i-ri-expand-diagonal-2-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} aria-hidden="true" />
                     }
                   </ActionButton>
                 )}
@@ -190,8 +202,12 @@ const Header: FC<IHeaderProps> = ({
           <Tooltip>
             <TooltipTrigger
               render={(
-                <ActionButton size="l" onClick={onCreateNewChat} data-testid="mobile-reset-chat-button">
-                  <div className={cn('i-ri-reset-left-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
+                <ActionButton
+                  size="l"
+                  aria-label={t('chat.resetChat', { ns: 'share' })}
+                  onClick={onCreateNewChat}
+                >
+                  <div className={cn('i-ri-reset-left-line h-[18px] w-[18px]', theme?.colorPathOnHeader)} aria-hidden="true" />
                 </ActionButton>
               )}
             />
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx
index 42cf7f8b21..e688ebe17c 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx
@@ -56,19 +56,19 @@ describe('InputsFormNode', () => {
     render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
     expect(screen.getByText(/chat.chatSettingsTitle/i)).toBeInTheDocument()
     expect(screen.getByTestId('mock-inputs-form-content')).toBeInTheDocument()
-    expect(screen.getByTestId('inputs-form-start-chat-button')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'share.chat.startChat' })).toBeInTheDocument()
   })
 
   it('should render collapsed state correctly', () => {
     render(<InputsFormNode collapsed={true} setCollapsed={setCollapsed} />)
     expect(screen.getByText(/chat.chatSettingsTitle/i)).toBeInTheDocument()
     expect(screen.queryByTestId('mock-inputs-form-content')).not.toBeInTheDocument()
-    expect(screen.getByTestId('inputs-form-edit-button')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.edit' })).toBeInTheDocument()
   })
 
   it('should handle edit button click', async () => {
     render(<InputsFormNode collapsed={true} setCollapsed={setCollapsed} />)
-    await user.click(screen.getByTestId('inputs-form-edit-button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.edit' }))
     expect(setCollapsed).toHaveBeenCalledWith(false)
   })
 
@@ -78,7 +78,7 @@ describe('InputsFormNode', () => {
       currentConversationId: 'conv-123',
     } as unknown as any)
     render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
-    await user.click(screen.getByTestId('inputs-form-close-button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.close' }))
     expect(setCollapsed).toHaveBeenCalledWith(true)
   })
 
@@ -90,7 +90,7 @@ describe('InputsFormNode', () => {
       handleStartChat,
     } as unknown as any)
     render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
-    await user.click(screen.getByTestId('inputs-form-start-chat-button'))
+    await user.click(screen.getByRole('button', { name: 'share.chat.startChat' }))
     expect(handleStartChat).toHaveBeenCalled()
     expect(setCollapsed).toHaveBeenCalledWith(true)
   })
@@ -105,7 +105,7 @@ describe('InputsFormNode', () => {
       },
     } as unknown as any)
     render(<InputsFormNode collapsed={false} setCollapsed={setCollapsed} />)
-    const button = screen.getByTestId('inputs-form-start-chat-button')
+    const button = screen.getByRole('button', { name: 'share.chat.startChat' })
     expect(button).toHaveStyle({ backgroundColor: '#ff0000' })
   })
 
@@ -138,7 +138,7 @@ describe('InputsFormNode', () => {
     expect(screen.getByTestId('mock-inputs-form-content').parentElement).toHaveClass('p-4')
 
     // Start chat button container
-    expect(screen.getByTestId('inputs-form-start-chat-button').parentElement).toHaveClass('p-4')
+    expect(screen.getByRole('button', { name: 'share.chat.startChat' }).parentElement).toHaveClass('p-4')
 
     // Collapsed state mobile styles
     rerender(<InputsFormNode collapsed={true} setCollapsed={setCollapsed} />)
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 7cf9ee2968..1282126f7d 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -56,7 +56,6 @@ const InputsFormNode = ({
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(false)}
-              data-testid="inputs-form-edit-button"
             >
               {t('operation.edit', { ns: 'common' })}
             </Button>
@@ -67,7 +66,6 @@ const InputsFormNode = ({
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(true)}
-              data-testid="inputs-form-close-button"
             >
               {t('operation.close', { ns: 'common' })}
             </Button>
@@ -84,7 +82,6 @@ const InputsFormNode = ({
               variant="primary"
               className="w-full"
               onClick={() => handleStartChat(() => setCollapsed(true))}
-              data-testid="inputs-form-start-chat-button"
               style={
                 themeBuilder?.theme
                   ? {
diff --git a/web/app/components/base/copy-feedback/__tests__/index.spec.tsx b/web/app/components/base/copy-feedback/__tests__/index.spec.tsx
index 83e873ab89..b2484031db 100644
--- a/web/app/components/base/copy-feedback/__tests__/index.spec.tsx
+++ b/web/app/components/base/copy-feedback/__tests__/index.spec.tsx
@@ -35,15 +35,15 @@ describe('CopyFeedback', () => {
   describe('User Interactions', () => {
     it('calls copy with content when clicked', () => {
       render(<CopyFeedback content="test content" />)
-      const button = screen.getByRole('button')
-      fireEvent.click(button.firstChild as Element)
+      const button = screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' })
+      fireEvent.click(button)
       expect(mockCopy).toHaveBeenCalledWith('test content')
     })
 
     it('does not reset on mouse leave (relies on hook timeout)', () => {
       render(<CopyFeedback content="test content" />)
-      const button = screen.getByRole('button')
-      fireEvent.mouseLeave(button.firstChild as Element)
+      const button = screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' })
+      fireEvent.mouseLeave(button)
       expect(mockReset).not.toHaveBeenCalled()
     })
   })
@@ -57,8 +57,8 @@ describe('CopyFeedbackNew', () => {
 
   describe('Rendering', () => {
     it('renders the component', () => {
-      const { container } = render(<CopyFeedbackNew content="test content" />)
-      expect(container.querySelector('.cursor-pointer')).toBeInTheDocument()
+      render(<CopyFeedbackNew content="test content" />)
+      expect(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' })).toBeInTheDocument()
     })
 
     it('renders with custom className', () => {
@@ -82,16 +82,14 @@ describe('CopyFeedbackNew', () => {
 
   describe('User Interactions', () => {
     it('calls copy with content when clicked', () => {
-      const { container } = render(<CopyFeedbackNew content="test content" />)
-      const clickableArea = container.querySelector('.cursor-pointer')!.firstChild as HTMLElement
-      fireEvent.click(clickableArea)
+      render(<CopyFeedbackNew content="test content" />)
+      fireEvent.click(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' }))
       expect(mockCopy).toHaveBeenCalledWith('test content')
     })
 
     it('does not reset on mouse leave (relies on hook timeout)', () => {
-      const { container } = render(<CopyFeedbackNew content="test content" />)
-      const clickableArea = container.querySelector('.cursor-pointer')!.firstChild as HTMLElement
-      fireEvent.mouseLeave(clickableArea)
+      render(<CopyFeedbackNew content="test content" />)
+      fireEvent.mouseLeave(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' }))
       expect(mockReset).not.toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/base/copy-feedback/index.tsx b/web/app/components/base/copy-feedback/index.tsx
index 860b88b245..027e34d665 100644
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -38,11 +38,9 @@ const CopyFeedback = ({ content }: Props) => {
     <Tooltip>
       <TooltipTrigger
         render={(
-          <ActionButton>
-            <div onClick={handleCopy}>
-              {copied && <RiClipboardFill className="h-4 w-4" />}
-              {!copied && <RiClipboardLine className="h-4 w-4" />}
-            </div>
+          <ActionButton aria-label={safeText} onClick={handleCopy}>
+            {copied && <RiClipboardFill className="h-4 w-4" aria-hidden="true" />}
+            {!copied && <RiClipboardLine className="h-4 w-4" aria-hidden="true" />}
           </ActionButton>
         )}
       />
@@ -73,15 +71,17 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
     <Tooltip>
       <TooltipTrigger
         render={(
-          <div
-            className={`h-8 w-8 cursor-pointer rounded-lg hover:bg-components-button-ghost-bg-hover ${className ?? ''}`}
+          <button
+            type="button"
+            aria-label={safeText}
+            className={`h-8 w-8 cursor-pointer rounded-lg border-none bg-transparent p-0 hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden ${className ?? ''}`}
+            onClick={handleCopy}
           >
             <div
-              onClick={handleCopy}
               className={`h-full w-full ${copyStyle.copyIcon} ${copied ? copyStyle.copied : ''}`}
             >
             </div>
-          </div>
+          </button>
         )}
       />
       <TooltipContent>
diff --git a/web/app/components/base/copy-icon/__tests__/index.spec.tsx b/web/app/components/base/copy-icon/__tests__/index.spec.tsx
index 1ce9e6dbf5..28044a20d0 100644
--- a/web/app/components/base/copy-icon/__tests__/index.spec.tsx
+++ b/web/app/components/base/copy-icon/__tests__/index.spec.tsx
@@ -21,29 +21,24 @@ describe('copy icon component', () => {
 
   it('renders normally', () => {
     render(<CopyIcon content="this is some test content for the copy icon component" />)
-    const icon = screen.getByTestId('copy-icon')
-    expect(icon).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' })).toBeInTheDocument()
   })
 
   it('shows copy check icon when copied', () => {
     copied = true
     render(<CopyIcon content="this is some test content for the copy icon component" />)
-    const icon = screen.getByTestId('copied-icon')
-    expect(icon).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copied' })).toBeInTheDocument()
   })
 
   it('handles copy when clicked', () => {
     render(<CopyIcon content="this is some test content for the copy icon component" />)
-    const icon = screen.getByTestId('copy-icon')
-    fireEvent.click(icon as Element)
+    fireEvent.click(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' }))
     expect(copy).toBeCalledTimes(1)
   })
 
   it('resets on mouse leave', () => {
     render(<CopyIcon content="this is some test content for the copy icon component" />)
-    const icon = screen.getByTestId('copy-icon')
-    const div = icon?.parentElement as HTMLElement
-    fireEvent.mouseLeave(div)
+    fireEvent.mouseLeave(screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' }))
     expect(reset).toBeCalledTimes(1)
   })
 })
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index a770430580..2cc714dae5 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -36,8 +36,8 @@ const CopyIcon = ({ content }: Props) => {
             onMouseLeave={reset}
           >
             {!copied
-              ? (<span aria-hidden className="i-custom-vender-line-files-copy h-3.5 w-3.5" data-testid="copy-icon" />)
-              : (<span aria-hidden className="i-custom-vender-line-files-copy-check h-3.5 w-3.5" data-testid="copied-icon" />)}
+              ? (<span aria-hidden className="i-custom-vender-line-files-copy h-3.5 w-3.5" />)
+              : (<span aria-hidden className="i-custom-vender-line-files-copy-check h-3.5 w-3.5" />)}
           </button>
         )}
       />
diff --git a/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx b/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
index d37647f358..6163d70151 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
@@ -513,10 +513,7 @@ describe('DatePicker', () => {
       // Open year/month picker
       fireEvent.click(screen.getByText(/2024/))
 
-      // The header in year/month view shows selected month/year with an up arrow
-      // Clicking it closes the year/month picker
-      const headerButtons = screen.getAllByRole('button')
-      fireEvent.click(headerButtons[0]!) // First button in year/month view is the header
+      fireEvent.click(screen.getByRole('button', { name: /time\.months\.June 2024/ }))
 
       // Should return to date view
       expect(screen.getAllByText(/daysInWeek/).length).toBeGreaterThan(0)
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index 60888a6ec4..454ac1ad9c 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -228,7 +228,14 @@ const DatePicker = ({
                   placeholder={placeholderDate}
                 />
                 <span className={cn('i-ri-calendar-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedDate)) && 'group-hover:hidden')} />
-                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary')} onClick={handleClear} data-testid="date-picker-clear-button" />
+                <button
+                  type="button"
+                  aria-label={t('operation.clear', { ns: 'common' })}
+                  className={cn('hidden h-4 w-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block')}
+                  onClick={handleClear}
+                >
+                  <span className="i-ri-close-circle-fill h-4 w-4" aria-hidden="true" />
+                </button>
               </div>
             )}
       />
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index 34ec21f0a5..f0aa55a316 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -227,7 +227,14 @@ const TimePicker = ({
                   <TimezoneLabel timezone={timezone} inline className="shrink-0 text-xs select-none" />
                 )}
                 <span className={cn('i-ri-time-line h-4 w-4 shrink-0 text-text-quaternary', isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden')} />
-                <span className={cn('i-ri-close-circle-fill hidden h-4 w-4 shrink-0 text-text-quaternary', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block hover:text-text-secondary')} role="button" aria-label={t('operation.clear', { ns: 'common' })} onClick={handleClear} />
+                <button
+                  type="button"
+                  className={cn('hidden h-4 w-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:inline-block')}
+                  aria-label={t('operation.clear', { ns: 'common' })}
+                  onClick={handleClear}
+                >
+                  <span className="i-ri-close-circle-fill h-4 w-4" aria-hidden="true" />
+                </button>
               </div>
             )}
       />
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 36a98f7dd1..f05221989d 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -57,6 +57,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
 
   const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
+  const styleColorsLabelId = React.useId()
 
   React.useEffect(() => {
     if (selectedEmoji) {
@@ -101,18 +102,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {searchedEmojis.map((emoji: string, index: number) => {
                   return (
-                    <div
+                    <button
+                      type="button"
                       key={`emoji-search-${index}`}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
+                      aria-label={emoji}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-search-result-${emoji}`}>
+                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
-                      </div>
-                    </div>
+                      </span>
+                    </button>
                   )
                 })}
               </div>
@@ -127,18 +130,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
               <div className="grid h-full w-full grid-cols-8 gap-1">
                 {category.emojis.map((emoji, index: number) => {
                   return (
-                    <div
+                    <button
+                      type="button"
                       key={`emoji-${index}`}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg"
+                      aria-label={emoji}
+                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg border-none bg-transparent p-0"
                       onClick={() => {
                         setSelectedEmoji(emoji)
                         setShowStyleColors(true)
                       }}
                     >
-                      <div className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1" data-testid={`emoji-container-${emoji}`}>
+                      <span className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1">
                         <em-emoji id={emoji} />
-                      </div>
-                    </div>
+                      </span>
+                    </button>
                   )
                 })}
 
@@ -150,21 +155,40 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
 
       {/* Color Select */}
       <div className={cn('flex items-center justify-between p-3 pb-0')}>
-        <p className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
+        <p id={styleColorsLabelId} className="mb-2 system-xs-medium-uppercase text-text-primary">Choose Style</p>
         {showStyleColors
-          ? <span className="i-heroicons-chevron-down h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />
-          : <span className="i-heroicons-chevron-up h-4 w-4 cursor-pointer text-text-quaternary" onClick={() => setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />}
+          ? (
+              <button
+                type="button"
+                aria-labelledby={styleColorsLabelId}
+                aria-expanded="true"
+                className="i-heroicons-chevron-down h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                onClick={() => setShowStyleColors(!showStyleColors)}
+              />
+            )
+          : (
+              <button
+                type="button"
+                aria-labelledby={styleColorsLabelId}
+                aria-expanded="false"
+                className="i-heroicons-chevron-up h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-quaternary"
+                onClick={() => setShowStyleColors(!showStyleColors)}
+              />
+            )}
       </div>
       {showStyleColors && (
         <div className="grid w-full grid-cols-8 gap-1 px-3">
           {backgroundColors.map((color) => {
             return (
-              <div
+              <button
+                type="button"
                 key={color}
+                aria-label={color}
                 className={
                   cn(
                     'cursor-pointer',
-                    'ring-offset-1 hover:ring-1',
+                    'border-none bg-transparent p-0',
+                    'ring-components-input-border-hover ring-offset-1 hover:ring-1',
                     'inline-flex h-10 w-10 items-center justify-center rounded-lg',
                     color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
                   )
@@ -173,15 +197,15 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
                   setSelectedBackground(color)
                 }}
               >
-                <div
+                <span
                   className={cn(
                     'flex h-8 w-8 items-center justify-center rounded-lg p-1',
                   )}
                   style={{ background: color }}
                 >
                   {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
-                </div>
-              </div>
+                </span>
+              </button>
             )
           })}
         </div>
diff --git a/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx b/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
index 41683d7af3..c2f4bce55c 100644
--- a/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
+++ b/web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx
@@ -75,10 +75,10 @@ describe('EmojiPickerInner', () => {
 
     it('updates selected emoji and calls onSelect when an emoji is clicked', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
-      const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
+      const emojiButton = screen.getByRole('button', { name: 'rabbit' })
 
       await act(async () => {
-        fireEvent.click(emojiContainers[0]!)
+        fireEvent.click(emojiButton)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('rabbit', expect.any(String))
@@ -89,7 +89,7 @@ describe('EmojiPickerInner', () => {
 
       expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
       expect(toggleButton)!.toBeInTheDocument()
 
       await act(async () => {
@@ -104,21 +104,21 @@ describe('EmojiPickerInner', () => {
     it('updates background color and calls onSelect when a color is clicked', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
       await act(async () => {
         fireEvent.click(toggleButton!)
       })
 
-      const emojiContainers = screen.getAllByTestId(/^emoji-container-/)
+      const emojiButton = screen.getByRole('button', { name: 'rabbit' })
       await act(async () => {
-        fireEvent.click(emojiContainers[0]!)
+        fireEvent.click(emojiButton)
       })
 
       mockOnSelect.mockClear()
 
-      const colorOptions = document.querySelectorAll('[style^="background:"]')
+      const colorOptions = screen.getAllByRole('button', { name: /^#/ })
       await act(async () => {
-        fireEvent.click(colorOptions[1]!.parentElement!)
+        fireEvent.click(colorOptions[1]!)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('rabbit', '#E4FBCC')
@@ -134,9 +134,9 @@ describe('EmojiPickerInner', () => {
 
       await screen.findByText('Search')
 
-      const searchEmojis = screen.getAllByTestId(/^emoji-search-result-/)
+      const searchEmoji = screen.getByRole('button', { name: 'dog' })
       await act(async () => {
-        fireEvent.click(searchEmojis![0]!)
+        fireEvent.click(searchEmoji)
       })
 
       expect(mockOnSelect).toHaveBeenCalledWith('dog', expect.any(String))
@@ -145,7 +145,7 @@ describe('EmojiPickerInner', () => {
     it('toggles style colors display back and forth', async () => {
       render(<EmojiPickerInner onSelect={mockOnSelect} />)
 
-      const toggleButton = screen.getByTestId('toggle-colors')
+      const toggleButton = screen.getByRole('button', { name: 'Choose Style' })
 
       await act(async () => {
         fireEvent.click(toggleButton!)
@@ -153,7 +153,7 @@ describe('EmojiPickerInner', () => {
       expect(screen.getByText('Choose Style'))!.toBeInTheDocument()
 
       await act(async () => {
-        fireEvent.click(screen.getByTestId('toggle-colors')!) // It should be the other icon now
+        fireEvent.click(screen.getByRole('button', { name: 'Choose Style' }))
       })
       expect(screen.queryByText('#FFEAD5')).not.toBeInTheDocument()
     })
diff --git a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
index 36b161b7c7..ed5f9bed75 100644
--- a/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/emoji-picker/__tests__/index.spec.tsx
@@ -81,10 +81,8 @@ describe('EmojiPicker', () => {
         )
       })
 
-      const emojiWrappers = screen.getAllByTestId(/^emoji-container-/)
-      expect(emojiWrappers.length).toBeGreaterThan(0)
       await act(async () => {
-        fireEvent.click(emojiWrappers[0]!)
+        fireEvent.click(screen.getByRole('button', { name: 'emoji1' }))
       })
 
       const okButton = screen.getByText(/OK/i)
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx
index d8cdc56849..56551be922 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx
@@ -146,7 +146,7 @@ describe('OpeningSettingModal', () => {
       />,
     )
 
-    const closeButton = screen.getByTestId('close-modal')
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     await userEvent.click(closeButton)
 
     expect(onCancel).toHaveBeenCalled()
@@ -162,7 +162,7 @@ describe('OpeningSettingModal', () => {
       />,
     )
 
-    const closeButton = screen.getByTestId('close-modal')
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
     await userEvent.keyboard('{Enter}')
 
@@ -179,9 +179,9 @@ describe('OpeningSettingModal', () => {
       />,
     )
 
-    const closeButton = screen.getByTestId('close-modal')
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
-    fireEvent.keyDown(closeButton, { key: ' ' })
+    await userEvent.keyboard(' ')
 
     expect(onCancel).toHaveBeenCalledTimes(1)
   })
@@ -196,7 +196,7 @@ describe('OpeningSettingModal', () => {
       />,
     )
 
-    const closeButton = screen.getByTestId('close-modal')
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
     fireEvent.keyDown(closeButton, { key: 'Escape' })
 
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index f69b507115..78798d27cf 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -227,21 +227,14 @@ const OpeningSettingModal = ({
       <DialogContent className="mt-14 w-[640px] max-w-none rounded-2xl bg-components-panel-bg-blur p-6">
         <div className="mb-6 flex items-center justify-between">
           <div className="title-2xl-semi-bold text-text-primary">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
-          <div
-            className="cursor-pointer p-1"
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onCancel}
-            data-testid="close-modal"
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                onCancel()
-              }
-            }}
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
-          </div>
+            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
         <div className="mb-8 space-y-4">
           <div
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx b/web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx
index 4b26c411e3..92841a2e04 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx
@@ -120,7 +120,7 @@ describe('SettingContent', () => {
     const onClose = vi.fn()
     renderWithProvider({ onClose })
 
-    const closeIconButton = screen.getByTestId('close-setting-modal')
+    const closeIconButton = screen.getByRole('button', { name: 'common.operation.close' })
     expect(closeIconButton).toBeInTheDocument()
     if (!closeIconButton)
       throw new Error('Close icon button should exist')
@@ -134,7 +134,7 @@ describe('SettingContent', () => {
     const onClose = vi.fn()
     renderWithProvider({ onClose })
 
-    const closeIconButton = screen.getByTestId('close-setting-modal')
+    const closeIconButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeIconButton.focus()
     await userEvent.keyboard('{Enter}')
     expect(onClose).toHaveBeenCalledTimes(1)
@@ -144,9 +144,9 @@ describe('SettingContent', () => {
     const onClose = vi.fn()
     renderWithProvider({ onClose })
 
-    const closeIconButton = screen.getByTestId('close-setting-modal')
+    const closeIconButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeIconButton.focus()
-    fireEvent.keyDown(closeIconButton, { key: ' ' })
+    await userEvent.keyboard(' ')
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
@@ -154,7 +154,7 @@ describe('SettingContent', () => {
     const onClose = vi.fn()
     renderWithProvider({ onClose })
 
-    const closeIconButton = screen.getByTestId('close-setting-modal')
+    const closeIconButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeIconButton.focus()
     fireEvent.keyDown(closeIconButton, { key: 'Escape' })
 
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index 393b66ba19..10d83f3a8f 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -58,21 +58,14 @@ const SettingContent = ({
     <>
       <div className="mb-4 flex items-center justify-between">
         <div className="system-xl-semibold text-text-primary">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
-        <div
-          className="cursor-pointer p-1"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           onClick={onClose}
-          data-testid="close-setting-modal"
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              onClose()
-            }
-          }}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
       </div>
       <FileUploadSetting
         isMultiple
diff --git a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
index da4c658080..a42766c349 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx
@@ -1,5 +1,6 @@
 import type { ModerationConfig } from '@/models/debug'
 import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import * as i18n from 'react-i18next'
 import ModerationSettingModal from '../moderation-setting-modal'
 
@@ -181,10 +182,10 @@ describe('ModerationSettingModal', () => {
       />,
     )
 
-    const closeButton = document.querySelector('div[role="button"][tabindex="0"]') as HTMLElement
-    expect(closeButton)!.toBeInTheDocument()
+    const user = userEvent.setup()
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
-    fireEvent.keyDown(closeButton, { key: 'Enter' })
+    await user.keyboard('{Enter}')
 
     expect(onCancel).toHaveBeenCalledTimes(1)
   })
@@ -199,10 +200,10 @@ describe('ModerationSettingModal', () => {
       />,
     )
 
-    const closeButton = document.querySelector('div[role="button"][tabindex="0"]') as HTMLElement
-    expect(closeButton)!.toBeInTheDocument()
+    const user = userEvent.setup()
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
-    fireEvent.keyDown(closeButton, { key: ' ' })
+    await user.keyboard(' ')
 
     expect(onCancel).toHaveBeenCalledTimes(1)
   })
@@ -217,8 +218,7 @@ describe('ModerationSettingModal', () => {
       />,
     )
 
-    const closeButton = document.querySelector('div[role="button"][tabindex="0"]') as HTMLElement
-    expect(closeButton)!.toBeInTheDocument()
+    const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
     closeButton.focus()
     fireEvent.keyDown(closeButton, { key: 'Escape' })
 
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index 7522c73445..7937f05bf4 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -230,20 +230,14 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
 
         <div className="flex items-center justify-between">
           <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
-          <div
-            role="button"
-            tabIndex={0}
-            className="cursor-pointer p-1"
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
             onClick={onCancel}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                onCancel()
-              }
-            }}
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
-          </div>
+            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
         <div className="py-2">
           <div className="text-sm leading-9 font-medium text-text-primary">
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
index 27a6cd96d0..06ed515efe 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx
@@ -131,7 +131,7 @@ describe('ParamConfigContent', () => {
     it('should render audition button when language has example', () => {
       renderWithProvider()
 
-      const auditionButton = screen.queryByTestId('audition-button')
+      const auditionButton = screen.queryByRole('group', { name: /appApi\.play|play/i })
       expect(auditionButton)!.toBeInTheDocument()
     })
 
@@ -143,7 +143,7 @@ describe('ParamConfigContent', () => {
 
       renderWithProvider()
 
-      const auditionButton = screen.queryByTestId('audition-button')
+      const auditionButton = screen.queryByRole('group', { name: /appApi\.play|play/i })
       expect(auditionButton).toBeNull()
     })
 
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 24670fa748..5f3c895054 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -79,7 +79,7 @@ const VoiceParamConfig = ({
         <div className="system-xl-semibold text-text-primary">{t('voice.voiceSettings.title', { ns: 'appDebug' })}</div>
         <button
           type="button"
-          className="rounded-md p-1 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden"
+          className="rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden"
           aria-label={t('appDebug:voice.voiceSettings.close')}
           onClick={onClose}
         >
@@ -158,7 +158,11 @@ const VoiceParamConfig = ({
             </div>
           </Select>
           {languageItem?.example && (
-            <div className="h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1" data-testid="audition-button">
+            <div
+              className="h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1"
+              role="group"
+              aria-label={t('play', { ns: 'appApi', defaultValue: 'Play' })}
+            >
               <AudioBtn
                 value={languageItem?.example}
                 isAudition
diff --git a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
index 7029bc8e0a..9313efa071 100644
--- a/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/audio-preview.spec.tsx
@@ -25,16 +25,14 @@ describe('AudioPreview', () => {
   it('should render close button with icon', () => {
     render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={vi.fn()} />)
 
-    const closeIcon = screen.getByTestId('close-btn')
-    expect(closeIcon).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
   })
 
   it('should call onCancel when close button is clicked', () => {
     const onCancel = vi.fn()
     render(<AudioPreview url="https://example.com/audio.mp3" title="Test Audio" onCancel={onCancel} />)
 
-    const closeIcon = screen.getByTestId('close-btn')
-    fireEvent.click(closeIcon.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(onCancel).toHaveBeenCalled()
   })
diff --git a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
index 0430bd37f9..fc6a9d6f79 100644
--- a/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/video-preview.spec.tsx
@@ -23,18 +23,16 @@ describe('VideoPreview', () => {
   })
 
   it('should render close button with icon', () => {
-    const { getByTestId } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={vi.fn()} />)
 
-    const closeIcon = getByTestId('video-preview-close-btn')
-    expect(closeIcon).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
   })
 
   it('should call onCancel when close button is clicked', () => {
     const onCancel = vi.fn()
-    const { getByTestId } = render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />)
+    render(<VideoPreview url="https://example.com/video.mp4" title="Test Video" onCancel={onCancel} />)
 
-    const closeIcon = getByTestId('video-preview-close-btn')
-    fireEvent.click(closeIcon.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(onCancel).toHaveBeenCalled()
   })
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
index 6d38fad169..c60500bef9 100644
--- a/web/app/components/base/file-uploader/audio-preview.tsx
+++ b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { useTranslation } from 'react-i18next'
 
 type AudioPreviewProps = {
   url: string
@@ -11,6 +12,8 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   title,
   onCancel,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <Dialog
       open
@@ -37,12 +40,14 @@ const AudioPreview: FC<AudioPreviewProps> = ({
             />
           </audio>
         </div>
-        <div
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-btn" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+        </button>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index 9edd1ffed4..c8cb76b8cf 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -39,7 +39,13 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
     <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && 'p-0!')}>
       <div className="flex justify-between gap-1">
         {expanded && (
-          <div className="grow cursor-pointer py-1 system-xs-semibold-uppercase text-text-secondary" onClick={() => setExpanded(!expanded)}>{t('runDetail.fileListLabel', { ns: 'appLog' })}</div>
+          <button
+            type="button"
+            className="grow cursor-pointer border-none bg-transparent px-0 py-1 text-left system-xs-semibold-uppercase text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            onClick={() => setExpanded(!expanded)}
+          >
+            {t('runDetail.fileListLabel', { ns: 'appLog' })}
+          </button>
         )}
         {!expanded && (
           <div className="flex gap-1">
@@ -87,10 +93,15 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
             })}
           </div>
         )}
-        <div className="flex cursor-pointer items-center gap-1" onClick={() => setExpanded(!expanded)}>
+        <button
+          type="button"
+          aria-label={t('runDetail.fileListDetail', { ns: 'appLog' })}
+          className="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={() => setExpanded(!expanded)}
+        >
           {!expanded && <div className="system-xs-medium-uppercase text-text-tertiary">{t('runDetail.fileListDetail', { ns: 'appLog' })}</div>}
-          <RiArrowRightSLine className={cn('h-4 w-4 text-text-tertiary', expanded && 'rotate-90')} />
-        </div>
+          <RiArrowRightSLine className={cn('h-4 w-4 text-text-tertiary', expanded && 'rotate-90')} aria-hidden="true" />
+        </button>
       </div>
       {expanded && (
         <div className="flex flex-col gap-3">
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
index 183313cd91..83ab265084 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/__tests__/file-item.spec.tsx
@@ -191,8 +191,8 @@ describe('FileInAttachmentItem', () => {
     expect(previewContainer)!.toBeInTheDocument()
 
     // Close button is the last clickable div with an SVG in the preview container
-    const closeIcon = screen.getByTestId('image-preview-close-button')
-    fireEvent.click(closeIcon.parentElement!)
+    const closeIcon = screen.getByRole('button', { name: 'common.operation.cancel' })
+    fireEvent.click(closeIcon)
 
     // Preview should be removed
     // Preview should be removed
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
index c84d9e3d69..983bdf9393 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-image-item.spec.tsx
@@ -44,16 +44,14 @@ describe('FileImageItem', () => {
   it('should render delete button when showDeleteAction is true', () => {
     render(<FileImageItem file={createFile()} showDeleteAction />)
 
-    const buttons = screen.getAllByRole('button')
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByRole('button', { name: 'common.operation.remove' })).toBeInTheDocument()
   })
 
   it('should call onRemove when delete button is clicked', () => {
     const onRemove = vi.fn()
     render(<FileImageItem file={createFile()} showDeleteAction onRemove={onRemove} />)
 
-    const buttons = screen.getAllByRole('button')
-    fireEvent.click(buttons[0]!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
 
     expect(onRemove).toHaveBeenCalledWith('file-1')
   })
@@ -69,21 +67,18 @@ describe('FileImageItem', () => {
   })
 
   it('should render replay icon when upload failed', () => {
-    const { container } = render(<FileImageItem file={createFile({ progress: -1 })} />)
+    render(<FileImageItem file={createFile({ progress: -1 })} />)
 
-    // ReplayLine renders as an SVG icon with data-icon attribute
-    const replaySvg = container.querySelector('svg[data-icon="ReplayLine"]')
-    expect(replaySvg)!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.retry' })).toBeInTheDocument()
   })
 
   it('should call onReUpload when replay icon is clicked', () => {
     const onReUpload = vi.fn()
-    const { container } = render(
+    render(
       <FileImageItem file={createFile({ progress: -1 })} onReUpload={onReUpload} />,
     )
 
-    const replaySvg = container.querySelector('svg[data-icon="ReplayLine"]')
-    fireEvent.click(replaySvg!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.retry' }))
 
     expect(onReUpload).toHaveBeenCalledWith('file-1')
   })
@@ -118,30 +113,23 @@ describe('FileImageItem', () => {
     expect(previewContainer)!.toBeInTheDocument()
 
     // Close button is the last clickable div with an SVG in the preview container
-    const closeIcon = screen.getByTestId('image-preview-close-button')
-    fireEvent.click(closeIcon.parentElement!)
+    const closeIcon = screen.getByRole('button', { name: 'common.operation.cancel' })
+    fireEvent.click(closeIcon)
 
     expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
   })
 
   it('should render download overlay when showDownloadAction is true', () => {
-    const { container } = render(<FileImageItem file={createFile()} showDownloadAction />)
+    render(<FileImageItem file={createFile()} showDownloadAction />)
 
-    // The download icon SVG should be present
-    const svgs = container.querySelectorAll('svg')
-    expect(svgs.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByRole('button', { name: 'common.operation.download' })).toBeInTheDocument()
   })
 
   it('should call downloadUrl when download button is clicked', async () => {
     const { downloadUrl } = await import('@/utils/download')
-    const { container } = render(<FileImageItem file={createFile()} showDownloadAction />)
+    render(<FileImageItem file={createFile()} showDownloadAction />)
 
-    // Find the RiDownloadLine SVG (it doesn't have data-icon attribute, unlike ReplayLine)
-    const svgs = container.querySelectorAll('svg')
-    const downloadSvg = Array.from(svgs).find(
-      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
-    )
-    fireEvent.click(downloadSvg!.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.download' }))
 
     expect(downloadUrl).toHaveBeenCalled()
   })
@@ -169,15 +157,9 @@ describe('FileImageItem', () => {
   it('should use url with attachment param for download_url when url is available', async () => {
     const { downloadUrl } = await import('@/utils/download')
     const file = createFile({ url: 'https://example.com/photo.png' })
-    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+    render(<FileImageItem file={file} showDownloadAction />)
 
-    // The download SVG should be rendered
-    const svgs = container.querySelectorAll('svg')
-    expect(svgs.length).toBeGreaterThanOrEqual(1)
-    const downloadSvg = Array.from(svgs).find(
-      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
-    )
-    fireEvent.click(downloadSvg!.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.download' }))
     expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
       url: expect.stringContaining('as_attachment=true'),
     }))
@@ -186,13 +168,9 @@ describe('FileImageItem', () => {
   it('should use base64Url for download_url when url is not available', async () => {
     const { downloadUrl } = await import('@/utils/download')
     const file = createFile({ url: undefined, base64Url: 'data:image/png;base64,abc' })
-    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+    render(<FileImageItem file={file} showDownloadAction />)
 
-    const svgs = container.querySelectorAll('svg')
-    const downloadSvg = Array.from(svgs).find(
-      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
-    )
-    fireEvent.click(downloadSvg!.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.download' }))
 
     expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
       url: 'data:image/png;base64,abc',
@@ -223,37 +201,6 @@ describe('FileImageItem', () => {
     const img = screen.getByRole('img')
     fireEvent.click(img.parentElement!)
 
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
-    // Preview won't show because imagePreviewUrl is empty string (falsy)
     // Preview won't show because imagePreviewUrl is empty string (falsy)
     expect(document.querySelector('.image-preview-container')).not.toBeInTheDocument()
   })
@@ -261,13 +208,9 @@ describe('FileImageItem', () => {
   it('should call downloadUrl with correct params when download button is clicked', async () => {
     const { downloadUrl } = await import('@/utils/download')
     const file = createFile({ url: 'https://example.com/photo.png', name: 'photo.png' })
-    const { container } = render(<FileImageItem file={file} showDownloadAction />)
+    render(<FileImageItem file={file} showDownloadAction />)
 
-    const svgs = container.querySelectorAll('svg')
-    const downloadSvg = Array.from(svgs).find(
-      svg => !svg.hasAttribute('data-icon') && !svg.querySelector('circle'),
-    )
-    fireEvent.click(downloadSvg!.parentElement!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.download' }))
 
     expect(downloadUrl).toHaveBeenCalledWith(expect.objectContaining({
       url: expect.stringContaining('as_attachment=true'),
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
index 00dd7d9971..0a1902c9c5 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
@@ -61,14 +61,13 @@ describe('FileItem (chat-input)', () => {
   it('should render delete button when showDeleteAction is true', () => {
     render(<FileItem file={createFile()} showDeleteAction />)
 
-    const buttons = screen.getAllByRole('button')
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByRole('button', { name: 'common.operation.remove' })).toBeInTheDocument()
   })
 
   it('should call onRemove when delete button is clicked', () => {
     const onRemove = vi.fn()
     render(<FileItem file={createFile()} showDeleteAction onRemove={onRemove} />)
-    const delete_button = screen.getByTestId('delete-button')
+    const delete_button = screen.getByRole('button', { name: 'common.operation.remove' })
     fireEvent.click(delete_button)
     expect(onRemove).toHaveBeenCalledWith('file-1')
   })
@@ -85,8 +84,7 @@ describe('FileItem (chat-input)', () => {
   it('should render replay icon when upload failed', () => {
     render(<FileItem file={createFile({ progress: -1 })} />)
 
-    const replayIcon = screen.getByTestId('replay-icon')
-    expect(replayIcon).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.retry' })).toBeInTheDocument()
   })
 
   it('should call onReUpload when replay icon is clicked', () => {
@@ -95,7 +93,7 @@ describe('FileItem (chat-input)', () => {
       <FileItem file={createFile({ progress: -1 })} onReUpload={onReUpload} />,
     )
 
-    const replayIcon = screen.getByTestId('replay-icon')
+    const replayIcon = screen.getByRole('button', { name: 'common.operation.retry' })
     fireEvent.click(replayIcon!)
 
     expect(onReUpload).toHaveBeenCalledWith('file-1')
@@ -176,7 +174,7 @@ describe('FileItem (chat-input)', () => {
     fireEvent.click(screen.getByText(/audio\.mp3/i))
     expect(document.querySelector('audio')).toBeInTheDocument()
 
-    const deleteButton = screen.getByTestId('close-btn')
+    const deleteButton = screen.getByRole('button', { name: 'common.operation.close' })
     fireEvent.click(deleteButton)
 
     expect(document.querySelector('audio')).not.toBeInTheDocument()
@@ -185,15 +183,14 @@ describe('FileItem (chat-input)', () => {
   it('should render download button when showDownloadAction is true and url exists', () => {
     render(<FileItem file={createFile()} showDownloadAction />)
 
-    const buttons = screen.getAllByRole('button')
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByRole('button', { name: 'common.operation.download' })).toBeInTheDocument()
   })
 
   it('should call downloadUrl when download button is clicked', async () => {
     const { downloadUrl } = await import('@/utils/download')
     render(<FileItem file={createFile()} showDownloadAction />)
 
-    const downloadBtn = screen.getByTestId('download-button')
+    const downloadBtn = screen.getByRole('button', { name: 'common.operation.download' })
     fireEvent.click(downloadBtn)
 
     expect(downloadUrl).toHaveBeenCalled()
@@ -252,7 +249,7 @@ describe('FileItem (chat-input)', () => {
     fireEvent.click(screen.getByText(/video\.mp4/i))
     expect(document.querySelector('video')).toBeInTheDocument()
 
-    const closeBtn = screen.getByTestId('video-preview-close-btn')
+    const closeBtn = screen.getByRole('button', { name: 'common.operation.close' })
     fireEvent.click(closeBtn)
 
     expect(document.querySelector('video')).not.toBeInTheDocument()
@@ -334,8 +331,7 @@ describe('FileItem (chat-input)', () => {
       />,
     )
 
-    const buttons = screen.getAllByRole('button')
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByRole('button', { name: 'common.operation.download' })).toBeInTheDocument()
   })
 
   it('should not render extension separator when ext is empty', () => {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 14e4ef30b4..485a351e55 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -5,6 +5,7 @@ import {
   RiDownloadLine,
 } from '@remixicon/react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
@@ -30,6 +31,7 @@ const FileImageItem = ({
   onRemove,
   onReUpload,
 }: FileImageItemProps) => {
+  const { t } = useTranslation()
   const { id, progress, base64Url, url, name } = file
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
   const download_url = url ? `${url}&as_attachment=true` : base64Url
@@ -43,10 +45,14 @@ const FileImageItem = ({
         {
           showDeleteAction && (
             <Button
+              aria-label={t('operation.remove', { ns: 'common' })}
               className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
-              onClick={() => onRemove?.(id)}
+              onClick={(e) => {
+                e.stopPropagation()
+                onRemove?.(id)
+              }}
             >
-              <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
+              <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" aria-hidden="true" />
             </Button>
           )
         }
@@ -71,25 +77,34 @@ const FileImageItem = ({
         {
           progress === -1 && (
             <div className="absolute inset-0 z-10 flex items-center justify-center border-2 border-state-destructive-border bg-background-overlay-destructive">
-              <ReplayLine
-                className="h-5 w-5"
-                onClick={() => onReUpload?.(id)}
-              />
+              <button
+                type="button"
+                aria-label={t('operation.retry', { ns: 'common' })}
+                className="h-5 w-5 border-none bg-transparent p-0"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onReUpload?.(id)
+                }}
+              >
+                <ReplayLine className="h-5 w-5" aria-hidden="true" />
+              </button>
             </div>
           )
         }
         {
           showDownloadAction && (
             <div className="absolute inset-0.5 z-10 hidden bg-background-overlay-alt group-hover/file-image:block">
-              <div
-                className="absolute right-0.5 bottom-0.5 flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
+              <button
+                type="button"
+                aria-label={t('operation.download', { ns: 'common' })}
+                className="absolute right-0.5 bottom-0.5 flex h-6 w-6 items-center justify-center rounded-lg border-none bg-components-actionbar-bg p-0 shadow-md"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
               >
-                <RiDownloadLine className="h-4 w-4 text-text-tertiary" />
-              </div>
+                <RiDownloadLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              </button>
             </div>
           )
         }
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 3dae5f60f8..ee65a79f6d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -2,6 +2,7 @@ import type { FileEntity } from '../types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
 import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
@@ -32,6 +33,7 @@ const FileItem = ({
   onReUpload,
   canPreview,
 }: FileItemProps) => {
+  const { t } = useTranslation()
   const { id, name, type, progress, url, base64Url, isRemote } = file
   const [previewUrl, setPreviewUrl] = useState('')
   const ext = getFileExtension(name, type, isRemote)
@@ -56,11 +58,11 @@ const FileItem = ({
         {
           showDeleteAction && (
             <Button
+              aria-label={t('operation.remove', { ns: 'common' })}
               className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
               onClick={() => onRemove?.(id)}
-              data-testid="delete-button"
             >
-              <span className="i-ri-close-line h-4 w-4 text-components-button-secondary-text" />
+              <span className="i-ri-close-line h-4 w-4 text-components-button-secondary-text" aria-hidden="true" />
             </Button>
           )
         }
@@ -93,15 +95,15 @@ const FileItem = ({
           {
             showDownloadAction && download_url && (
               <ActionButton
+                aria-label={t('operation.download', { ns: 'common' })}
                 size="m"
                 className="absolute -top-1 -right-1 hidden group-hover/file-item:flex"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
                 }}
-                data-testid="download-button"
               >
-                <span className="i-ri-download-line h-3.5 w-3.5 text-text-tertiary" />
+                <span className="i-ri-download-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
               </ActionButton>
             )
           }
@@ -116,7 +118,14 @@ const FileItem = ({
           }
           {
             uploadError && (
-              <span className="i-custom-vender-other-replay-line h-4 w-4 cursor-pointer text-text-tertiary" onClick={() => onReUpload?.(id)} data-testid="replay-icon" role="button" tabIndex={0} />
+              <button
+                type="button"
+                aria-label={t('operation.retry', { ns: 'common' })}
+                className="h-4 w-4 cursor-pointer border-none bg-transparent p-0 text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={() => onReUpload?.(id)}
+              >
+                <span className="i-custom-vender-other-replay-line block h-4 w-4" aria-hidden="true" />
+              </button>
             )
           }
         </div>
diff --git a/web/app/components/base/file-uploader/video-preview.tsx b/web/app/components/base/file-uploader/video-preview.tsx
index 986bf61dce..c42fed42bf 100644
--- a/web/app/components/base/file-uploader/video-preview.tsx
+++ b/web/app/components/base/file-uploader/video-preview.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { useTranslation } from 'react-i18next'
 
 type VideoPreviewProps = {
   url: string
@@ -11,6 +12,8 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   title,
   onCancel,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <Dialog
       open
@@ -37,12 +40,14 @@ const VideoPreview: FC<VideoPreviewProps> = ({
             />
           </video>
         </div>
-        <div
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="video-preview-close-btn" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+        </button>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/app/components/base/float-right-container/__tests__/index.spec.tsx b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
index 4466b2cadc..6f84e5afd8 100644
--- a/web/app/components/base/float-right-container/__tests__/index.spec.tsx
+++ b/web/app/components/base/float-right-container/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ describe('FloatRightContainer', () => {
       )
 
       await screen.findByRole('dialog')
-      const closeIcon = screen.getByTestId('close-icon')
+      const closeIcon = screen.getByRole('button', { name: 'common.operation.close' })
       expect(closeIcon).toBeInTheDocument()
 
       await userEvent.click(closeIcon)
diff --git a/web/app/components/base/float-right-container/index.tsx b/web/app/components/base/float-right-container/index.tsx
index db3b73da95..ee79b22226 100644
--- a/web/app/components/base/float-right-container/index.tsx
+++ b/web/app/components/base/float-right-container/index.tsx
@@ -63,7 +63,6 @@ const FloatRightContainer = ({
                         <DrawerCloseButton
                           aria-label={t('operation.close', { ns: 'common' })}
                           className="h-6 w-6 rounded-md"
-                          data-testid="close-icon"
                         />
                       )}
                     </div>
diff --git a/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx b/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
index 6005d9261b..d5e5a6d25c 100644
--- a/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/checkbox.spec.tsx
@@ -21,7 +21,7 @@ describe('CheckboxField', () => {
   it('should toggle on when unchecked users click the checkbox', () => {
     mockField.state.value = false
     render(<CheckboxField label="Enable feature" />)
-    fireEvent.click(screen.getByTestId('checkbox-checkbox-field'))
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Enable feature' }))
     expect(mockField.handleChange).toHaveBeenCalledWith(true)
   })
 
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
index cd5b95f2fa..29ba50d56b 100644
--- a/web/app/components/base/form/components/field/checkbox.tsx
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -19,6 +19,7 @@ const CheckboxField = ({
         <Checkbox
           id={field.name}
           checked={field.state.value}
+          ariaLabel={label}
           onCheck={() => {
             field.handleChange(!field.state.value)
           }}
diff --git a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
index da15c1c339..5608e1cabb 100644
--- a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
@@ -35,8 +35,7 @@ describe('AudioPreview', () => {
 
     it('should render close button', () => {
       render(<AudioPreview {...defaultProps} />)
-      const closeBtn = screen.getByTestId('close-preview')
-      expect(closeBtn).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
 
     it('should render via portal into document.body', () => {
@@ -78,7 +77,7 @@ describe('AudioPreview', () => {
       const onCancel = vi.fn()
       render(<AudioPreview {...defaultProps} onCancel={onCancel} />)
 
-      const closeBtn = screen.getByTestId('close-preview')
+      const closeBtn = screen.getByRole('button', { name: 'common.operation.close' })
       await user.click(closeBtn)
 
       expect(onCancel).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/base/image-uploader/__tests__/image-list.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-list.spec.tsx
index 44353ca19f..feb4294643 100644
--- a/web/app/components/base/image-uploader/__tests__/image-list.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-list.spec.tsx
@@ -31,7 +31,7 @@ describe('ImageList', () => {
   describe('Rendering', () => {
     it('should render without crashing with empty list', () => {
       render(<ImageList list={[]} />)
-      expect(screen.getByTestId('image-list')).toBeInTheDocument()
+      expect(screen.getByRole('list', { name: 'common.imageUploader.imageList' })).toBeInTheDocument()
     })
 
     it('should render images for each item in the list', () => {
@@ -73,7 +73,7 @@ describe('ImageList', () => {
       const list = [createLocalFile({ _id: 'file-1' })]
       render(<ImageList list={list} onRemove={vi.fn()} />)
 
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.remove' })).toBeInTheDocument()
     })
 
     it('should not show remove buttons when readonly', () => {
@@ -104,7 +104,7 @@ describe('ImageList', () => {
       const list = [createLocalFile({ _id: 'file-1', progress: -1 })]
       render(<ImageList list={list} onReUpload={onReUpload} />)
 
-      expect(screen.getByTestId('retry-icon')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.retry' })).toBeInTheDocument()
       expect(screen.queryByText(/\d+\s*%/)).not.toBeInTheDocument()
     })
   })
@@ -150,8 +150,7 @@ describe('ImageList', () => {
       const onReUpload = vi.fn()
       const list = [createLocalFile({ _id: 'file-1', progress: -1 })]
       render(<ImageList list={list} onReUpload={onReUpload} />)
-      const retryIcon = screen.getByTestId('retry-icon')
-      await user.click(retryIcon)
+      await user.click(screen.getByRole('button', { name: 'common.operation.retry' }))
       expect(onReUpload).toHaveBeenCalledWith('file-1')
     })
 
@@ -186,7 +185,7 @@ describe('ImageList', () => {
       expect(screen.queryByTestId('image-preview-container')).toBeInTheDocument()
 
       // Close preview
-      const closeButton = screen.getByTestId('image-preview-close-button')
+      const closeButton = screen.getByRole('button', { name: 'common.operation.cancel' })
       await user.click(closeButton)
       expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
     })
diff --git a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
index 48db2df3d2..b82075fdd7 100644
--- a/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/image-preview.spec.tsx
@@ -28,12 +28,12 @@ vi.mock('@/utils/download', () => ({
 }))
 
 const getOverlay = () => screen.getByTestId('image-preview-container') as HTMLDivElement
-const getCloseButton = () => screen.getByTestId('image-preview-close-button') as HTMLDivElement
-const getCopyButton = () => screen.getByTestId('image-preview-copy-button') as HTMLDivElement
-const getZoomOutButton = () => screen.getByTestId('image-preview-zoom-out-button') as HTMLDivElement
-const getZoomInButton = () => screen.getByTestId('image-preview-zoom-in-button') as HTMLDivElement
-const getDownloadButton = () => screen.getByTestId('image-preview-download-button') as HTMLDivElement
-const getOpenInTabButton = () => screen.getByTestId('image-preview-open-in-tab-button') as HTMLDivElement
+const getCloseButton = () => screen.getByRole('button', { name: 'common.operation.cancel' }) as HTMLButtonElement
+const getCopyButton = () => screen.getByRole('button', { name: 'common.operation.copyImage' }) as HTMLButtonElement
+const getZoomOutButton = () => screen.getByRole('button', { name: 'common.operation.zoomOut' }) as HTMLButtonElement
+const getZoomInButton = () => screen.getByRole('button', { name: 'common.operation.zoomIn' }) as HTMLButtonElement
+const getDownloadButton = () => screen.getByRole('button', { name: 'common.operation.download' }) as HTMLButtonElement
+const getOpenInTabButton = () => screen.getByRole('button', { name: 'common.operation.openInNewTab' }) as HTMLButtonElement
 
 const base64Image = 'aGVsbG8='
 const dataImage = `data:image/png;base64,${base64Image}`
diff --git a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
index 90d7e1ea8f..4b98b4af9c 100644
--- a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
+++ b/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import VideoPreview from '../video-preview'
 
 const getOverlay = () => screen.getByTestId('video-preview')
-const getCloseButton = () => screen.getByTestId('close-button')
+const getCloseButton = () => screen.getByRole('button', { name: 'common.operation.close' })
 describe('VideoPreview', () => {
   const defaultProps = {
     url: 'https://example.com/video.mp4',
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
index 4f7dd83400..d5e15fd3bf 100644
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ b/web/app/components/base/image-uploader/audio-preview.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { useTranslation } from 'react-i18next'
 
 type AudioPreviewProps = {
   url: string
@@ -11,6 +12,8 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   title,
   onCancel,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <Dialog
       open
@@ -38,13 +41,14 @@ const AudioPreview: FC<AudioPreviewProps> = ({
             />
           </audio>
         </div>
-        <div
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
           onClick={onCancel}
-          data-testid="close-preview"
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+        </button>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 2e56b88f65..a149d675d2 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -43,10 +43,11 @@ const ImageList: FC<ImageListProps> = ({
   }
 
   return (
-    <div className="flex flex-wrap" data-testid="image-list">
+    <div className="flex flex-wrap" role="list" aria-label={t('imageUploader.imageList', { ns: 'common' })}>
       {list.map(item => (
         <div
           key={item._id}
+          role="listitem"
           className="group relative mr-1 rounded-lg border-[0.5px] border-black/5"
         >
           {item.type === TransferMethod.local_file && item.progress !== 100 && (
@@ -56,7 +57,14 @@ const ImageList: FC<ImageListProps> = ({
                 style={{ left: item.progress > -1 ? `${item.progress}%` : 0 }}
               >
                 {item.progress === -1 && (
-                  <span className="i-custom-vender-line-arrows-refresh-ccw-01 h-5 w-5 text-white" onClick={() => onReUpload?.(item._id)} data-testid="retry-icon" />
+                  <button
+                    type="button"
+                    aria-label={t('operation.retry', { ns: 'common' })}
+                    className="h-5 w-5 border-none bg-transparent p-0 text-white focus-visible:ring-1 focus-visible:ring-white focus-visible:outline-hidden"
+                    onClick={() => onReUpload?.(item._id)}
+                  >
+                    <span className="i-custom-vender-line-arrows-refresh-ccw-01 h-5 w-5" aria-hidden="true" />
+                  </button>
                 )}
               </div>
               {item.progress > -1 && (
@@ -117,14 +125,14 @@ const ImageList: FC<ImageListProps> = ({
             <button
               type="button"
               className={cn(
-                'absolute -top-[9px] -right-[9px] z-10 h-[18px] w-[18px] items-center justify-center',
+                'absolute -top-[9px] -right-[9px] z-10 h-[18px] w-[18px] items-center justify-center border-none bg-transparent p-0',
                 'rounded-2xl shadow-lg hover:bg-state-base-hover',
                 item.progress === -1 ? 'flex' : 'hidden group-hover:flex',
               )}
               onClick={() => onRemove?.(item._id)}
-              data-testid="remove-button"
+              aria-label={t('operation.remove', { ns: 'common' })}
             >
-              <span className="i-ri-close-line h-3 w-3 text-text-tertiary" />
+              <span className="i-ri-close-line h-3 w-3 text-text-tertiary" aria-hidden="true" />
             </button>
           )}
         </div>
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index 071188bf12..1400ac111f 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -227,8 +227,8 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 onClick={imageCopy}
               >
                 {isCopied
-                  ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" data-testid="image-preview-copied-icon" />
-                  : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" data-testid="image-preview-copy-button" />}
+                  ? <span className="i-ri-file-copy-line h-4 w-4 text-green-500" aria-hidden="true" />
+                  : <span className="i-ri-file-copy-line h-4 w-4 text-gray-500" aria-hidden="true" />}
               </button>
             )}
           />
@@ -245,7 +245,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 className="absolute top-6 right-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={zoomOut}
               >
-                <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-out-button" />
+                <span className="i-ri-zoom-out-line h-4 w-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -262,7 +262,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 className="absolute top-6 right-32 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={zoomIn}
               >
-                <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" data-testid="image-preview-zoom-in-button" />
+                <span className="i-ri-zoom-in-line h-4 w-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -279,7 +279,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 className="absolute top-6 right-24 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={downloadImage}
               >
-                <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" data-testid="image-preview-download-button" />
+                <span className="i-ri-download-cloud-2-line h-4 w-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -296,7 +296,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 className="absolute top-6 right-16 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
                 onClick={openInNewTab}
               >
-                <span className="i-ri-add-box-line h-4 w-4 text-gray-500" data-testid="image-preview-open-in-tab-button" />
+                <span className="i-ri-add-box-line h-4 w-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
@@ -313,7 +313,7 @@ const ImagePreview: FC<ImagePreviewProps> = ({
                 className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/8 backdrop-blur-[2px]"
                 onClick={onCancel}
               >
-                <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="image-preview-close-button" />
+                <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
               </button>
             )}
           />
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
index 8d5cb4dab3..c7302d700f 100644
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ b/web/app/components/base/image-uploader/video-preview.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { useTranslation } from 'react-i18next'
 
 type VideoPreviewProps = {
   url: string
@@ -11,6 +12,8 @@ const VideoPreview: FC<VideoPreviewProps> = ({
   title,
   onCancel,
 }) => {
+  const { t } = useTranslation()
+
   return (
     <Dialog
       open
@@ -38,12 +41,14 @@ const VideoPreview: FC<VideoPreviewProps> = ({
             />
           </video>
         </div>
-        <div
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-white/[0.08] backdrop-blur-[2px]"
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/[0.08] p-0 backdrop-blur-[2px]"
           onClick={onCancel}
         >
-          <span className="i-ri-close-line h-4 w-4 text-gray-500" data-testid="close-button" />
-        </div>
+          <span className="i-ri-close-line h-4 w-4 text-gray-500" aria-hidden="true" />
+        </button>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/app/components/base/input-with-copy/__tests__/index.spec.tsx b/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
index 33ebec5cbc..b985a0f018 100644
--- a/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
+++ b/web/app/components/base/input-with-copy/__tests__/index.spec.tsx
@@ -163,13 +163,8 @@ describe('InputWithCopy component', () => {
     const mockOnChange = vi.fn()
     render(<InputWithCopy value="test value" onChange={mockOnChange} />)
 
-    // The tooltip content should use the 'copied' translation
-    const copyButton = screen.getByRole('button')
+    const copyButton = screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copied' })
     expect(copyButton).toBeInTheDocument()
-
-    // Verify the filled clipboard icon is rendered (not the line variant)
-    const filledIcon = screen.getByTestId('copied-icon')
-    expect(filledIcon).toBeInTheDocument()
   })
 
   it('shows copy tooltip text when copied state is false', () => {
@@ -177,20 +172,16 @@ describe('InputWithCopy component', () => {
     const mockOnChange = vi.fn()
     render(<InputWithCopy value="test value" onChange={mockOnChange} />)
 
-    const copyButton = screen.getByRole('button')
+    const copyButton = screen.getByRole('button', { name: 'appOverview.overview.appInfo.embedded.copy' })
     expect(copyButton).toBeInTheDocument()
-
-    const lineIcon = screen.getByTestId('copy-icon')
-    expect(lineIcon).toBeInTheDocument()
   })
 
   it('calls reset on mouse leave from copy button wrapper', () => {
     const mockOnChange = vi.fn()
     render(<InputWithCopy value="test value" onChange={mockOnChange} />)
 
-    const wrapper = screen.getByTestId('copy-button-wrapper')
-    expect(wrapper).toBeInTheDocument()
-    fireEvent.mouseLeave(wrapper)
+    const copyButton = screen.getByRole('button')
+    fireEvent.mouseLeave(copyButton)
 
     expect(mockReset).toHaveBeenCalled()
   })
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 38a7ceed9c..7e1ee60331 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -61,8 +61,6 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>((
       {showCopyButton && (
         <div
           className="absolute top-1/2 right-2 -translate-y-1/2"
-          onMouseLeave={reset}
-          data-testid="copy-button-wrapper"
         >
           <Tooltip>
             <TooltipTrigger
@@ -71,11 +69,12 @@ const InputWithCopy = React.forwardRef<HTMLInputElement, InputWithCopyProps>((
                   size="xs"
                   aria-label={safeTooltipText}
                   onClick={handleCopy}
+                  onMouseLeave={reset}
                   className="hover:bg-components-button-ghost-bg-hover"
                 >
                   {copied
-                    ? (<span className="i-ri-clipboard-fill h-3.5 w-3.5 text-text-tertiary" data-testid="copied-icon" />)
-                    : (<span className="i-ri-clipboard-line h-3.5 w-3.5 text-text-tertiary" data-testid="copy-icon" />)}
+                    ? (<span className="i-ri-clipboard-fill h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />)
+                    : (<span className="i-ri-clipboard-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />)}
                 </ActionButton>
               )}
             />
diff --git a/web/app/components/base/input/__tests__/index.spec.tsx b/web/app/components/base/input/__tests__/index.spec.tsx
index 7dc5d22eab..90bac0095f 100644
--- a/web/app/components/base/input/__tests__/index.spec.tsx
+++ b/web/app/components/base/input/__tests__/index.spec.tsx
@@ -66,7 +66,7 @@ describe('Input component', () => {
   it('calls onClear when clear icon is clicked', () => {
     const onClear = vi.fn()
     render(<Input showClearIcon value="test" onClear={onClear} />)
-    const clearIconContainer = screen.getByTestId('input-clear')
+    const clearIconContainer = screen.getByRole('button', { name: 'common.operation.clear' })
     fireEvent.click(clearIconContainer!)
     expect(onClear).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index d41cd2c0cf..deeca1e3c4 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -109,13 +109,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
         {...props}
       />
       {!!(showClearIcon && value && !disabled && !destructive) && (
-        <div
-          className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer p-px')}
+        <button
+          type="button"
+          aria-label={t('operation.clear', { ns: 'common' })}
+          className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer border-none bg-transparent p-px')}
           onClick={onClear}
-          data-testid="input-clear"
         >
-          <span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" />
-        </div>
+          <span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" aria-hidden="true" />
+        </button>
       )}
       {destructive && (
         <span className="absolute top-1/2 right-2 i-ri-error-warning-line h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
diff --git a/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx b/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
index ebf70b6b77..f5a685a2e6 100644
--- a/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
+++ b/web/app/components/base/markdown-blocks/__tests__/form.spec.tsx
@@ -369,8 +369,8 @@ describe('MarkdownForm', () => {
 
       render(<MarkdownForm node={node} />)
 
-      const clearIcon = screen.getByTestId('date-picker-clear-button')
-      await user.click(clearIcon)
+      const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
+      await user.click(clearButton)
 
       await user.click(screen.getByRole('button', { name: 'Submit' }))
 
diff --git a/web/app/components/base/mermaid/__tests__/index.spec.tsx b/web/app/components/base/mermaid/__tests__/index.spec.tsx
index 310f346083..14c178e418 100644
--- a/web/app/components/base/mermaid/__tests__/index.spec.tsx
+++ b/web/app/components/base/mermaid/__tests__/index.spec.tsx
@@ -414,7 +414,7 @@ describe('Mermaid Flowchart Component', () => {
       })
 
       // Wait for image preview to appear
-      const cancelBtn = await screen.findByTestId('image-preview-close-button')
+      const cancelBtn = await screen.findByRole('button', { name: 'common.operation.cancel' })
       expect(cancelBtn).toBeInTheDocument()
 
       await act(async () => {
@@ -423,7 +423,7 @@ describe('Mermaid Flowchart Component', () => {
 
       await waitFor(() => {
         expect(screen.queryByTestId('image-preview-container')).not.toBeInTheDocument()
-        expect(screen.queryByTestId('image-preview-close-button')).not.toBeInTheDocument()
+        expect(screen.queryByRole('button', { name: 'common.operation.cancel' })).not.toBeInTheDocument()
       })
     })
 
diff --git a/web/app/components/base/message-log-modal/__tests__/index.spec.tsx b/web/app/components/base/message-log-modal/__tests__/index.spec.tsx
index 525f190743..49f2970654 100644
--- a/web/app/components/base/message-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/message-log-modal/__tests__/index.spec.tsx
@@ -91,7 +91,7 @@ describe('MessageLogModal', () => {
   describe('Interaction', () => {
     it('calls onCancel when close icon is clicked', () => {
       render(<MessageLogModal width={800} onCancel={onCancel} currentLogItem={mockLog} />)
-      const closeButton = screen.getByTestId('close-button')
+      const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
       expect(closeButton)!.toBeInTheDocument()
       fireEvent.click(closeButton)
       expect(onCancel).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 2d8d1dec66..9a58a0213d 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -58,9 +58,14 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
       ref={ref}
     >
       <h1 className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.title', { ns: 'appLog' })}</h1>
-      <span className="absolute top-4 right-3 z-20 cursor-pointer p-1" onClick={onCancel} data-testid="close-button">
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </span>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onCancel}
+      >
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+      </button>
       <Run
         hideResult
         activeTab={defaultTab as any}
diff --git a/web/app/components/base/new-audio-button/index.tsx b/web/app/components/base/new-audio-button/index.tsx
index 56ada77df6..d9da5fd286 100644
--- a/web/app/components/base/new-audio-button/index.tsx
+++ b/web/app/components/base/new-audio-button/index.tsx
@@ -88,10 +88,11 @@ const AudioBtn = ({
                   ? ActionButtonState.Active
                   : ActionButtonState.Default
               }
+              aria-label={tooltipContent}
               onClick={handleToggle}
               disabled={audioState === 'loading'}
             >
-              <RiVolumeUpLine className="h-4 w-4" />
+              <RiVolumeUpLine className="h-4 w-4" aria-hidden="true" />
             </ActionButton>
           </span>
         )}
diff --git a/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx b/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
index 54e33b8fbe..07459d0361 100644
--- a/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
+++ b/web/app/components/base/notion-page-selector/__tests__/base.spec.tsx
@@ -148,11 +148,11 @@ describe('NotionPageSelector Base', () => {
     const user = userEvent.setup()
     render(<NotionPageSelector credentialList={mockCredentialList} onSelect={vi.fn()} />)
 
-    const searchInput = screen.getByTestId('notion-search-input')
+    const searchInput = screen.getByPlaceholderText('common.dataSource.notion.selector.searchPages')
     await user.type(searchInput, 'no-such-page')
     expect(screen.getByText('common.dataSource.notion.selector.noSearchResult')).toBeInTheDocument()
 
-    await user.click(screen.getByTestId('notion-search-input-clear'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
     expect(screen.getByTestId('notion-page-name-root-1')).toBeInTheDocument()
   })
 
@@ -170,7 +170,7 @@ describe('NotionPageSelector Base', () => {
       />,
     )
 
-    const selectorBtn = screen.getByTestId('notion-credential-selector-btn')
+    const selectorBtn = screen.getByRole('combobox', { name: /Workspace 1/ })
     await user.click(selectorBtn)
     const item2 = screen.getByTestId('notion-credential-item-c2')
     await user.click(item2)
diff --git a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
index f1f1cf08d2..5ad5f63840 100644
--- a/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-page-selector/credential-selector/__tests__/index.spec.tsx
@@ -32,7 +32,7 @@ describe('CredentialSelector', () => {
     const user = userEvent.setup()
     render(<CredentialSelector value="1" items={mockItems} onSelect={vi.fn()} />)
 
-    const btn = screen.getByTestId('notion-credential-selector-btn')
+    const btn = screen.getByRole('combobox', { name: /Notion Workspace 1/ })
     await user.click(btn)
 
     expect(screen.getByTestId('notion-credential-item-1')).toBeInTheDocument()
@@ -44,7 +44,7 @@ describe('CredentialSelector', () => {
     const user = userEvent.setup()
     render(<CredentialSelector value="1" items={mockItems} onSelect={handleSelect} />)
 
-    const btn = screen.getByTestId('notion-credential-selector-btn')
+    const btn = screen.getByRole('combobox', { name: /Notion Workspace 1/ })
     await user.click(btn)
 
     const item2 = screen.getByTestId('notion-credential-item-2')
diff --git a/web/app/components/base/notion-page-selector/credential-selector/index.tsx b/web/app/components/base/notion-page-selector/credential-selector/index.tsx
index 81ee1c06d8..6820720c07 100644
--- a/web/app/components/base/notion-page-selector/credential-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/credential-selector/index.tsx
@@ -37,8 +37,8 @@ const CredentialSelector = ({
   return (
     <Select value={currentCredential?.credentialId ?? null} onValueChange={nextValue => nextValue && onSelect(nextValue)}>
       <SelectTrigger
+        aria-label={currentDisplayName}
         className="w-[168px]"
-        data-testid="notion-credential-selector-btn"
       >
         <span className="flex min-w-0 items-center">
           <CredentialIcon
diff --git a/web/app/components/base/notion-page-selector/search-input/__tests__/index.spec.tsx b/web/app/components/base/notion-page-selector/search-input/__tests__/index.spec.tsx
index 39e7e09cf8..e68409d3ef 100644
--- a/web/app/components/base/notion-page-selector/search-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/__tests__/index.spec.tsx
@@ -16,7 +16,7 @@ describe('SearchInput', () => {
     const user = userEvent.setup()
     render(<SearchInput value="" onChange={handleChange} />)
 
-    const input = screen.getByTestId('notion-search-input')
+    const input = screen.getByPlaceholderText('common.dataSource.notion.selector.searchPages')
     await user.type(input, 'test query')
 
     expect(handleChange).toHaveBeenCalled()
@@ -25,7 +25,7 @@ describe('SearchInput', () => {
   it('should show clear button when value is not empty', () => {
     render(<SearchInput value="some value" onChange={vi.fn()} />)
 
-    expect(screen.getByTestId('notion-search-input-clear')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.clear' })).toBeInTheDocument()
   })
 
   it('should call onChange with empty string when clear button is clicked', async () => {
@@ -33,7 +33,7 @@ describe('SearchInput', () => {
     const user = userEvent.setup()
     render(<SearchInput value="some value" onChange={handleChange} />)
 
-    const clearBtn = screen.getByTestId('notion-search-input-clear')
+    const clearBtn = screen.getByRole('button', { name: 'common.operation.clear' })
     await user.click(clearBtn)
 
     expect(handleChange).toHaveBeenCalledWith('')
@@ -42,6 +42,6 @@ describe('SearchInput', () => {
   it('should not show clear button when value is empty', () => {
     render(<SearchInput value="" onChange={vi.fn()} />)
 
-    expect(screen.queryByTestId('notion-search-input-clear')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.clear' })).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index 55bf506ce6..a7102e19b2 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -35,13 +35,18 @@ const SearchInput = ({
         data-testid="notion-search-input"
       />
       {
-        value && (
-          <div
-            className="i-ri-close-circle-fill h-4 w-4 shrink-0 cursor-pointer text-components-input-text-placeholder"
-            onClick={handleClear}
-            data-testid="notion-search-input-clear"
-          />
-        )
+        value
+          ? (
+              <button
+                type="button"
+                aria-label={t('operation.clear', { ns: 'common' })}
+                className="flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-input-border-active"
+                onClick={handleClear}
+              >
+                <span className="i-ri-close-circle-fill h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
+              </button>
+            )
+          : null
       }
     </div>
   )
diff --git a/web/app/components/base/prompt-editor/hooks.ts b/web/app/components/base/prompt-editor/hooks.ts
index 70869d6a17..ff95cc497c 100644
--- a/web/app/components/base/prompt-editor/hooks.ts
+++ b/web/app/components/base/prompt-editor/hooks.ts
@@ -110,9 +110,9 @@ export const useSelectOrDelete: UseSelectOrDeleteHandler = (nodeKey: string, com
   return [ref, isSelected]
 }
 
-type UseTriggerHandler = () => [RefObject<HTMLDivElement | null>, boolean, Dispatch<SetStateAction<boolean>>]
-export const useTrigger: UseTriggerHandler = () => {
-  const triggerRef = useRef<HTMLDivElement>(null)
+type UseTriggerHandler = <T extends HTMLElement = HTMLDivElement>() => [RefObject<T | null>, boolean, Dispatch<SetStateAction<boolean>>]
+export const useTrigger: UseTriggerHandler = <T extends HTMLElement = HTMLDivElement>() => {
+  const triggerRef = useRef<T>(null)
   const [open, setOpen] = useState(false)
   const handleOpen = useCallback((e: MouseEvent) => {
     e.stopPropagation()
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/__tests__/component.spec.tsx b/web/app/components/base/prompt-editor/plugins/context-block/__tests__/component.spec.tsx
index 64bca0a24d..f7bb4a17fc 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/__tests__/component.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/__tests__/component.spec.tsx
@@ -252,7 +252,7 @@ describe('ContextBlockComponent', () => {
         />,
       )
 
-      const addButton = screen.getByTestId('add-button')
+      const addButton = screen.getByRole('button', { name: 'common.promptEditor.context.modal.add' })
       await userEvent.click(addButton)
       expect(handleAddContext).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
index 05fff5b4e8..b12e632843 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/component.tsx
@@ -25,7 +25,7 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
 }) => {
   const { t } = useTranslation()
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_CONTEXT_BLOCK_COMMAND)
-  const [triggerRef, open, setOpen] = useTrigger()
+  const [triggerRef, open, setOpen] = useTrigger<HTMLButtonElement>()
   const { eventEmitter } = useEventEmitterContextContext()
   const [localDatasets, setLocalDatasets] = useState<Dataset[]>(datasets)
 
@@ -54,18 +54,19 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
           onOpenChange={setOpen}
         >
           <PopoverTrigger
-            nativeButton={false}
             render={(
-              <div
+              <button
+                type="button"
+                aria-label={t('promptEditor.context.item.title', { ns: 'common' })}
                 className={`
-            flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded text-[11px] font-semibold
+            flex h-[18px] w-[18px] cursor-pointer items-center justify-center rounded border-none p-0 text-[11px] font-semibold
             ${open ? 'bg-[#6938EF] text-white' : 'bg-white/50 group-hover:bg-white group-hover:shadow-xs'}
           `}
                 ref={triggerRef}
                 onClick={e => e.preventDefault()}
               >
                 {localDatasets.length}
-              </div>
+              </button>
             )}
           />
           <PopoverContent
@@ -91,12 +92,16 @@ const ContextBlockComponent: FC<ContextBlockComponentProps> = ({
                     ))
                   }
                 </div>
-                <div className="flex h-8 cursor-pointer items-center text-[#155EEF]" onClick={onAddContext}>
-                  <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100" data-testid="add-button">
-                    <span className="i-ri-add-line h-[14px] w-[14px]" />
+                <button
+                  type="button"
+                  className="flex h-8 cursor-pointer items-center border-none bg-transparent p-0 text-left text-[#155EEF] focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={onAddContext}
+                >
+                  <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-gray-100">
+                    <span className="i-ri-add-line h-[14px] w-[14px]" aria-hidden="true" />
                   </div>
                   <div className="text-[13px] font-medium" title="">{t('promptEditor.context.modal.add', { ns: 'common' })}</div>
-                </div>
+                </button>
               </div>
               <div className="rounded-b-xl border-t-[0.5px] border-gray-50 bg-gray-50 px-4 py-3 text-xs text-gray-500">
                 {t('promptEditor.context.modal.footer', { ns: 'common' })}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
index 1520c24abe..ca279a1d4d 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
@@ -4,7 +4,7 @@ import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/
 import type { ValueSelector } from '@/app/components/workflow/types'
 
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { cleanup, fireEvent, render } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 import HITLInputComponentUI from '../component-ui'
 import { HITLInputNode } from '../node'
@@ -83,10 +83,10 @@ describe('HITLInputComponentUI', () => {
 
   describe('Rendering', () => {
     it('should render action buttons correctly', () => {
-      const { getAllByTestId } = renderComponent()
+      renderComponent()
 
-      const buttons = getAllByTestId(/action-btn-/)
-      expect(buttons).toHaveLength(2)
+      expect(screen.getByRole('button', { name: 'common.operation.edit' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.remove' })).toBeInTheDocument()
     })
 
     it('should render variable block when default type is variable', () => {
@@ -107,17 +107,18 @@ describe('HITLInputComponentUI', () => {
     })
 
     it('should hide action buttons when readonly is true', () => {
-      const { queryAllByTestId } = renderComponent({ readonly: true })
+      renderComponent({ readonly: true })
 
-      expect(queryAllByTestId(/action-btn-/)).toHaveLength(0)
+      expect(screen.queryByRole('button', { name: 'common.operation.edit' })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'common.operation.remove' })).not.toBeInTheDocument()
     })
   })
 
   describe('Remove action', () => {
     it('should call onRemove when remove button is clicked', () => {
-      const { getByTestId, onRemove } = renderComponent()
+      const { onRemove } = renderComponent()
 
-      fireEvent.click(getByTestId('action-btn-remove'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
 
       expect(onRemove).toHaveBeenCalledWith(varName)
       expect(onRemove).toHaveBeenCalledTimes(1)
@@ -125,39 +126,19 @@ describe('HITLInputComponentUI', () => {
   })
 
   describe('Edit flow', () => {
-    // it('should call onChange when name is unchanged', async () => {
-    //   const { findByRole, findByTestId, onChange, onRename } = renderComponent()
-
-    //   fireEvent.click(await findByTestId('action-btn-edit'))
-
-    //   await findByRole('textbox')
-
-    //   const saveBtn = await findByTestId('hitl-input-save-btn')
-    //   fireEvent.click(saveBtn)
-
-    //   expect(onChange).toHaveBeenCalledWith(
-    //     expect.objectContaining({
-    //       output_variable_name: varName,
-    //     }),
-    //   )
-
-    //   expect(onRename).not.toHaveBeenCalled()
-    // })
-
     it('should close modal without update when cancel is clicked', async () => {
       const {
         findByRole,
-        findByTestId,
         queryByRole,
         onChange,
         onRename,
       } = renderComponent()
 
-      fireEvent.click(await findByTestId('action-btn-edit'))
+      fireEvent.click(await screen.findByRole('button', { name: 'common.operation.edit' }))
 
       await findByRole('textbox')
 
-      fireEvent.click(await findByTestId('hitl-input-cancel-btn'))
+      fireEvent.click(await screen.findByRole('button', { name: 'common.operation.cancel' }))
 
       expect(onChange).not.toHaveBeenCalled()
       expect(onRename).not.toHaveBeenCalled()
@@ -168,45 +149,19 @@ describe('HITLInputComponentUI', () => {
 
   describe('Default formInput', () => {
     it('should pass default payload to InputField when formInput is undefined', async () => {
-      const { findByTestId, findByRole } = renderComponent({
+      const { findByRole } = renderComponent({
         formInput: undefined,
       })
 
-      fireEvent.click(await findByTestId('action-btn-edit'))
+      fireEvent.click(await screen.findByRole('button', { name: 'common.operation.edit' }))
 
       const textbox = await findByRole('textbox')
 
-      fireEvent.click(await findByTestId('hitl-input-save-btn'))
+      fireEvent.click(await screen.findByRole('button', { name: 'common.operation.save' }))
 
       expect(textbox).toHaveValue('customer_name')
     })
 
-    // it('should call onRename when variable name changes', async () => {
-    //   const {
-    //     findByRole,
-    //     findByTestId,
-    //     onChange,
-    //     onRename,
-    //   } = renderComponent()
-
-    //   fireEvent.click(await findByTestId('action-btn-edit'))
-
-    //   const input = (await findByRole('textbox')) as HTMLInputElement
-
-    //   fireEvent.change(input, { target: { value: 'updated_name' } })
-
-    //   fireEvent.click(await screen.findByTestId('hitl-input-save-btn'))
-
-    //   expect(onChange).not.toHaveBeenCalled()
-
-    //   expect(onRename).toHaveBeenCalledWith(
-    //     expect.objectContaining({
-    //       output_variable_name: 'updated_name',
-    //     }),
-    //     varName,
-    //   )
-    // })
-
     it('should render variable selector when workflowNodesMap fallback is used', () => {
       const { getByText } = renderComponent({
         workflowNodesMap: undefined as unknown as WorkflowNodesMap,
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/type-switch.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/type-switch.spec.tsx
index a23ef088f9..f487dbaae5 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/type-switch.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/type-switch.spec.tsx
@@ -15,7 +15,7 @@ describe('TypeSwitch', () => {
       <TypeSwitch isVariable={false} onIsVariableChange={onIsVariableChange} />,
     )
 
-    const trigger = screen.getByText('workflow.nodes.humanInput.insertInputField.useVarInstead')
+    const trigger = screen.getByRole('button', { name: 'workflow.nodes.humanInput.insertInputField.useVarInstead' })
     await user.click(trigger)
 
     expect(onIsVariableChange).toHaveBeenCalledWith(true)
@@ -29,7 +29,7 @@ describe('TypeSwitch', () => {
       <TypeSwitch isVariable onIsVariableChange={onIsVariableChange} />,
     )
 
-    const trigger = screen.getByText('workflow.nodes.humanInput.insertInputField.useConstantInstead')
+    const trigger = screen.getByRole('button', { name: 'workflow.nodes.humanInput.insertInputField.useConstantInstead' })
     await user.click(trigger)
 
     expect(onIsVariableChange).toHaveBeenCalledWith(false)
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index f3fc1a605c..322e2e0d75 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -136,20 +136,18 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
             <div className="flex h-full items-center" ref={editBtnRef}>
               <ActionButton
                 size="s"
-                data-testid="action-btn-edit"
                 aria-label={t('operation.edit', { ns: 'common' })}
               >
-                <span className="i-ri-edit-line size-4 text-text-tertiary" />
+                <span className="i-ri-edit-line size-4 text-text-tertiary" aria-hidden="true" />
               </ActionButton>
             </div>
 
             <div className="flex h-full items-center" ref={removeBtnRef}>
               <ActionButton
                 size="s"
-                data-testid="action-btn-remove"
                 aria-label={t('operation.remove', { ns: 'common' })}
               >
-                <span className="i-ri-delete-bin-line size-4 text-text-tertiary" />
+                <span className="i-ri-delete-bin-line size-4 text-text-tertiary" aria-hidden="true" />
               </ActionButton>
             </div>
           </div>
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index e0fcd3bdba..ca7dc387ed 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -123,11 +123,10 @@ const InputField: React.FC<InputFieldProps> = ({
         />
       </div>
       <div className="mt-4 flex justify-end space-x-2">
-        <Button data-testid="hitl-input-cancel-btn" onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
+        <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         {isEdit
           ? (
               <Button
-                data-testid="hitl-input-save-btn"
                 variant="primary"
                 onClick={handleSave}
                 disabled={!nameValid}
@@ -137,7 +136,6 @@ const InputField: React.FC<InputFieldProps> = ({
             )
           : (
               <Button
-                data-testid="hitl-input-insert-btn"
                 className="flex"
                 variant="primary"
                 disabled={!nameValid}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
index 86ab518fc5..f4e0f4304e 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
@@ -18,10 +18,14 @@ const TypeSwitch: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md pr-2 pl-1.5 text-text-tertiary select-none hover:bg-components-button-ghost-bg-hover', className)} onClick={() => onIsVariableChange?.(!isVariable)}>
-      <Variable02 className="size-3.5" />
+    <button
+      type="button"
+      className={cn('inline-flex h-6 cursor-pointer items-center space-x-1 rounded-md border-none bg-transparent py-0 pr-2 pl-1.5 text-left text-text-tertiary select-none hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', className)}
+      onClick={() => onIsVariableChange?.(!isVariable)}
+    >
+      <Variable02 className="size-3.5" aria-hidden="true" />
       <div className="system-xs-medium">{t(`nodes.humanInput.insertInputField.${isVariable ? 'useConstantInstead' : 'useVarInstead'}`, { ns: 'workflow' })}</div>
-    </div>
+    </button>
   )
 }
 export default React.memo(TypeSwitch)
diff --git a/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx b/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
index 95de5aff39..d47cafd14b 100644
--- a/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-log-modal/__tests__/index.spec.tsx
@@ -43,7 +43,7 @@ describe('PromptLogModal', () => {
 
     it('renders copy feedback when log length is 1', () => {
       render(<PromptLogModal {...defaultProps} />)
-      expect(screen.getByTestId('close-btn-container'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' }))!.toBeInTheDocument()
     })
 
     it('renders multiple logs in Card correctly', () => {
@@ -72,7 +72,7 @@ describe('PromptLogModal', () => {
   describe('Interactions', () => {
     it('calls onCancel when close button is clicked', () => {
       render(<PromptLogModal {...defaultProps} />)
-      const closeBtn = screen.getByTestId('close-btn')
+      const closeBtn = screen.getByRole('button', { name: 'common.operation.close' })
       expect(closeBtn)!.toBeInTheDocument()
       fireEvent.click(closeBtn)
       expect(defaultProps.onCancel).toHaveBeenCalled()
diff --git a/web/app/components/base/prompt-log-modal/index.tsx b/web/app/components/base/prompt-log-modal/index.tsx
index 08200623ae..b9225fabb4 100644
--- a/web/app/components/base/prompt-log-modal/index.tsx
+++ b/web/app/components/base/prompt-log-modal/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import { useClickAway } from 'ahooks'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
 import Card from './card'
 
@@ -15,6 +16,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
   width,
   onCancel,
 }) => {
+  const { t } = useTranslation()
   const ref = useRef(null)
   const [mounted, setMounted] = useState(false)
 
@@ -53,13 +55,14 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
               </>
             )
           }
-          <div
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
             onClick={onCancel}
-            className="flex h-6 w-6 cursor-pointer items-center justify-center"
-            data-testid="close-btn-container"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-components-button-secondary-accent-border"
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" data-testid="close-btn" />
-          </div>
+            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
       <div className="grow overflow-y-auto p-2">
diff --git a/web/app/components/base/qrcode/__tests__/index.spec.tsx b/web/app/components/base/qrcode/__tests__/index.spec.tsx
index cfc78cef85..0029f1840a 100644
--- a/web/app/components/base/qrcode/__tests__/index.spec.tsx
+++ b/web/app/components/base/qrcode/__tests__/index.spec.tsx
@@ -17,7 +17,7 @@ describe('ShareQRCode', () => {
   describe('Rendering', () => {
     it('renders correctly', () => {
       render(<ShareQRCode content={content} />)
-      expect(screen.getByRole('button').firstElementChild).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })).toBeInTheDocument()
     })
   })
 
@@ -27,7 +27,7 @@ describe('ShareQRCode', () => {
       render(<ShareQRCode content={content} />)
 
       expect(screen.queryByRole('img')).not.toBeInTheDocument()
-      const trigger = screen.getByTestId('qrcode-container')
+      const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
       await user.click(trigger)
 
       expect(screen.getByRole('img')).toBeInTheDocument()
@@ -40,16 +40,16 @@ describe('ShareQRCode', () => {
       const user = userEvent.setup()
       render(
         <div>
-          <div data-testid="outside">Outside</div>
+          <div>Outside</div>
           <ShareQRCode content={content} />
         </div>,
       )
 
-      const trigger = screen.getByTestId('qrcode-container')
+      const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
       await user.click(trigger)
       expect(screen.getByRole('img')).toBeInTheDocument()
 
-      await user.click(screen.getByTestId('outside'))
+      await user.click(screen.getByText('Outside'))
       expect(screen.queryByRole('img')).not.toBeInTheDocument()
     })
 
@@ -57,7 +57,7 @@ describe('ShareQRCode', () => {
       const user = userEvent.setup()
       render(<ShareQRCode content={content} />)
 
-      const trigger = screen.getByTestId('qrcode-container')
+      const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
       await user.click(trigger)
 
       const canvas = screen.getByRole('img')
@@ -75,10 +75,10 @@ describe('ShareQRCode', () => {
       try {
         render(<ShareQRCode content={content} />)
 
-        const trigger = screen.getByTestId('qrcode-container')
+        const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
         await user.click(trigger!)
 
-        const downloadBtn = screen.getByText('appOverview.overview.appInfo.qrcode.download')
+        const downloadBtn = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.download' })
         await user.click(downloadBtn)
 
         expect(downloadUrl).toHaveBeenCalledWith({
@@ -95,7 +95,7 @@ describe('ShareQRCode', () => {
       const user = userEvent.setup()
       render(<ShareQRCode content={content} />)
 
-      const trigger = screen.getByTestId('qrcode-container')
+      const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
       await user.click(trigger)
 
       // Override querySelector on the panel to simulate canvas not being found
@@ -108,7 +108,7 @@ describe('ShareQRCode', () => {
       }) as typeof panel.querySelector
 
       try {
-        const downloadBtn = screen.getByText('appOverview.overview.appInfo.qrcode.download')
+        const downloadBtn = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.download' })
         await user.click(downloadBtn)
         expect(downloadUrl).not.toHaveBeenCalled()
       }
@@ -121,7 +121,7 @@ describe('ShareQRCode', () => {
       const user = userEvent.setup()
       render(<ShareQRCode content={content} />)
 
-      const trigger = screen.getByTestId('qrcode-container')
+      const trigger = screen.getByRole('button', { name: 'appOverview.overview.appInfo.qrcode.title' })
       await user.click(trigger)
 
       // Click on the scan text inside the panel — panel should remain open
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index cfc30d752b..d4c9918aa6 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -52,32 +52,39 @@ const ShareQRCode = ({ content }: Props) => {
   const tooltipText = t(`${prefixEmbedded}`, { ns: 'appOverview' })
   /* v8 ignore next -- react-i18next returns a non-empty key/string in configured runtime; empty fallback protects against missing i18n payloads. @preserve */
   const safeTooltipText = tooltipText || ''
+  const downloadText = t('overview.appInfo.qrcode.download', { ns: 'appOverview' })
 
   return (
     <Tooltip>
-      <TooltipTrigger
-        render={(
-          <div className="relative h-6 w-6" onClick={toggleQRCode} data-testid="qrcode-container">
-            <ActionButton>
-              <span className="i-ri-qr-code-line h-4 w-4" />
+      <div className="relative h-6 w-6">
+        <TooltipTrigger
+          render={(
+            <ActionButton aria-label={safeTooltipText} onClick={toggleQRCode}>
+              <span className="i-ri-qr-code-line h-4 w-4" aria-hidden="true" />
             </ActionButton>
-            {isShow && (
-              <div
-                ref={qrCodeRef}
-                className="absolute top-8 -right-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
-                onClick={handlePanelClick}
+          )}
+        />
+        {isShow && (
+          <div
+            ref={qrCodeRef}
+            className="absolute top-8 -right-8 z-10 flex w-[232px] flex-col items-center rounded-lg bg-components-panel-bg p-4 shadow-xs"
+            onClick={handlePanelClick}
+          >
+            <QRCode size={160} value={content} className="mb-2" />
+            <div className="flex items-center system-xs-regular">
+              <div className="text-text-tertiary">{t('overview.appInfo.qrcode.scan', { ns: 'appOverview' })}</div>
+              <div className="text-text-tertiary">·</div>
+              <button
+                type="button"
+                className="cursor-pointer border-none bg-transparent p-0 text-left text-text-accent-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={downloadQR}
               >
-                <QRCode size={160} value={content} className="mb-2" />
-                <div className="flex items-center system-xs-regular">
-                  <div className="text-text-tertiary">{t('overview.appInfo.qrcode.scan', { ns: 'appOverview' })}</div>
-                  <div className="text-text-tertiary">·</div>
-                  <div className="cursor-pointer text-text-accent-secondary" onClick={downloadQR}>{t('overview.appInfo.qrcode.download', { ns: 'appOverview' })}</div>
-                </div>
-              </div>
-            )}
+                {downloadText}
+              </button>
+            </div>
           </div>
         )}
-      />
+      </div>
       <TooltipContent>
         {safeTooltipText}
       </TooltipContent>
diff --git a/web/app/components/base/radio-card/__tests__/index.spec.tsx b/web/app/components/base/radio-card/__tests__/index.spec.tsx
index f4bc7a5b0e..b2d21fa123 100644
--- a/web/app/components/base/radio-card/__tests__/index.spec.tsx
+++ b/web/app/components/base/radio-card/__tests__/index.spec.tsx
@@ -32,7 +32,7 @@ describe('RadioCard', () => {
       />,
     )
 
-    await user.click(screen.getByText('Clickable'))
+    await user.click(screen.getByRole('button', { name: /Clickable/ }))
     expect(onChosen).toHaveBeenCalledTimes(1)
   })
 
@@ -117,7 +117,7 @@ describe('RadioCard', () => {
     )
 
     // click title should trigger onChosen
-    await user.click(screen.getByText('ClickNoRadio'))
+    await user.click(screen.getByRole('button', { name: /ClickNoRadio/ }))
     expect(onChosen).toHaveBeenCalledTimes(1)
 
     // radio area should be absent
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 87e2c96258..dad810e1e1 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -37,7 +37,11 @@ const RadioCard: FC<Props> = ({
         className,
       )}
     >
-      <div className="flex gap-x-2" onClick={onChosen}>
+      <button
+        type="button"
+        className="flex w-full gap-x-2 border-none bg-transparent p-0 text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onChosen}
+      >
         <div className={cn(iconBgClassName, 'flex size-8 shrink-0 items-center justify-center rounded-lg shadow-md')}>
           {icon}
         </div>
@@ -47,15 +51,17 @@ const RadioCard: FC<Props> = ({
         </div>
         {!noRadio && (
           <div className="absolute top-3 right-3">
-            <div className={cn(
-              'h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
-              isChosen && 'border-[5px] border-components-radio-border-checked',
-            )}
+            <div
+              className={cn(
+                'h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                isChosen && 'border-[5px] border-components-radio-border-checked',
+              )}
+              aria-hidden="true"
             >
             </div>
           </div>
         )}
-      </div>
+      </button>
       {!!((isChosen && chosenConfig) || noRadio) && (
         <div className="mt-2 flex gap-x-2">
           <div className="size-8 shrink-0"></div>
diff --git a/web/app/components/base/sort/__tests__/index.spec.tsx b/web/app/components/base/sort/__tests__/index.spec.tsx
index 18dfd242ce..ea85e8f3fe 100644
--- a/web/app/components/base/sort/__tests__/index.spec.tsx
+++ b/web/app/components/base/sort/__tests__/index.spec.tsx
@@ -11,10 +11,10 @@ const mockItems = [
 ]
 
 describe('Sort component — real portal integration', () => {
-  const setup = (props = {}) => {
+  const setup = (props: Partial<React.ComponentProps<typeof Sort>> = {}) => {
     const onSelect = vi.fn()
     const user = userEvent.setup()
-    const { container, rerender } = render(
+    const { rerender } = render(
       <Sort value="created_at" items={mockItems} onSelect={onSelect} order="" {...props} />,
     )
 
@@ -28,10 +28,9 @@ describe('Sort component — real portal integration', () => {
 
     // helper: returns right-side sort button element
     const getSortButton = (): HTMLElement => {
-      const btn = container.querySelector('.rounded-r-lg')
-      if (!btn)
-        throw new Error('Sort button (rounded-r-lg) not found in rendered container')
-      return btn as HTMLElement
+      return screen.getByRole('button', {
+        name: props.order ? 'appLog.filter.ascending' : 'appLog.filter.descending',
+      })
     }
 
     return { user, onSelect, rerender, getTriggerWrapper, getSortButton }
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 69cf4dd220..57affdd96b 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -85,10 +85,15 @@ const Sort: FC<Props> = ({
           </DropdownMenuContent>
         </div>
       </DropdownMenu>
-      <div className="ml-px cursor-pointer rounded-r-lg bg-components-button-tertiary-bg p-2 hover:bg-components-button-tertiary-bg-hover" onClick={() => onSelect(`${order ? '' : '-'}${value}`)}>
-        {!order && <RiSortAsc className="h-4 w-4 text-components-button-tertiary-text" />}
-        {order && <RiSortDesc className="h-4 w-4 text-components-button-tertiary-text" />}
-      </div>
+      <button
+        type="button"
+        aria-label={t(`filter.${order ? 'ascending' : 'descending'}`, { ns: 'appLog' })}
+        className="ml-px cursor-pointer rounded-r-lg border-none bg-components-button-tertiary-bg p-2 hover:bg-components-button-tertiary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={() => onSelect(`${order ? '' : '-'}${value}`)}
+      >
+        {!order && <RiSortAsc className="h-4 w-4 text-components-button-tertiary-text" aria-hidden="true" />}
+        {order && <RiSortDesc className="h-4 w-4 text-components-button-tertiary-text" aria-hidden="true" />}
+      </button>
     </div>
 
   )
diff --git a/web/app/components/base/svg-gallery/__tests__/index.spec.tsx b/web/app/components/base/svg-gallery/__tests__/index.spec.tsx
index c08b527d94..a93cc9da0e 100644
--- a/web/app/components/base/svg-gallery/__tests__/index.spec.tsx
+++ b/web/app/components/base/svg-gallery/__tests__/index.spec.tsx
@@ -131,7 +131,7 @@ describe('SVGRenderer', () => {
 
       expect(screen.getByAltText('Preview'))!.toBeInTheDocument()
 
-      await user.click(screen.getByTestId('image-preview-close-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
       await waitFor(() => {
         expect(screen.queryByAltText('Preview')).not.toBeInTheDocument()
diff --git a/web/app/components/base/tag-input/__tests__/index.spec.tsx b/web/app/components/base/tag-input/__tests__/index.spec.tsx
index b64f4aaab6..78bfeb33a8 100644
--- a/web/app/components/base/tag-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/tag-input/__tests__/index.spec.tsx
@@ -63,7 +63,7 @@ describe('TagInput', () => {
     it('should hide remove controls when remove is disabled', () => {
       renderTagInput({ items: ['alpha'], disableRemove: true })
 
-      expect(screen.queryByTestId('remove-tag')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'common.operation.remove alpha' })).not.toBeInTheDocument()
     })
 
     it('should apply focused style in special mode when input is focused', async () => {
@@ -83,9 +83,9 @@ describe('TagInput', () => {
     it('should remove item when remove control is clicked', async () => {
       const { onChange } = renderTagInput({ items: ['alpha', 'beta'] })
 
-      const removeControl = screen.getAllByTestId('remove-tag')[0]
+      const removeControl = screen.getByRole('button', { name: 'common.operation.remove alpha' })
 
-      await userEvent.click(removeControl!)
+      await userEvent.click(removeControl)
 
       expect(onChange).toHaveBeenCalledWith(['beta'])
     })
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 716f1571e6..81f4d12af5 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -67,9 +67,14 @@ const TagInput: FC<TagInputProps> = ({ items, onChange, disableAdd, disableRemov
         <div key={item} className={cn('mt-1 mr-1 flex items-center rounded-md border border-divider-deep bg-components-badge-white-to-dark py-1 pr-1 pl-1.5 system-xs-regular text-text-secondary')}>
           {item}
           {!disableRemove && (
-            <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={() => handleRemove(index)}>
-              <span className="ml-0.5 i-ri-close-line h-3.5 w-3.5 text-text-tertiary" data-testid="remove-tag" />
-            </div>
+            <button
+              type="button"
+              aria-label={`${t('operation.remove', { ns: 'common' })} ${item}`}
+              className="flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={() => handleRemove(index)}
+            >
+              <span className="ml-0.5 i-ri-close-line h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
+            </button>
           )}
         </div>
       ))}
diff --git a/web/app/components/base/video-gallery/VideoPlayer.tsx b/web/app/components/base/video-gallery/VideoPlayer.tsx
index 889836258f..6f7304474a 100644
--- a/web/app/components/base/video-gallery/VideoPlayer.tsx
+++ b/web/app/components/base/video-gallery/VideoPlayer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import styles from './VideoPlayer.module.css'
 
 type VideoPlayerProps = {
@@ -8,36 +9,37 @@ type VideoPlayerProps = {
 }
 
 const PlayIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
   </svg>
 )
 
 const PauseIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M6 19H10V5H6V19ZM14 5V19H18V5H14Z" fill="currentColor" />
   </svg>
 )
 
 const MuteIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M3 9V15H7L12 20V4L7 9H3ZM16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72 18.01 4.14 14 3.23Z" fill="currentColor" />
   </svg>
 )
 
 const UnmuteIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.34 2.93L2.93 4.34L7.29 8.7L7 9H3V15H7L12 20V13.41L16.18 17.59C15.69 17.96 15.16 18.27 14.58 18.5V20.58C15.94 20.22 17.15 19.56 18.13 18.67L19.66 20.2L21.07 18.79L4.34 2.93ZM10 15.17L7.83 13H5V11H7.83L10 8.83V15.17ZM19 12C19 12.82 18.85 13.61 18.59 14.34L20.12 15.87C20.68 14.7 21 13.39 21 12C21 7.72 18.01 4.14 14 3.23V5.29C16.89 6.15 19 8.83 19 12ZM12 4L10.12 5.88L12 7.76V4ZM16.5 12C16.5 10.23 15.48 8.71 14 7.97V10.18L16.45 12.63C16.48 12.43 16.5 12.22 16.5 12Z" fill="currentColor" />
   </svg>
 )
 
 const FullscreenIcon = () => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 14H5V19H10V17H7V14ZM5 10H7V7H10V5H5V10ZM17 17H14V19H19V14H17V17ZM14 5V7H17V10H19V5H14Z" fill="currentColor" />
   </svg>
 )
 
 const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
+  const { t } = useTranslation()
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
@@ -52,6 +54,9 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
   const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const [isSmallSize, setIsSmallSize] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
+  const playPauseLabel = t(isPlaying ? 'operation.pause' : 'operation.play', { ns: 'common' })
+  const toggleMuteLabel = t('operation.toggleMute', { ns: 'common' })
+  const toggleFullscreenLabel = t('operation.toggleFullscreen', { ns: 'common' })
 
   useEffect(() => {
     const video = videoRef.current
@@ -256,7 +261,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
           </div>
           <div className={styles.controlsContent}>
             <div className={styles.leftControls}>
-              <button type="button" className={styles.playPauseButton} onClick={togglePlayPause} data-testid="video-play-pause-button">
+              <button type="button" aria-label={playPauseLabel} className={styles.playPauseButton} onClick={togglePlayPause}>
                 {isPlaying ? <PauseIcon /> : <PlayIcon />}
               </button>
               {!isSmallSize && (
@@ -270,7 +275,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
               )}
             </div>
             <div className={styles.rightControls}>
-              <button type="button" className={styles.muteButton} onClick={toggleMute} data-testid="video-mute-button">
+              <button type="button" aria-label={toggleMuteLabel} className={styles.muteButton} onClick={toggleMute}>
                 {isMuted ? <UnmuteIcon /> : <MuteIcon />}
               </button>
               {!isSmallSize && (
@@ -295,7 +300,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src, srcs }) => {
                   </div>
                 </div>
               )}
-              <button type="button" className={styles.fullscreenButton} onClick={toggleFullscreen} data-testid="video-fullscreen-button">
+              <button type="button" aria-label={toggleFullscreenLabel} className={styles.fullscreenButton} onClick={toggleFullscreen}>
                 <FullscreenIcon />
               </button>
             </div>
diff --git a/web/app/components/base/video-gallery/__tests__/VideoPlayer.spec.tsx b/web/app/components/base/video-gallery/__tests__/VideoPlayer.spec.tsx
index 20a6298419..6a72170607 100644
--- a/web/app/components/base/video-gallery/__tests__/VideoPlayer.spec.tsx
+++ b/web/app/components/base/video-gallery/__tests__/VideoPlayer.spec.tsx
@@ -21,6 +21,11 @@ describe('VideoPlayer', () => {
     } as DOMRect)
   }
 
+  const getPlayButton = () => screen.getByRole('button', { name: 'common.operation.play' })
+  const getPauseButton = () => screen.getByRole('button', { name: 'common.operation.pause' })
+  const getMuteButton = () => screen.getByRole('button', { name: 'common.operation.toggleMute' })
+  const getFullscreenButton = () => screen.getByRole('button', { name: 'common.operation.toggleFullscreen' })
+
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useRealTimers()
@@ -98,12 +103,12 @@ describe('VideoPlayer', () => {
     it('should toggle play/pause on button click', async () => {
       const user = userEvent.setup()
       render(<VideoPlayer src={mockSrc} />)
-      const playPauseBtn = screen.getByTestId('video-play-pause-button')
+      const playPauseBtn = getPlayButton()
 
       await user.click(playPauseBtn)
       expect(window.HTMLVideoElement.prototype.play).toHaveBeenCalled()
 
-      await user.click(playPauseBtn)
+      await user.click(getPauseButton())
       expect(window.HTMLVideoElement.prototype.pause).toHaveBeenCalled()
     })
 
@@ -111,7 +116,7 @@ describe('VideoPlayer', () => {
       const user = userEvent.setup()
       render(<VideoPlayer src={mockSrc} />)
       const video = screen.getByTestId('video-element') as HTMLVideoElement
-      const muteBtn = screen.getByTestId('video-mute-button')
+      const muteBtn = getMuteButton()
 
       // Ensure volume is positive before muting
       video.volume = 0.7
@@ -132,7 +137,7 @@ describe('VideoPlayer', () => {
     it('should toggle fullscreen on button click', async () => {
       const user = userEvent.setup()
       render(<VideoPlayer src={mockSrc} />)
-      const fullscreenBtn = screen.getByTestId('video-fullscreen-button')
+      const fullscreenBtn = getFullscreenButton()
 
       await user.click(fullscreenBtn)
       expect(window.HTMLVideoElement.prototype.requestFullscreen).toHaveBeenCalled()
@@ -166,12 +171,12 @@ describe('VideoPlayer', () => {
       const user = userEvent.setup()
       render(<VideoPlayer src={mockSrc} />)
       const video = screen.getByTestId('video-element')
-      const playPauseBtn = screen.getByTestId('video-play-pause-button')
+      const playPauseBtn = getPlayButton()
 
       await user.click(playPauseBtn)
       fireEvent(video, new Event('ended'))
 
-      expect(playPauseBtn)!.toBeInTheDocument()
+      expect(getPlayButton())!.toBeInTheDocument()
     })
 
     it('should show/hide controls on mouse move and timeout', () => {
@@ -273,7 +278,7 @@ describe('VideoPlayer', () => {
 
       try {
         render(<VideoPlayer src={mockSrc} />)
-        const playPauseBtn = screen.getByTestId('video-play-pause-button')
+        const playPauseBtn = getPlayButton()
 
         await user.click(playPauseBtn)
 
@@ -290,7 +295,7 @@ describe('VideoPlayer', () => {
       const user = userEvent.setup()
       render(<VideoPlayer src={mockSrc} />)
       const video = screen.getByTestId('video-element') as HTMLVideoElement
-      const muteBtn = screen.getByTestId('video-mute-button')
+      const muteBtn = getMuteButton()
 
       // First click mutes — this sets volume to 0 and muted to true
       await user.click(muteBtn)
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index c3c6aab2ce..00f38734d1 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -28,7 +28,7 @@ const AnnotationFullModal: FC<Props> = ({
       }}
     >
       <DialogContent className="w-full overflow-hidden! border-none p-0! text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <GridMask wrapperClassName="rounded-lg" canvasClassName="rounded-lg" gradientClassName="rounded-lg">
           <div className="mt-6 flex cursor-pointer flex-col rounded-lg border-2 border-solid border-transparent px-7 py-6 shadow-md transition-all duration-200 ease-in-out">
diff --git a/web/app/components/custom/custom-page/__tests__/index.spec.tsx b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
index 1f3655a9f8..b31db0a29f 100644
--- a/web/app/components/custom/custom-page/__tests__/index.spec.tsx
+++ b/web/app/components/custom/custom-page/__tests__/index.spec.tsx
@@ -133,7 +133,7 @@ describe('CustomPage', () => {
       expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
       expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
 
-      await user.click(screen.getByText('billing.upgradeBtn.encourageShort'))
+      await user.click(screen.getByRole('button', { name: 'billing.upgradeBtn.encourageShort' }))
 
       expect(setShowPricingModal).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/custom/custom-page/index.tsx b/web/app/components/custom/custom-page/index.tsx
index cd85a91230..0362267a6f 100644
--- a/web/app/components/custom/custom-page/index.tsx
+++ b/web/app/components/custom/custom-page/index.tsx
@@ -20,7 +20,13 @@ const CustomPage = () => {
             <div className="title-xl-semi-bold">{t('upgradeTip.title', { ns: 'custom' })}</div>
             <div className="system-sm-regular">{t('upgradeTip.des', { ns: 'custom' })}</div>
           </div>
-          <div className="flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl bg-white system-md-semibold text-text-accent shadow-xs hover:opacity-95" onClick={() => setShowPricingModal()}>{t('upgradeBtn.encourageShort', { ns: 'billing' })}</div>
+          <button
+            type="button"
+            className="flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl border-none bg-white p-0 system-md-semibold text-text-accent shadow-xs hover:opacity-95"
+            onClick={() => setShowPricingModal()}
+          >
+            {t('upgradeBtn.encourageShort', { ns: 'billing' })}
+          </button>
         </div>
       )}
       <CustomWebAppBrand />
diff --git a/web/app/components/datasets/common/document-status-with-action/__tests__/status-with-action.spec.tsx b/web/app/components/datasets/common/document-status-with-action/__tests__/status-with-action.spec.tsx
index ee8b4eff1e..0688adf1c6 100644
--- a/web/app/components/datasets/common/document-status-with-action/__tests__/status-with-action.spec.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/__tests__/status-with-action.spec.tsx
@@ -60,7 +60,7 @@ describe('StatusWithAction', () => {
           onAction={onAction}
         />,
       )
-      expect(screen.getByText('Click me')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument()
     })
 
     it('should not render action button when onAction is not provided', () => {
@@ -92,12 +92,11 @@ describe('StatusWithAction', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText('Click me'))
+      fireEvent.click(screen.getByRole('button', { name: 'Click me' }))
       expect(onAction).toHaveBeenCalledTimes(1)
     })
 
-    it('should call onAction even when disabled (style only)', () => {
-      // Note: disabled prop only affects styling, not actual click behavior
+    it('should not call onAction when disabled', () => {
       const onAction = vi.fn()
       render(
         <StatusWithAction
@@ -108,8 +107,8 @@ describe('StatusWithAction', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText('Click me'))
-      expect(onAction).toHaveBeenCalledTimes(1)
+      fireEvent.click(screen.getByRole('button', { name: 'Click me' }))
+      expect(onAction).not.toHaveBeenCalled()
     })
 
     it('should apply disabled styles when disabled prop is true', () => {
@@ -122,9 +121,10 @@ describe('StatusWithAction', () => {
         />,
       )
 
-      const actionButton = screen.getByText('Click me')
+      const actionButton = screen.getByRole('button', { name: 'Click me' })
       expect(actionButton).toHaveClass('cursor-not-allowed')
       expect(actionButton).toHaveClass('text-text-disabled')
+      expect(actionButton).toBeDisabled()
     })
   })
 
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index 3c2536fa5e..08053aa7bf 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -58,10 +58,17 @@ const StatusAction: FC<Props> = ({
       <div className="relative z-10 flex h-full items-center space-x-2">
         <Icon className={cn('h-4 w-4', color)} />
         <div className="text-[13px] font-normal text-text-secondary">{description}</div>
-        {onAction && (
+        {onAction && actionText && (
           <>
             <Divider type="vertical" className="h-4!" />
-            <div onClick={onAction} className={cn('cursor-pointer text-[13px] font-semibold text-text-accent', disabled && 'cursor-not-allowed text-text-disabled')}>{actionText}</div>
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={onAction}
+              className={cn('cursor-pointer border-none bg-transparent p-0 text-left text-[13px] font-semibold text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', disabled && 'cursor-not-allowed text-text-disabled')}
+            >
+              {actionText}
+            </button>
           </>
         )}
       </div>
diff --git a/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx b/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
index cc60160595..12d44a3eec 100644
--- a/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/common/image-list/__tests__/index.spec.tsx
@@ -135,7 +135,7 @@ describe('ImageList', () => {
       const images = createMockImages(15)
       render(<ImageList images={images} size="md" limit={9} />)
 
-      const moreButton = screen.getByText(/\+6/)
+      const moreButton = screen.getByRole('button', { name: '+6' })
       fireEvent.click(moreButton)
 
       // More button should disappear
diff --git a/web/app/components/datasets/common/image-list/__tests__/more.spec.tsx b/web/app/components/datasets/common/image-list/__tests__/more.spec.tsx
index cc6341694a..a192c7acc6 100644
--- a/web/app/components/datasets/common/image-list/__tests__/more.spec.tsx
+++ b/web/app/components/datasets/common/image-list/__tests__/more.spec.tsx
@@ -47,7 +47,7 @@ describe('More', () => {
       const onClick = vi.fn()
       render(<More count={5} onClick={onClick} />)
 
-      fireEvent.click(screen.getByText('+5'))
+      fireEvent.click(screen.getByRole('button', { name: '+5' }))
       expect(onClick).toHaveBeenCalledTimes(1)
     })
 
@@ -56,7 +56,7 @@ describe('More', () => {
 
       // Should not throw
       expect(() => {
-        fireEvent.click(screen.getByText('+5'))
+        fireEvent.click(screen.getByRole('button', { name: '+5' }))
       }).not.toThrow()
     })
 
@@ -70,7 +70,7 @@ describe('More', () => {
         </div>,
       )
 
-      fireEvent.click(screen.getByText('+5'))
+      fireEvent.click(screen.getByRole('button', { name: '+5' }))
       expect(childClick).toHaveBeenCalled()
       expect(parentClick).not.toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/common/image-list/more.tsx b/web/app/components/datasets/common/image-list/more.tsx
index 255e5e4d87..39f6367556 100644
--- a/web/app/components/datasets/common/image-list/more.tsx
+++ b/web/app/components/datasets/common/image-list/more.tsx
@@ -17,23 +17,29 @@ const More = ({ count, onClick }: MoreProps) => {
     return `${(num / 1000000).toFixed(1)}M`
   }
 
-  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
     e.preventDefault()
     onClick?.()
   }, [onClick])
 
+  const label = `+${formatNumber(count)}`
+
   return (
-    <div className="relative size-8 cursor-pointer p-[0.5px]" onClick={handleClick}>
+    <button
+      type="button"
+      className="relative block size-8 cursor-pointer border-none bg-transparent p-[0.5px] text-center"
+      onClick={handleClick}
+    >
       <div className="relative z-10 size-full rounded-md border-[1.5px] border-components-panel-bg bg-divider-regular">
         <div className="flex size-full items-center justify-center">
           <span className="system-xs-regular text-text-tertiary">
-            {`+${formatNumber(count)}`}
+            {label}
           </span>
         </div>
       </div>
       <div className="absolute top-1 -right-0.5 z-0 h-6 w-1 rounded-r-md bg-divider-regular" />
-    </div>
+    </button>
   )
 }
 
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
index b5c73f3422..2021320616 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/index.spec.tsx
@@ -1352,7 +1352,7 @@ describe('Uploader', () => {
       )
 
       expect(screen.getByText('app.dslUploader.button'))!.toBeInTheDocument()
-      expect(screen.getByText('app.dslUploader.browse'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'app.dslUploader.browse' }))!.toBeInTheDocument()
     })
 
     it('should render file info when file is selected', () => {
@@ -1436,7 +1436,7 @@ describe('Uploader', () => {
         />,
       )
 
-      const browseLink = screen.getByText('app.dslUploader.browse')
+      const browseLink = screen.getByRole('button', { name: 'app.dslUploader.browse' })
       const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
 
       // Mock click on input
@@ -1659,7 +1659,7 @@ describe('Uploader', () => {
         // After click, oncancel should be set
       })
 
-      const browseLink = screen.getByText('app.dslUploader.browse')
+      const browseLink = screen.getByRole('button', { name: 'app.dslUploader.browse' })
       fireEvent.click(browseLink)
 
       // selectHandle should have triggered click on input
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
index f4263ab439..bab1d505b7 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/__tests__/uploader.spec.tsx
@@ -50,7 +50,7 @@ describe('Uploader', () => {
 
     it('should render browse link when no file', () => {
       render(<Uploader {...defaultProps} />)
-      expect(screen.getByText(/dslUploader\.browse/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /dslUploader\.browse/i })).toBeInTheDocument()
     })
 
     it('should render upload icon when no file', () => {
@@ -108,7 +108,7 @@ describe('Uploader', () => {
       const input = document.getElementById('fileUploader') as HTMLInputElement
       const clickSpy = vi.spyOn(input, 'click')
 
-      const browseLink = screen.getByText(/dslUploader\.browse/i)
+      const browseLink = screen.getByRole('button', { name: /dslUploader\.browse/i })
       fireEvent.click(browseLink)
 
       expect(clickSpy).toHaveBeenCalled()
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index f0499c6965..9b4cf2c488 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -90,9 +90,13 @@ const Uploader: FC<Props> = ({ file, updateFile, className }) => {
               <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
-                <span className="cursor-pointer pl-1 text-text-accent" onClick={selectHandle}>
+                <button
+                  type="button"
+                  className="inline cursor-pointer border-none bg-transparent p-0 pl-1 text-left text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={selectHandle}
+                >
                   {t('dslUploader.browse', { ns: 'app' })}
-                </span>
+                </button>
               </div>
             </div>
             {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
index a9b91fb1bc..32b7b1d17d 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/__tests__/index.spec.tsx
@@ -148,14 +148,8 @@ describe('EmptyDatasetCreationModal', () => {
         const mockOnHide = vi.fn()
         render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
 
-        // Act - Wait for modal to be rendered, then find the close span
-        // The close span is located in the modalHeader div, next to the title
-        const titleElement = await screen.findByText('datasetCreation.stepOne.modal.title')
-        const headerDiv = titleElement.parentElement
-        const closeButton = headerDiv?.querySelector('span')
-
-        expect(closeButton).toBeInTheDocument()
-        fireEvent.click(closeButton!)
+        const closeButton = await screen.findByRole('button', { name: /operation\.close$/ })
+        fireEvent.click(closeButton)
 
         expect(mockOnHide).toHaveBeenCalledTimes(1)
       })
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 0de10a8ecd..caf84e31ac 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -57,7 +57,12 @@ const EmptyDatasetCreationModal = ({ show = false, onHide }: IProps) => {
 
         <div className={s.modalHeader}>
           <div className={s.title}>{t('stepOne.modal.title', { ns: 'datasetCreation' })}</div>
-          <span className={s.close} onClick={onHide} />
+          <button
+            type="button"
+            className={cn(s.close, 'border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden')}
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onHide}
+          />
         </div>
         <div className={s.tip}>{t('stepOne.modal.tip', { ns: 'datasetCreation' })}</div>
         <div className={s.form}>
diff --git a/web/app/components/datasets/create/file-preview/__tests__/index.spec.tsx b/web/app/components/datasets/create/file-preview/__tests__/index.spec.tsx
index 6839a8cc87..c016807186 100644
--- a/web/app/components/datasets/create/file-preview/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/file-preview/__tests__/index.spec.tsx
@@ -73,9 +73,9 @@ describe('FilePreview', () => {
     })
 
     it('should render close button with XMarkIcon', async () => {
-      const { container } = renderFilePreview()
+      renderFilePreview()
 
-      const closeButton = container.querySelector('.cursor-pointer')
+      const closeButton = screen.getByRole('button', { name: /operation\.close$/ })
       expect(closeButton)!.toBeInTheDocument()
       const xMarkIcon = closeButton?.querySelector('svg')
       expect(xMarkIcon)!.toBeInTheDocument()
@@ -269,20 +269,18 @@ describe('FilePreview', () => {
   describe('User Interactions', () => {
     it('should call hidePreview when close button is clicked', async () => {
       const hidePreview = vi.fn()
-      const { container } = renderFilePreview({ hidePreview })
+      renderFilePreview({ hidePreview })
 
-      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
-      fireEvent.click(closeButton)
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
 
       expect(hidePreview).toHaveBeenCalledTimes(1)
     })
 
     it('should call hidePreview with event object when clicked', async () => {
       const hidePreview = vi.fn()
-      const { container } = renderFilePreview({ hidePreview })
+      renderFilePreview({ hidePreview })
 
-      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
-      fireEvent.click(closeButton)
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
 
       // Assert - onClick receives the event object
       expect(hidePreview).toHaveBeenCalled()
@@ -291,9 +289,9 @@ describe('FilePreview', () => {
 
     it('should handle multiple clicks on close button', async () => {
       const hidePreview = vi.fn()
-      const { container } = renderFilePreview({ hidePreview })
+      renderFilePreview({ hidePreview })
 
-      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      const closeButton = screen.getByRole('button', { name: /operation\.close$/ })
       fireEvent.click(closeButton)
       fireEvent.click(closeButton)
       fireEvent.click(closeButton)
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index 2b4041eaf2..ae1cdd3dd1 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -50,9 +50,14 @@ const FilePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('stepOne.filePreview', { ns: 'datasetCreation' })}</span>
-          <div className="flex h-6 w-6 cursor-pointer items-center justify-center" onClick={hidePreview}>
-            <XMarkIcon className="h-4 w-4"></XMarkIcon>
-          </div>
+          <button
+            type="button"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={hidePreview}
+          >
+            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+          </button>
         </div>
         <div className={cn(s.fileName, 'system-xs-medium')}>
           <span>{getFileName(file)}</span>
diff --git a/web/app/components/datasets/create/notion-page-preview/__tests__/index.spec.tsx b/web/app/components/datasets/create/notion-page-preview/__tests__/index.spec.tsx
index 572677ced7..d69a3b5513 100644
--- a/web/app/components/datasets/create/notion-page-preview/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/__tests__/index.spec.tsx
@@ -118,9 +118,9 @@ describe('NotionPagePreview', () => {
     })
 
     it('should render close button with XMarkIcon', async () => {
-      const { container } = await renderNotionPagePreview()
+      await renderNotionPagePreview()
 
-      const closeButton = container.querySelector('.cursor-pointer')
+      const closeButton = screen.getByRole('button', { name: /operation\.close$/ })
       expect(closeButton).toBeInTheDocument()
       const xMarkIcon = closeButton?.querySelector('svg')
       expect(xMarkIcon).toBeInTheDocument()
@@ -348,19 +348,18 @@ describe('NotionPagePreview', () => {
   describe('User Interactions', () => {
     it('should call hidePreview when close button is clicked', async () => {
       const hidePreview = vi.fn()
-      const { container } = await renderNotionPagePreview({ hidePreview })
+      await renderNotionPagePreview({ hidePreview })
 
-      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
-      fireEvent.click(closeButton)
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
 
       expect(hidePreview).toHaveBeenCalledTimes(1)
     })
 
     it('should handle multiple clicks on close button', async () => {
       const hidePreview = vi.fn()
-      const { container } = await renderNotionPagePreview({ hidePreview })
+      await renderNotionPagePreview({ hidePreview })
 
-      const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
+      const closeButton = screen.getByRole('button', { name: /operation\.close$/ })
       fireEvent.click(closeButton)
       fireEvent.click(closeButton)
       fireEvent.click(closeButton)
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index 116090413a..c2eed225c0 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -52,9 +52,14 @@ const NotionPagePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('stepOne.pagePreview', { ns: 'datasetCreation' })}</span>
-          <div className="flex h-6 w-6 cursor-pointer items-center justify-center" onClick={hidePreview}>
-            <XMarkIcon className="h-4 w-4"></XMarkIcon>
-          </div>
+          <button
+            type="button"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={hidePreview}
+          >
+            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+          </button>
         </div>
         <div className={cn(s.fileName, 'system-xs-medium')}>
           <NotionIcon
diff --git a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
index 840c5cc0e5..5f0cd67fbf 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
@@ -84,9 +84,8 @@ describe('StopEmbeddingModal', () => {
     it('should render buttons in correct order (cancel first, then confirm)', () => {
       renderStopEmbeddingModal({ show: true })
 
-      // Assert - Due to flex-row-reverse, confirm appears first visually but cancel is first in DOM
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(2)
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
     })
 
     it('should render confirm button with primary variant styling', () => {
@@ -290,48 +289,28 @@ describe('StopEmbeddingModal', () => {
     })
 
     describe('Close Icon', () => {
-      it('should call onHide when close span is clicked', async () => {
+      it('should call onHide when close button is clicked', async () => {
         const onConfirm = vi.fn()
         const onHide = vi.fn()
-        const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
+        renderStopEmbeddingModal({ onConfirm, onHide })
 
-        // Act - Find the close span (it should be the span with onClick handler)
-        const spans = container.querySelectorAll('span')
-        const closeSpan = Array.from(spans).find(span =>
-          span.className && span.getAttribute('class')?.includes('close'),
-        )
+        await act(async () => {
+          fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
+        })
 
-        if (closeSpan) {
-          await act(async () => {
-            fireEvent.click(closeSpan)
-          })
-
-          expect(onHide).toHaveBeenCalledTimes(1)
-        }
-        else {
-          // If no close span found with class, just verify the modal renders
-          // If no close span found with class, just verify the modal renders
-          expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-        }
+        expect(onHide).toHaveBeenCalledTimes(1)
       })
 
-      it('should not call onConfirm when close span is clicked', async () => {
+      it('should not call onConfirm when close button is clicked', async () => {
         const onConfirm = vi.fn()
         const onHide = vi.fn()
-        const { container } = renderStopEmbeddingModal({ onConfirm, onHide })
+        renderStopEmbeddingModal({ onConfirm, onHide })
 
-        const spans = container.querySelectorAll('span')
-        const closeSpan = Array.from(spans).find(span =>
-          span.className && span.getAttribute('class')?.includes('close'),
-        )
+        await act(async () => {
+          fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
+        })
 
-        if (closeSpan) {
-          await act(async () => {
-            fireEvent.click(closeSpan)
-          })
-
-          expect(onConfirm).not.toHaveBeenCalled()
-        }
+        expect(onConfirm).not.toHaveBeenCalled()
       })
     })
 
@@ -444,8 +423,8 @@ describe('StopEmbeddingModal', () => {
     it('should have buttons container with flex-row-reverse', () => {
       renderStopEmbeddingModal({ show: true })
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[0]!.closest('div'))!.toHaveClass('flex', 'flex-row-reverse')
+      const confirmButton = screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })
+      expect(confirmButton.closest('div'))!.toHaveClass('flex', 'flex-row-reverse')
     })
 
     it('should render title and content elements', () => {
@@ -455,11 +434,11 @@ describe('StopEmbeddingModal', () => {
       expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
     })
 
-    it('should render two buttons', () => {
+    it('should render two action buttons', () => {
       renderStopEmbeddingModal({ show: true })
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(2)
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
     })
   })
 
@@ -563,8 +542,9 @@ describe('StopEmbeddingModal', () => {
     it('should have semantic button elements', () => {
       renderStopEmbeddingModal({ show: true })
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(2)
+      expect(screen.getByRole('button', { name: /operation\.close$/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
     })
 
     it('should have accessible text content', () => {
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index 41faf58b09..a696f90585 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -41,7 +41,12 @@ const StopEmbeddingModal = ({
     >
       <AlertDialogContent className={cn(s.modal, 'max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl')}>
         <div className={s.icon} />
-        <span className={s.close} onClick={onHide} />
+        <button
+          type="button"
+          className={cn(s.close, 'border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden')}
+          aria-label={t('operation.close', { ns: 'common' })}
+          onClick={onHide}
+        />
         <AlertDialogTitle className={s.title}>{t('stepThree.modelTitle', { ns: 'datasetCreation' })}</AlertDialogTitle>
         <AlertDialogDescription className={s.content}>{t('stepThree.modelContent', { ns: 'datasetCreation' })}</AlertDialogDescription>
         <AlertDialogActions className="flex-row-reverse gap-0 p-0">
diff --git a/web/app/components/datasets/create/website/__tests__/preview.spec.tsx b/web/app/components/datasets/create/website/__tests__/preview.spec.tsx
index 9fe447c95c..da8c270509 100644
--- a/web/app/components/datasets/create/website/__tests__/preview.spec.tsx
+++ b/web/app/components/datasets/create/website/__tests__/preview.spec.tsx
@@ -84,9 +84,7 @@ describe('WebsitePreview', () => {
 
       render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
 
-      // Assert - the close button container is a div with cursor-pointer
-      const closeButton = screen.getByText(/pagePreview/i).parentElement?.querySelector('.cursor-pointer')
-      expect(closeButton).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /operation\.close$/ })).toBeInTheDocument()
     })
   })
 
@@ -95,11 +93,7 @@ describe('WebsitePreview', () => {
       const payload = createPayload()
       render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
 
-      // Act - find the close button div with cursor-pointer class
-      const closeButton = screen.getByText(/pagePreview/i)
-        .closest('[class*="title"]')!
-        .querySelector('.cursor-pointer') as HTMLElement
-      fireEvent.click(closeButton)
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
 
       expect(mockHidePreview).toHaveBeenCalledTimes(1)
     })
@@ -108,9 +102,7 @@ describe('WebsitePreview', () => {
       const payload = createPayload()
       render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
 
-      const closeButton = screen.getByText(/pagePreview/i)
-        .closest('[class*="title"]')!
-        .querySelector('.cursor-pointer') as HTMLElement
+      const closeButton = screen.getByRole('button', { name: /operation\.close$/ })
       fireEvent.click(closeButton)
       fireEvent.click(closeButton)
 
diff --git a/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx b/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx
index bcfcf39060..5922a11cce 100644
--- a/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx
@@ -54,7 +54,7 @@ describe('UrlInput', () => {
       render(<UrlInput {...props} />)
 
       // Assert - find button by data-testid when in loading state
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       expect(runButton).toBeInTheDocument()
       // Button text should be empty when running
       expect(runButton).not.toHaveTextContent(/run/i)
@@ -67,7 +67,7 @@ describe('UrlInput', () => {
       render(<UrlInput {...props} />)
 
       // Assert - find button by data-testid when in loading state
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       expect(runButton).toBeInTheDocument()
 
       // Verify button is empty (loading state removes text)
@@ -143,7 +143,7 @@ describe('UrlInput', () => {
       const props = createUrlInputProps({ onRun, isRunning: true })
 
       render(<UrlInput {...props} />)
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       fireEvent.click(runButton)
 
       expect(onRun).not.toHaveBeenCalled()
@@ -161,7 +161,7 @@ describe('UrlInput', () => {
       rerender(<UrlInput isRunning={true} onRun={onRun} />)
 
       // Find and click the button by data-testid (loading state has no text)
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       fireEvent.click(runButton)
 
       // Assert - onRun should not be called due to early return at line 28
@@ -173,7 +173,7 @@ describe('UrlInput', () => {
       const props = createUrlInputProps({ onRun, isRunning: true })
 
       render(<UrlInput {...props} />)
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       fireEvent.click(runButton)
       fireEvent.click(runButton)
       fireEvent.click(runButton)
@@ -194,7 +194,7 @@ describe('UrlInput', () => {
       rerender(<UrlInput {...props} isRunning={true} />)
 
       // Assert - find button by data-testid and verify it's now in loading state
-      const runButton = screen.getByTestId('url-input-run-button')
+      const runButton = screen.getByRole('button', { name: /run/i })
       expect(runButton).toBeInTheDocument()
       // When loading, the button text should be empty
       expect(runButton).not.toHaveTextContent(/run/i)
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index 6b78833ccf..77887c4301 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -42,7 +42,7 @@ const UrlInput: FC<Props> = ({
         onClick={handleOnRun}
         className="ml-2"
         loading={isRunning}
-        data-testid="url-input-run-button"
+        aria-label={t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' })}
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : ''}
       </Button>
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index a46437325f..edbd72d9a1 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -22,9 +22,14 @@ const WebsitePreview = ({
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('stepOne.pagePreview', { ns: 'datasetCreation' })}</span>
-          <div className="flex h-6 w-6 cursor-pointer items-center justify-center" onClick={hidePreview}>
-            <XMarkIcon className="h-4 w-4"></XMarkIcon>
-          </div>
+          <button
+            type="button"
+            className="flex h-6 w-6 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={hidePreview}
+          >
+            <XMarkIcon className="h-4 w-4" aria-hidden="true"></XMarkIcon>
+          </button>
         </div>
         <div className="title-sm-semi-bold wrap-break-word text-text-primary">
           {payload.title}
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index 7dc184aee4..d4bd828de6 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -192,13 +192,15 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
     closeOperationsMenu()
     setShowModal(true)
   }, [closeOperationsMenu])
-  const handleDownloadClick = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {
+  const handleDownloadClick = useCallback((evt: React.MouseEvent<HTMLElement>) => {
     evt.preventDefault()
     evt.stopPropagation()
     evt.nativeEvent.stopImmediatePropagation?.()
     closeOperationsMenu()
     void handleDownload()
   }, [closeOperationsMenu, handleDownload])
+  const menuActionClassName = cn(s.actionItem, 'border-none bg-transparent')
+  const menuDeleteActionClassName = cn(menuActionClassName, s.deleteActionItem, 'group')
   return (
     <div className="flex items-center" onClick={e => e.stopPropagation()}>
       {isListScene && !embeddingAvailable && (<Switch checked={false} onCheckedChange={noop} disabled={true} size="md" />)}
@@ -227,7 +229,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                   aria-label={t('list.action.settings', { ns: 'datasetDocuments' })}
                   className={cn('mr-2 cursor-pointer rounded-lg', !isListScene
                     ? 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover'
-                    : 'p-0.5 hover:bg-state-base-hover')}
+                    : 'border-none bg-transparent p-0.5 hover:bg-state-base-hover')}
                   onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}
                 >
                   <span aria-hidden className="i-ri-equalizer-2-line h-4 w-4 text-components-button-secondary-text" />
@@ -266,68 +268,68 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
               <div className="w-full py-1">
                 {!archived && (
                   <>
-                    <div className={s.actionItem} onClick={handleShowRename}>
+                    <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleShowRename}>
                       <span aria-hidden className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
                       <span className={s.actionName}>{t('list.table.rename', { ns: 'datasetDocuments' })}</span>
-                    </div>
+                    </button>
                     {data_source_type === DataSourceType.FILE && (
-                      <div className={s.actionItem} onClick={handleDownloadClick}>
+                      <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleDownloadClick}>
                         <span aria-hidden className="i-ri-download-2-line h-4 w-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.download', { ns: 'datasetDocuments' })}</span>
-                      </div>
+                      </button>
                     )}
                     {['notion_import', DataSourceType.WEB].includes(data_source_type) && (
-                      <div className={s.actionItem} onClick={() => handleMenuOperation('sync')}>
+                      <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('sync')}>
                         <span aria-hidden className="i-ri-loop-left-line h-4 w-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.sync', { ns: 'datasetDocuments' })}</span>
-                      </div>
+                      </button>
                     )}
                     {IS_CE_EDITION && (
-                      <div className={s.actionItem} onClick={() => handleMenuOperation('summary')}>
+                      <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('summary')}>
                         <span aria-hidden className="i-custom-vender-knowledge-search-lines-sparkle h-4 w-4 text-text-tertiary" />
                         <span className={s.actionName}>{t('list.action.summary', { ns: 'datasetDocuments' })}</span>
-                      </div>
+                      </button>
                     )}
                     <Divider className="my-1" />
                   </>
                 )}
                 {archived && data_source_type === DataSourceType.FILE && (
                   <>
-                    <div className={s.actionItem} onClick={handleDownloadClick}>
+                    <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={handleDownloadClick}>
                       <span aria-hidden className="i-ri-download-2-line h-4 w-4 text-text-tertiary" />
                       <span className={s.actionName}>{t('list.action.download', { ns: 'datasetDocuments' })}</span>
-                    </div>
+                    </button>
                     <Divider className="my-1" />
                   </>
                 )}
                 {!archived && display_status?.toLowerCase() === 'indexing' && (
-                  <div className={s.actionItem} onClick={() => handleMenuOperation('pause')}>
+                  <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('pause')}>
                     <span aria-hidden className="i-ri-pause-circle-line h-4 w-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.pause', { ns: 'datasetDocuments' })}</span>
-                  </div>
+                  </button>
                 )}
                 {!archived && display_status?.toLowerCase() === 'paused' && (
-                  <div className={s.actionItem} onClick={() => handleMenuOperation('resume')}>
+                  <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('resume')}>
                     <span aria-hidden className="i-ri-play-circle-line h-4 w-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.resume', { ns: 'datasetDocuments' })}</span>
-                  </div>
+                  </button>
                 )}
                 {!archived && (
-                  <div className={s.actionItem} onClick={() => handleMenuOperation('archive')}>
+                  <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('archive')}>
                     <span aria-hidden className="i-ri-archive-2-line h-4 w-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.archive', { ns: 'datasetDocuments' })}</span>
-                  </div>
+                  </button>
                 )}
                 {archived && (
-                  <div className={s.actionItem} onClick={() => handleMenuOperation('un_archive')}>
+                  <button type="button" className={cn(menuActionClassName, 'text-left')} onClick={() => handleMenuOperation('un_archive')}>
                     <span aria-hidden className="i-ri-archive-2-line h-4 w-4 text-text-tertiary" />
                     <span className={s.actionName}>{t('list.action.unarchive', { ns: 'datasetDocuments' })}</span>
-                  </div>
+                  </button>
                 )}
-                <div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={handleDeleteClick}>
+                <button type="button" className={cn(menuDeleteActionClassName, 'text-left')} onClick={handleDeleteClick}>
                   <span aria-hidden className="i-ri-delete-bin-line h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
                   <span className={cn(s.actionName, 'group-hover:text-text-destructive')}>{t('list.action.delete', { ns: 'datasetDocuments' })}</span>
-                </div>
+                </button>
               </div>
             </DropdownMenuContent>
           </DropdownMenu>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/__tests__/index.spec.tsx
index b0cbedd428..4ec1565090 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/__tests__/index.spec.tsx
@@ -337,7 +337,7 @@ describe('FileList', () => {
         render(<FileList {...props} />)
 
         // Act - Click the clear icon div (it contains RiCloseCircleFill icon)
-        const clearButton = screen.getByTestId('input-clear')
+        const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
         expect(clearButton).toBeInTheDocument()
         fireEvent.click(clearButton!)
 
@@ -351,7 +351,7 @@ describe('FileList', () => {
         fireEvent.change(input, { target: { value: 'some-search' } })
 
         // Act - Find and click the clear icon
-        const clearButton = screen.getByTestId('input-clear')
+        const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
         expect(clearButton).toBeInTheDocument()
         fireEvent.click(clearButton!)
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
index dcb1922fe9..c4ce60274b 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/__tests__/index.spec.tsx
@@ -320,7 +320,7 @@ describe('Header', () => {
         render(<Header {...props} />)
 
         // Act - Find and click the clear icon container
-        const clearButton = screen.getByTestId('input-clear')
+        const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
         expect(clearButton)!.toBeInTheDocument()
         fireEvent.click(clearButton!)
 
@@ -332,7 +332,7 @@ describe('Header', () => {
         render(<Header {...props} />)
 
         // Act & Assert - Clear icon should not be visible
-        const clearIcon = screen.queryByTestId('input-clear')
+        const clearIcon = screen.queryByRole('button', { name: 'common.operation.clear' })
         expect(clearIcon).not.toBeInTheDocument()
       })
 
@@ -341,7 +341,7 @@ describe('Header', () => {
         render(<Header {...props} />)
 
         // Act & Assert - Clear icon should be visible
-        const clearIcon = screen.getByTestId('input-clear')
+        const clearIcon = screen.getByRole('button', { name: 'common.operation.clear' })
         expect(clearIcon)!.toBeInTheDocument()
       })
     })
@@ -582,9 +582,9 @@ describe('Header', () => {
       const { rerender } = render(<Header {...props} />)
 
       // Act - Click clear, rerender, click again
-      fireEvent.click(screen.getByTestId('input-clear'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
       rerender(<Header {...props} />)
-      fireEvent.click(screen.getByTestId('input-clear'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
 
       expect(mockHandleResetKeywords).toHaveBeenCalledTimes(2)
     })
diff --git a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
index 900c12a416..e717475b38 100644
--- a/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/index.spec.tsx
@@ -311,19 +311,19 @@ describe('DocumentDetail', () => {
   describe('Navigation', () => {
     it('should navigate back when back button clicked', () => {
       render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
-      fireEvent.click(screen.getByTestId('document-detail-back-button'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.back' }))
       expect(mocks.push).toHaveBeenCalledWith('/datasets/ds-1/documents')
     })
 
     it('should expose aria label for back button', () => {
       render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
-      expect(screen.getByTestId('document-detail-back-button')).toHaveAttribute('aria-label')
+      expect(screen.getByRole('button', { name: 'common.operation.back' })).toHaveAttribute('aria-label')
     })
 
     it('should preserve query params when navigating back', () => {
       mocks.state.searchParams = 'page=2&status=active'
       render(<DocumentDetail datasetId="ds-1" documentId="doc-1" />)
-      fireEvent.click(screen.getByTestId('document-detail-back-button'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.back' }))
       expect(mocks.push).toHaveBeenCalledWith('/datasets/ds-1/documents?page=2&status=active')
     })
   })
diff --git a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
index f6ebf0d29d..c361c8be13 100644
--- a/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/__tests__/new-segment.spec.tsx
@@ -201,13 +201,9 @@ describe('NewSegmentModal', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       const mockOnCancel = vi.fn()
-      const { container } = render(<NewSegmentModal {...defaultProps} onCancel={mockOnCancel} />)
+      render(<NewSegmentModal {...defaultProps} onCancel={mockOnCancel} />)
 
-      // Act - find and click close button (RiCloseLine icon wrapper)
-      const closeButtons = container.querySelectorAll('.cursor-pointer')
-      // The close button is the second cursor-pointer element
-      if (closeButtons.length > 1)
-        fireEvent.click(closeButtons[1]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(mockOnCancel).toHaveBeenCalled()
     })
@@ -350,12 +346,9 @@ describe('NewSegmentModal', () => {
     })
 
     it('should call toggleFullScreen when expand button is clicked', () => {
-      const { container } = render(<NewSegmentModal {...defaultProps} />)
+      render(<NewSegmentModal {...defaultProps} />)
 
-      // Act - click the expand button (first cursor-pointer)
-      const expandButtons = container.querySelectorAll('.cursor-pointer')
-      if (expandButtons.length > 0)
-        fireEvent.click(expandButtons[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.zoomIn' }))
 
       expect(mockToggleFullScreen).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
index 0cd2a31491..a4d7871719 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/__tests__/csv-uploader.spec.tsx
@@ -74,7 +74,7 @@ describe('CSVUploader', () => {
       render(<CSVUploader {...defaultProps} />)
 
       expect(screen.getByText(/list\.batchModal\.csvUploadTitle/i)).toBeInTheDocument()
-      expect(screen.getByText(/list\.batchModal\.browse/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /list\.batchModal\.browse/i })).toBeInTheDocument()
     })
 
     it('should render hidden file input', () => {
@@ -139,11 +139,32 @@ describe('CSVUploader', () => {
       const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
       const clickSpy = vi.spyOn(fileInput, 'click')
 
-      fireEvent.click(screen.getByText(/list\.batchModal\.browse/i))
+      fireEvent.click(screen.getByRole('button', { name: /list\.batchModal\.browse/i }))
 
       expect(clickSpy).toHaveBeenCalled()
     })
 
+    it('should clear the selected file when delete is clicked', () => {
+      const mockUpdateFile = vi.fn()
+      const mockFile: FileItem = {
+        fileID: 'file-1',
+        file: new File(['content'], 'test.csv', { type: 'text/csv' }) as CustomFile,
+        progress: 100,
+      }
+      const { container } = render(<CSVUploader {...defaultProps} file={mockFile} updateFile={mockUpdateFile} />)
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+      Object.defineProperty(fileInput, 'value', {
+        configurable: true,
+        value: 'C:\\fakepath\\test.csv',
+        writable: true,
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: /operation\.delete$/ }))
+
+      expect(fileInput.value).toBe('')
+      expect(mockUpdateFile).toHaveBeenCalledWith()
+    })
+
     it('should call updateFile when file is selected', async () => {
       const mockUpdateFile = vi.fn()
       mockUpload.mockResolvedValueOnce({ id: 'uploaded-id' })
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 0e86c057cc..15d6d803d4 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -175,7 +175,13 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
               <CSVIcon className="shrink-0" />
               <div className="text-text-secondary">
                 {t('list.batchModal.csvUploadTitle', { ns: 'datasetDocuments' })}
-                <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('list.batchModal.browse', { ns: 'datasetDocuments' })}</span>
+                <button
+                  type="button"
+                  className="inline cursor-pointer border-none bg-transparent p-0 text-left text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={selectHandle}
+                >
+                  {t('list.batchModal.browse', { ns: 'datasetDocuments' })}
+                </button>
               </div>
             </div>
             {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
@@ -197,9 +203,14 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
               )}
               <Button onClick={selectHandle}>{t('stepOne.uploader.change', { ns: 'datasetCreation' })}</Button>
               <div className="mx-2 h-4 w-px bg-text-secondary" />
-              <div className="cursor-pointer p-2" onClick={removeFile}>
-                <RiDeleteBinLine className="h-4 w-4 text-text-secondary" />
-              </div>
+              <button
+                type="button"
+                className="cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                aria-label={t('operation.delete', { ns: 'common' })}
+                onClick={removeFile}
+              >
+                <RiDeleteBinLine className="h-4 w-4 text-text-secondary" aria-hidden="true" />
+              </button>
             </div>
           </div>
         )}
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/child-segment-detail.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/child-segment-detail.spec.tsx
index b3bec1b0b8..a7de0258c0 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/child-segment-detail.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/child-segment-detail.spec.tsx
@@ -129,23 +129,19 @@ describe('ChildSegmentDetail', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       const mockOnCancel = vi.fn()
-      const { container } = render(
+      render(
         <ChildSegmentDetail {...defaultProps} onCancel={mockOnCancel} />,
       )
 
-      const closeButtons = container.querySelectorAll('.cursor-pointer')
-      if (closeButtons.length > 1)
-        fireEvent.click(closeButtons[1]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(mockOnCancel).toHaveBeenCalled()
     })
 
     it('should call toggleFullScreen when expand button is clicked', () => {
-      const { container } = render(<ChildSegmentDetail {...defaultProps} />)
+      render(<ChildSegmentDetail {...defaultProps} />)
 
-      const expandButtons = container.querySelectorAll('.cursor-pointer')
-      if (expandButtons.length > 0)
-        fireEvent.click(expandButtons[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.zoomIn' }))
 
       expect(mockToggleFullScreen).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
index d993ff849e..1fa92b5b0d 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/new-child-segment.spec.tsx
@@ -141,23 +141,19 @@ describe('NewChildSegmentModal', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       const mockOnCancel = vi.fn()
-      const { container } = render(
+      render(
         <NewChildSegmentModal {...defaultProps} onCancel={mockOnCancel} />,
       )
 
-      const closeButtons = container.querySelectorAll('.cursor-pointer')
-      if (closeButtons.length > 1)
-        fireEvent.click(closeButtons[1]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(mockOnCancel).toHaveBeenCalled()
     })
 
     it('should call toggleFullScreen when expand button is clicked', () => {
-      const { container } = render(<NewChildSegmentModal {...defaultProps} />)
+      render(<NewChildSegmentModal {...defaultProps} />)
 
-      const expandButtons = container.querySelectorAll('.cursor-pointer')
-      if (expandButtons.length > 0)
-        fireEvent.click(expandButtons[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.zoomIn' }))
 
       expect(mockToggleFullScreen).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/documents/detail/completed/__tests__/segment-detail.spec.tsx b/web/app/components/datasets/documents/detail/completed/__tests__/segment-detail.spec.tsx
index 1f10053596..8ac57759cd 100644
--- a/web/app/components/datasets/documents/detail/completed/__tests__/segment-detail.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/__tests__/segment-detail.spec.tsx
@@ -278,21 +278,17 @@ describe('SegmentDetail', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       const mockOnCancel = vi.fn()
-      const { container } = render(<SegmentDetail {...defaultProps} onCancel={mockOnCancel} />)
+      render(<SegmentDetail {...defaultProps} onCancel={mockOnCancel} />)
 
-      const closeButtons = container.querySelectorAll('.cursor-pointer')
-      if (closeButtons.length > 1)
-        fireEvent.click(closeButtons[1]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(mockOnCancel).toHaveBeenCalled()
     })
 
     it('should call toggleFullScreen when expand button is clicked', () => {
-      const { container } = render(<SegmentDetail {...defaultProps} />)
+      render(<SegmentDetail {...defaultProps} />)
 
-      const expandButtons = container.querySelectorAll('.cursor-pointer')
-      if (expandButtons.length > 0)
-        fireEvent.click(expandButtons[0]!)
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.zoomIn' }))
 
       expect(mockToggleFullScreen).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index 88767d628f..c4b3fc89f4 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -99,12 +99,24 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
               <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
-          <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
-            {fullScreen ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" /> : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" />}
-          </div>
-          <div className="flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onCancel}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            aria-label={t(fullScreen ? 'operation.zoomOut' : 'operation.zoomIn', { ns: 'common' })}
+            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={toggleFullScreen}
+          >
+            {fullScreen
+              ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+              : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />}
+          </button>
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={onCancel}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
       <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
diff --git a/web/app/components/datasets/documents/detail/completed/components/__tests__/menu-bar.spec.tsx b/web/app/components/datasets/documents/detail/completed/components/__tests__/menu-bar.spec.tsx
index 9c170f3a32..15cd617aaa 100644
--- a/web/app/components/datasets/documents/detail/completed/components/__tests__/menu-bar.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/components/__tests__/menu-bar.spec.tsx
@@ -69,7 +69,7 @@ describe('MenuBar', () => {
 
   it('should call onInputChange with empty string when input is cleared', () => {
     render(<MenuBar {...defaultProps} inputValue="some text" />)
-    const clearButton = screen.getByTestId('input-clear')
+    const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
     fireEvent.click(clearButton)
     expect(defaultProps.onInputChange).toHaveBeenCalledWith('')
   })
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 386757a5b2..572cf65bf7 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -111,12 +111,22 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
               <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
-          <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" />
-          </div>
-          <div className="flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={handleCancel.bind(null, 'esc')}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            aria-label={t('operation.zoomIn', { ns: 'common' })}
+            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={toggleFullScreen}
+          >
+            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={handleCancel.bind(null, 'esc')}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
       <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/__tests__/index.spec.tsx
index fd431af95d..6df95ddaba 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/__tests__/index.spec.tsx
@@ -221,8 +221,8 @@ describe('SegmentCard', () => {
         />,
       )
 
-      expect(screen.getByTestId('segment-edit-button')).toBeInTheDocument()
-      expect(screen.getByTestId('segment-delete-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.edit' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.delete' })).toBeInTheDocument()
       expect(screen.getByRole('switch')).toBeInTheDocument()
     })
 
@@ -270,7 +270,7 @@ describe('SegmentCard', () => {
         />,
       )
 
-      const deleteButton = screen.getByTestId('segment-delete-button')
+      const deleteButton = screen.getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
@@ -290,7 +290,7 @@ describe('SegmentCard', () => {
         />,
       )
 
-      const deleteButton = screen.getByTestId('segment-delete-button')
+      const deleteButton = screen.getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
@@ -365,7 +365,7 @@ describe('SegmentCard', () => {
         />,
       )
 
-      const editButton = screen.getByTestId('segment-edit-button')
+      const editButton = screen.getByRole('button', { name: 'common.operation.edit' })
       fireEvent.click(editButton)
 
       expect(onClickEdit).toHaveBeenCalledTimes(1)
@@ -385,7 +385,7 @@ describe('SegmentCard', () => {
         />,
       )
 
-      const deleteButton = screen.getByTestId('segment-delete-button')
+      const deleteButton = screen.getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
@@ -437,7 +437,7 @@ describe('SegmentCard', () => {
         />,
       )
 
-      const editButton = screen.getByTestId('segment-edit-button')
+      const editButton = screen.getByRole('button', { name: 'common.operation.edit' })
       fireEvent.click(editButton)
 
       expect(onClickEdit).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index 865ffbce15..c30d123052 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -187,15 +187,14 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                               render={(
                                 <button
                                   type="button"
-                                  aria-label="Edit"
-                                  data-testid="segment-edit-button"
-                                  className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover"
+                                  aria-label={t('operation.edit', { ns: 'common' })}
+                                  className="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover"
                                   onClick={(e) => {
                                     e.stopPropagation()
                                     onClickEdit?.()
                                   }}
                                 >
-                                  <RiEditLine className="h-4 w-4 text-text-tertiary" />
+                                  <RiEditLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
                                 </button>
                               )}
                             />
@@ -206,15 +205,14 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                               render={(
                                 <button
                                   type="button"
-                                  aria-label="Delete"
-                                  data-testid="segment-delete-button"
-                                  className="group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover"
+                                  aria-label={t('operation.delete', { ns: 'common' })}
+                                  className="group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-destructive-hover"
                                   onClick={(e) => {
                                     e.stopPropagation()
                                     setShowModal(true)
                                   }}
                                 >
-                                  <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover/delete:text-text-destructive" />
+                                  <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover/delete:text-text-destructive" aria-hidden="true" />
                                 </button>
                               )}
                             />
@@ -269,7 +267,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           ? (
               <button
                 type="button"
-                className="mt-0.5 mb-2 system-xs-semibold-uppercase text-text-accent"
+                className="mt-0.5 mb-2 border-none bg-transparent p-0 text-left system-xs-semibold-uppercase text-text-accent"
                 onClick={() => onClick?.()}
               >
                 {t('operation.viewMore', { ns: 'common' })}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index fad94819b0..0713289ef4 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -151,16 +151,26 @@ export function SegmentDetail({
               <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
-          <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
+          <button
+            type="button"
+            aria-label={t(fullScreen ? 'operation.zoomOut' : 'operation.zoomIn', { ns: 'common' })}
+            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={toggleFullScreen}
+          >
             {
               fullScreen
-                ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" />
-                : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" />
+                ? <RiCollapseDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                : <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
             }
-          </div>
-          <div className="flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onCancel}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          </button>
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={onCancel}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
       <div className={cn(
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 43fc99851d..732d7ffb28 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -200,11 +200,10 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
         <div className="flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pr-4 pl-3">
           <button
             type="button"
-            data-testid="document-detail-back-button"
             aria-label={backButtonLabel}
             title={backButtonLabel}
             onClick={backToPrev}
-            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg"
+            className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 hover:bg-components-button-tertiary-bg focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
           >
             <span
               aria-hidden="true"
diff --git a/web/app/components/datasets/documents/detail/metadata/components/__tests__/doc-type-selector.spec.tsx b/web/app/components/datasets/documents/detail/metadata/components/__tests__/doc-type-selector.spec.tsx
index 55295579f0..d09077846e 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/__tests__/doc-type-selector.spec.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/__tests__/doc-type-selector.spec.tsx
@@ -133,7 +133,7 @@ describe('DocumentTypeDisplay', () => {
       const onClick = vi.fn()
       render(<DocumentTypeDisplay displayType="book" showChangeLink={true} onChangeClick={onClick} />)
 
-      fireEvent.click(screen.getByText(/operation\.change/))
+      fireEvent.click(screen.getByRole('button', { name: /operation\.change/ }))
 
       expect(onClick).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
index 5dfa02aa80..9cce66822b 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
@@ -122,9 +122,13 @@ export const DocumentTypeDisplay: FC<DocumentTypeDisplayProps> = ({
           {showChangeLink && (
             <div className="ml-1 inline-flex items-center gap-1">
               ·
-              <div onClick={onChangeClick} className="cursor-pointer hover:text-text-accent">
+              <button
+                type="button"
+                className="inline cursor-pointer border-none bg-transparent p-0 text-left hover:text-text-accent"
+                onClick={onChangeClick}
+              >
                 {t('operation.change', { ns: 'common' })}
-              </div>
+              </button>
             </div>
           )}
         </>
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 0426bb9584..5bf5641735 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -142,12 +142,22 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
               <Divider type="vertical" className="mr-2 ml-4 h-3.5 bg-divider-regular" />
             </>
           )}
-          <div className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={toggleFullScreen}>
-            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" />
-          </div>
-          <div className="flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={handleCancel.bind(null, 'esc')}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            aria-label={t('operation.zoomIn', { ns: 'common' })}
+            className="mr-1 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={toggleFullScreen}
+          >
+            <RiExpandDiagonalLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            aria-label={t('operation.close', { ns: 'common' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-1.5"
+            onClick={handleCancel.bind(null, 'esc')}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
       <div className={cn('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
diff --git a/web/app/components/datasets/documents/detail/segment-add/__tests__/index.spec.tsx b/web/app/components/datasets/documents/detail/segment-add/__tests__/index.spec.tsx
index 0783af8569..b31641a076 100644
--- a/web/app/components/datasets/documents/detail/segment-add/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/__tests__/index.spec.tsx
@@ -106,7 +106,7 @@ describe('SegmentAdd', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText(/list\.batchModal\.ok/i))
+      fireEvent.click(screen.getByRole('button', { name: /list\.batchModal\.ok/i }))
 
       expect(mockClearImportStatus).toHaveBeenCalledTimes(1)
     })
@@ -121,7 +121,7 @@ describe('SegmentAdd', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText(/list\.batchModal\.ok/i))
+      fireEvent.click(screen.getByRole('button', { name: /list\.batchModal\.ok/i }))
 
       expect(mockClearImportStatus).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index da4a0109c0..43b30f7906 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -80,7 +80,13 @@ export function SegmentAdd({
               <span className="pr-0.5 system-sm-medium">{t('list.batchModal.completed', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
-              <span className="cursor-pointer rounded-md px-1.5 py-1 system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearImportStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
+              <button
+                type="button"
+                className="cursor-pointer rounded-md border-none bg-transparent px-1.5 py-1 text-left system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={clearImportStatus}
+              >
+                {t('list.batchModal.ok', { ns: 'datasetDocuments' })}
+              </button>
             </div>
             <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40" />
           </div>
@@ -92,7 +98,13 @@ export function SegmentAdd({
               <span className="pr-0.5 system-sm-medium">{t('list.batchModal.error', { ns: 'datasetDocuments' })}</span>
             </div>
             <div className="m-1 inline-flex items-center">
-              <span className="cursor-pointer rounded-md px-1.5 py-1 system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover" onClick={clearImportStatus}>{t('list.batchModal.ok', { ns: 'datasetDocuments' })}</span>
+              <button
+                type="button"
+                className="cursor-pointer rounded-md border-none bg-transparent px-1.5 py-1 text-left system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={clearImportStatus}
+              >
+                {t('list.batchModal.ok', { ns: 'datasetDocuments' })}
+              </button>
             </div>
             <div className="absolute top-0 left-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40" />
           </div>
@@ -111,7 +123,7 @@ export function SegmentAdd({
     >
       <button
         type="button"
-        className={`inline-flex items-center rounded-l-lg border-r border-r-divider-subtle px-2.5 py-2
+        className={`inline-flex items-center rounded-l-lg border-0 border-r border-r-divider-subtle bg-transparent px-2.5 py-2 text-left
           hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`}
         onClick={handleAddClick}
         disabled={embedding}
@@ -126,7 +138,7 @@ export function SegmentAdd({
           aria-label={t('list.action.batchAdd', { ns: 'datasetDocuments' })}
           disabled={embedding}
           className={cn(
-            `rounded-l-none rounded-r-lg border-0 p-2 backdrop-blur-[5px]
+            `rounded-l-none rounded-r-lg border-0 bg-transparent p-2 backdrop-blur-[5px]
             hover:bg-state-base-hover disabled:cursor-not-allowed disabled:bg-transparent disabled:hover:bg-transparent`,
             isBatchMenuOpen && 'bg-state-base-hover',
           )}
diff --git a/web/app/components/datasets/documents/style.module.css b/web/app/components/datasets/documents/style.module.css
index 6df8d0f5f8..dccc964942 100644
--- a/web/app/components/datasets/documents/style.module.css
+++ b/web/app/components/datasets/documents/style.module.css
@@ -17,7 +17,7 @@
   @apply !p-2 !border-[0.5px] !border-components-button-secondary-border !bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 hover:!border-components-button-secondary-border-hover hover:!bg-components-button-secondary-bg-hover;
 }
 .actionItem {
-  @apply h-9 py-2 px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer;
+  @apply h-9 py-2 px-3 mx-1 flex items-center gap-2 rounded-lg border-none bg-transparent text-left hover:bg-state-base-hover cursor-pointer;
 }
 .deleteActionItem {
   @apply hover:!bg-state-destructive-hover;
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
index aa64962aa6..366732cbbc 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
@@ -22,8 +22,8 @@ vi.mock('@langgenius/dify-ui/toast', () => ({
 }))
 
 vi.mock('@langgenius/dify-ui/button', () => ({
-  Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
-    <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
+  Button: ({ children, onClick }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
+    <button onClick={onClick}>
       {children}
     </button>
   ),
@@ -104,13 +104,19 @@ describe('ModifyRetrievalModal', () => {
 
   it('should call onHide when cancel button clicked', () => {
     render(<ModifyRetrievalModal {...defaultProps} />)
-    fireEvent.click(screen.getByTestId('cancel-button'))
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel$/ }))
+    expect(defaultProps.onHide).toHaveBeenCalled()
+  })
+
+  it('should call onHide when close button clicked', () => {
+    render(<ModifyRetrievalModal {...defaultProps} />)
+    fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
     expect(defaultProps.onHide).toHaveBeenCalled()
   })
 
   it('should call onSave with retrieval config when save clicked', () => {
     render(<ModifyRetrievalModal {...defaultProps} />)
-    fireEvent.click(screen.getByTestId('save-button'))
+    fireEvent.click(screen.getByRole('button', { name: /operation\.save$/ }))
     expect(defaultProps.onSave).toHaveBeenCalled()
   })
 
diff --git a/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx b/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
index b4d017d0df..90e52bf271 100644
--- a/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/__tests__/chunk-detail-modal.spec.tsx
@@ -127,7 +127,7 @@ describe('ChunkDetailModal', () => {
 
   it('should call onHide when close button is clicked', () => {
     render(<ChunkDetailModal payload={makePayload()} onHide={onHide} />)
-    fireEvent.click(screen.getByTestId('modal-close-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
     expect(onHide).toHaveBeenCalled()
   })
 
diff --git a/web/app/components/datasets/hit-testing/components/__tests__/result-item-footer.spec.tsx b/web/app/components/datasets/hit-testing/components/__tests__/result-item-footer.spec.tsx
index 44a7dc2c89..425066dbb6 100644
--- a/web/app/components/datasets/hit-testing/components/__tests__/result-item-footer.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/__tests__/result-item-footer.spec.tsx
@@ -61,8 +61,7 @@ describe('ResultItemFooter', () => {
         />,
       )
 
-      const openButton = screen.getByText(/open/i)
-      fireEvent.click(openButton)
+      fireEvent.click(screen.getByRole('button', { name: /open/i }))
 
       expect(mockShowDetailModal).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index 6f789a81ce..2e3c1f95db 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -61,7 +61,6 @@ const ChunkDetailModal = ({
     >
       <DialogContent className={cn('max-h-none overflow-hidden! border-none p-6 text-left align-middle', isParentChildRetrieval ? 'w-[1200px] max-w-none! min-w-[1200px]!' : 'w-[800px] max-w-none! min-w-[800px]!')}>
         <DialogCloseButton
-          data-testid="modal-close-button"
           onClick={(e) => {
             e.stopPropagation()
             onHide()
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index 9f68e054d1..4f7f65b8a2 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -46,7 +46,7 @@ const ResultItemExternal: FC<Props> = ({ payload, positionId }) => {
           }}
         >
           <DialogContent className="w-full min-w-[800px]! overflow-hidden! border-none text-left align-middle">
-            <DialogCloseButton data-testid="modal-close-button" />
+            <DialogCloseButton />
             <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t(`${i18nPrefix}chunkDetail`, { ns: 'datasetHitTesting' })}
             </DialogTitle>
diff --git a/web/app/components/datasets/hit-testing/components/result-item-footer.tsx b/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
index 5b1198fcc1..bb1b7c172d 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-footer.tsx
@@ -28,13 +28,14 @@ const ResultItemFooter: FC<Props> = ({
           {docTitle}
         </span>
       </div>
-      <div
-        className="flex cursor-pointer items-center space-x-1 text-text-tertiary"
+      <button
+        type="button"
+        className="flex cursor-pointer items-center space-x-1 border-none bg-transparent p-0 text-left text-text-tertiary"
         onClick={showDetailModal}
       >
         <div className="text-xs uppercase">{t(`${i18nPrefix}open`, { ns: 'datasetHitTesting' })}</div>
-        <RiArrowRightUpLine className="size-3.5" />
-      </div>
+        <RiArrowRightUpLine className="size-3.5" aria-hidden />
+      </button>
     </div>
   )
 }
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index 98bcab2755..02103e02c8 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -85,9 +85,14 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
           </div>
         </div>
         <div className="flex">
-          <div onClick={onHide} className="flex h-8 w-8 cursor-pointer items-center justify-center">
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onHide}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
       </div>
 
diff --git a/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx b/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
index 2684278777..c42186c375 100644
--- a/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
+++ b/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
@@ -20,13 +20,13 @@ vi.mock('@/app/components/base/date-and-time-picker/date-picker', () => ({
       handleClickTrigger: () => {},
     })
     return (
-      <div data-testid="date-picker-wrapper">
+      <div role="group" aria-label="Date picker">
         {trigger}
-        <button data-testid="select-date" onClick={() => onChange(value || null)}>
+        <button onClick={() => onChange(value || null)}>
           Select Date
         </button>
-        <button data-testid="clear-date" onClick={() => onClear()}>
-          Clear
+        <button onClick={() => onClear()}>
+          Clear Date
         </button>
       </div>
     )
@@ -49,21 +49,20 @@ describe('WrappedDatePicker', () => {
     it('should render without crashing', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker onChange={handleChange} />)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should render placeholder text when no value', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker onChange={handleChange} />)
-      // When no value, should show placeholder from i18n
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'dataset.metadata.chooseTime' })).toBeInTheDocument()
     })
 
     it('should render formatted date when value is provided', () => {
       const handleChange = vi.fn()
       const timestamp = Math.floor(Date.now() / 1000)
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should render calendar icon', () => {
@@ -76,24 +75,22 @@ describe('WrappedDatePicker', () => {
     it('should render select date button', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker onChange={handleChange} />)
-      expect(screen.getByTestId('select-date')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Select Date' })).toBeInTheDocument()
     })
 
     it('should render clear date button', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker onChange={handleChange} />)
-      expect(screen.getByTestId('clear-date')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Clear Date' })).toBeInTheDocument()
     })
 
     it('should render close icon for clearing', () => {
       const handleChange = vi.fn()
       const timestamp = Math.floor(Date.now() / 1000)
-      const { container } = render(
+      render(
         <WrappedDatePicker value={timestamp} onChange={handleChange} />,
       )
-      // RiCloseCircleFill should be rendered
-      const closeIcon = container.querySelectorAll('svg')
-      expect(closeIcon.length).toBeGreaterThan(0)
+      expect(screen.getByRole('button', { name: 'common.operation.clear' })).toBeInTheDocument()
     })
   })
 
@@ -110,14 +107,14 @@ describe('WrappedDatePicker', () => {
     it('should accept undefined value', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker value={undefined} onChange={handleChange} />)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should accept number value', () => {
       const handleChange = vi.fn()
       const timestamp = 1609459200 // 2021-01-01
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
   })
 
@@ -127,7 +124,7 @@ describe('WrappedDatePicker', () => {
       const timestamp = Math.floor(Date.now() / 1000)
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
 
-      fireEvent.click(screen.getByTestId('select-date'))
+      fireEvent.click(screen.getByRole('button', { name: 'Select Date' }))
 
       expect(handleChange).toHaveBeenCalled()
     })
@@ -137,7 +134,7 @@ describe('WrappedDatePicker', () => {
       const timestamp = Math.floor(Date.now() / 1000)
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
 
-      fireEvent.click(screen.getByTestId('clear-date'))
+      fireEvent.click(screen.getByRole('button', { name: 'Clear Date' }))
 
       expect(handleChange).toHaveBeenCalledWith(null)
     })
@@ -145,16 +142,13 @@ describe('WrappedDatePicker', () => {
     it('should call onChange with null when close icon is clicked directly', () => {
       const handleChange = vi.fn()
       const timestamp = Math.floor(Date.now() / 1000)
-      const { container } = render(
+      render(
         <WrappedDatePicker value={timestamp} onChange={handleChange} />,
       )
 
-      // Find the RiCloseCircleFill icon (it has specific classes)
-      const closeIcon = container.querySelector('.cursor-pointer.hover\\:text-components-input-text-filled')
-      if (closeIcon) {
-        fireEvent.click(closeIcon)
-        expect(handleChange).toHaveBeenCalledWith(null)
-      }
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
+
+      expect(handleChange).toHaveBeenCalledWith(null)
     })
 
     it('should show close button on hover when value exists', () => {
@@ -180,7 +174,7 @@ describe('WrappedDatePicker', () => {
       if (trigger)
         fireEvent.click(trigger)
 
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
   })
 
@@ -224,15 +218,14 @@ describe('WrappedDatePicker', () => {
     it('should handle timestamp of 0', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker value={0} onChange={handleChange} />)
-      // 0 is falsy but is a valid timestamp (epoch)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should handle very large timestamp', () => {
       const handleChange = vi.fn()
       const farFuture = 4102444800 // 2100-01-01
       render(<WrappedDatePicker value={farFuture} onChange={handleChange} />)
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should handle switching between no value and value', () => {
@@ -241,12 +234,12 @@ describe('WrappedDatePicker', () => {
         <WrappedDatePicker onChange={handleChange} />,
       )
 
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
 
       const timestamp = Math.floor(Date.now() / 1000)
       rerender(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
 
-      expect(screen.getByTestId('date-picker-wrapper')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Date picker' })).toBeInTheDocument()
     })
 
     it('should handle clearing date multiple times', () => {
@@ -254,9 +247,9 @@ describe('WrappedDatePicker', () => {
       const timestamp = Math.floor(Date.now() / 1000)
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
 
-      fireEvent.click(screen.getByTestId('clear-date'))
-      fireEvent.click(screen.getByTestId('clear-date'))
-      fireEvent.click(screen.getByTestId('clear-date'))
+      fireEvent.click(screen.getByRole('button', { name: 'Clear Date' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Clear Date' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Clear Date' }))
 
       expect(handleChange).toHaveBeenCalledTimes(3)
     })
@@ -266,9 +259,9 @@ describe('WrappedDatePicker', () => {
       const timestamp = Math.floor(Date.now() / 1000)
       render(<WrappedDatePicker value={timestamp} onChange={handleChange} />)
 
-      fireEvent.click(screen.getByTestId('select-date'))
-      fireEvent.click(screen.getByTestId('select-date'))
-      fireEvent.click(screen.getByTestId('select-date'))
+      fireEvent.click(screen.getByRole('button', { name: 'Select Date' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Select Date' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Select Date' }))
 
       expect(handleChange).toHaveBeenCalledTimes(3)
     })
@@ -277,10 +270,8 @@ describe('WrappedDatePicker', () => {
       const handleChange = vi.fn()
       render(<WrappedDatePicker onChange={handleChange} />)
 
-      // The mock triggers onChange with the value prop
-      fireEvent.click(screen.getByTestId('select-date'))
+      fireEvent.click(screen.getByRole('button', { name: 'Select Date' }))
 
-      // onChange should have been called
       expect(handleChange).toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index ed583b8411..b76c2e8060 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -35,29 +35,49 @@ const WrappedDatePicker = ({
   const renderTrigger = useCallback(({
     handleClickTrigger,
   }: TriggerProps) => {
+    const hasValue = Boolean(value)
+    const triggerText = value ? formatTimestamp(value, t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : t('metadata.chooseTime', { ns: 'dataset' })
+
     return (
-      <div onClick={handleClickTrigger} className={cn('group flex items-center rounded-md bg-components-input-bg-normal', className)}>
-        <div
-          className={cn(
-            'grow',
-            value ? 'text-text-secondary' : 'text-text-tertiary',
-          )}
+      <div className={cn('group flex items-center rounded-md bg-components-input-bg-normal', className)}>
+        <button
+          type="button"
+          className="flex min-w-0 grow items-center border-none bg-transparent p-0 text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={handleClickTrigger}
         >
-          {value ? formatTimestamp(value, t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : t('metadata.chooseTime', { ns: 'dataset' })}
-        </div>
-        <RiCloseCircleFill
-          className={cn(
-            'hidden h-4 w-4 cursor-pointer group-hover:block hover:text-components-input-text-filled',
-            value && 'text-text-quaternary',
-          )}
-          onClick={() => handleDateChange()}
-        />
-        <RiCalendarLine
-          className={cn(
-            'block h-4 w-4 shrink-0 group-hover:hidden',
-            value ? 'text-text-quaternary' : 'text-text-tertiary',
-          )}
-        />
+          <span
+            className={cn(
+              'grow',
+              hasValue ? 'text-text-secondary' : 'text-text-tertiary',
+            )}
+          >
+            {triggerText}
+          </span>
+          <RiCalendarLine
+            aria-hidden="true"
+            className={cn(
+              'block h-4 w-4 shrink-0',
+              hasValue ? 'text-text-quaternary group-hover:hidden' : 'text-text-tertiary',
+            )}
+          />
+        </button>
+        {hasValue
+          ? (
+              <button
+                type="button"
+                aria-label={t('operation.clear', { ns: 'common' })}
+                className={cn(
+                  'hidden h-4 w-4 cursor-pointer rounded-full border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+                )}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  handleDateChange()
+                }}
+              >
+                <RiCloseCircleFill className="h-4 w-4" aria-hidden="true" />
+              </button>
+            )
+          : null}
       </div>
     )
   }, [className, value, formatTimestamp, t, handleDateChange])
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/edited-beacon.spec.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/edited-beacon.spec.tsx
index 39c8c9effc..3bb83e79d5 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/edited-beacon.spec.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/__tests__/edited-beacon.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import EditedBeacon from '../edited-beacon'
 
@@ -97,16 +97,8 @@ describe('EditedBeacon', () => {
       // Hover to show reset button
       fireEvent.mouseEnter(wrapper)
 
-      await waitFor(() => {
-        const resetButton = container.querySelector('.bg-text-accent-secondary')
-        expect(resetButton).toBeInTheDocument()
-      })
-
-      // Find and click the reset button (the clickable element with onClick)
-      const clickableElement = container.querySelector('.flex.size-4.items-center.justify-center.rounded-full.bg-text-accent-secondary')
-      if (clickableElement) {
-        fireEvent.click(clickableElement)
-      }
+      const resetButton = await screen.findByRole('button', { name: 'common.operation.reset' })
+      fireEvent.click(resetButton)
 
       expect(handleReset).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
index 25f1e19f8d..da531146af 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx
@@ -25,9 +25,14 @@ const EditedBeacon: FC<Props> = ({
             <Tooltip>
               <TooltipTrigger
                 render={(
-                  <div className="flex size-4 items-center justify-center rounded-full bg-text-accent-secondary" onClick={onReset}>
-                    <RiResetLeftLine className="size-[10px] text-text-primary-on-surface" />
-                  </div>
+                  <button
+                    type="button"
+                    aria-label={t('operation.reset', { ns: 'common' })}
+                    className="flex size-4 items-center justify-center rounded-full border-none bg-text-accent-secondary p-0"
+                    onClick={onReset}
+                  >
+                    <RiResetLeftLine className="size-[10px] text-text-primary-on-surface" aria-hidden="true" />
+                  </button>
                 )}
               />
               <TooltipContent>
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index a8b5875541..abc5cb7fcc 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -98,7 +98,7 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
       }}
     >
       <DialogContent className="w-full !max-w-[640px] overflow-hidden! border-none text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })}
         </DialogTitle>
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
index da77a50419..1eb063c437 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/create-content.spec.tsx
@@ -50,7 +50,7 @@ describe('CreateContent', () => {
     it('should render close button', () => {
       const handleSave = vi.fn()
       renderCreateContent({ onSave: handleSave })
-      expect(screen.getByTestId('modal-close-btn')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
     })
   })
 
@@ -162,7 +162,7 @@ describe('CreateContent', () => {
       const handleClose = vi.fn()
       renderCreateContent({ onSave: handleSave, onClose: handleClose })
 
-      fireEvent.click(screen.getByTestId('modal-close-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(handleClose).toHaveBeenCalled()
     })
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
index f05bd53b7f..f10f9a72a7 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
@@ -86,6 +86,10 @@ describe('DatasetMetadataDrawer', () => {
     vi.clearAllMocks()
   })
 
+  const clickFirstMetadataAction = (name: string) => {
+    fireEvent.click(screen.getAllByRole('button', { name })[0]!)
+  }
+
   describe('Rendering', () => {
     it('should render without crashing', async () => {
       render(<DatasetMetadataDrawer {...defaultProps} />)
@@ -143,7 +147,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByTestId('close-icon'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(onClose).toHaveBeenCalledTimes(1)
     })
@@ -247,21 +251,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find user metadata items with group/item class (these have edit/delete icons)
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      expect(items.length).toBe(2) // 2 user metadata items
-
-      // Find the hidden container with edit/delete icons
-      const actionsContainer = items[0]!.querySelector('.hidden.items-center')
-      expect(actionsContainer).toBeTruthy()
-
-      // Find and click the first SVG (edit icon)
-      if (actionsContainer) {
-        const svgs = actionsContainer.querySelectorAll('svg')
-        expect(svgs.length).toBeGreaterThan(0)
-        fireEvent.click(svgs[0]!)
-      }
+      clickFirstMetadataAction('common.operation.edit')
 
       // Wait for rename modal (contains input)
       await waitFor(() => {
@@ -278,14 +268,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find and click edit icon
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      const actionsContainer = items[0]!.querySelector('.hidden.items-center')
-      if (actionsContainer) {
-        const svgs = actionsContainer.querySelectorAll('svg')
-        fireEvent.click(svgs[0]!)
-      }
+      clickFirstMetadataAction('common.operation.edit')
 
       // Change name and save
       await waitFor(() => {
@@ -319,14 +302,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find and click edit icon
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      const actionsContainer = items[0]!.querySelector('.hidden.items-center')
-      if (actionsContainer) {
-        const svgs = actionsContainer.querySelectorAll('svg')
-        fireEvent.click(svgs[0]!)
-      }
+      clickFirstMetadataAction('common.operation.edit')
 
       // Wait for modal and click cancel
       await waitFor(() => {
@@ -355,14 +331,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find and click edit icon
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      const actionsContainer = items[0]!.querySelector('.hidden.items-center')
-      if (actionsContainer) {
-        const svgs = actionsContainer.querySelectorAll('svg')
-        fireEvent.click(svgs[0]!)
-      }
+      clickFirstMetadataAction('common.operation.edit')
 
       // Wait for rename modal
       await waitFor(() => {
@@ -387,19 +356,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find user metadata items
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-
-      // Find the delete container
-      const deleteContainer = items[0]!.querySelector('.hover\\:text-text-destructive')
-      expect(deleteContainer).toBeTruthy()
-
-      if (deleteContainer) {
-        const deleteIcon = deleteContainer.querySelector('svg')
-        if (deleteIcon)
-          fireEvent.click(deleteIcon)
-      }
+      clickFirstMetadataAction('common.operation.remove')
 
       // Confirm dialog should appear
       await waitFor(() => {
@@ -419,15 +376,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find and click delete icon
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      const deleteContainer = items[0]!.querySelector('.hover\\:text-text-destructive')
-      if (deleteContainer) {
-        const deleteIcon = deleteContainer.querySelector('svg')
-        if (deleteIcon)
-          fireEvent.click(deleteIcon)
-      }
+      clickFirstMetadataAction('common.operation.remove')
 
       // Wait for confirm dialog
       await waitFor(() => {
@@ -465,15 +414,7 @@ describe('DatasetMetadataDrawer', () => {
         expect(screen.getByRole('dialog'))!.toBeInTheDocument()
       })
 
-      // Find and click delete icon
-      const dialog = screen.getByRole('dialog')
-      const items = dialog.querySelectorAll('.group\\/item')
-      const deleteContainer = items[0]!.querySelector('.hover\\:text-text-destructive')
-      if (deleteContainer) {
-        const deleteIcon = deleteContainer.querySelector('svg')
-        if (deleteIcon)
-          fireEvent.click(deleteIcon)
-      }
+      clickFirstMetadataAction('common.operation.remove')
 
       // Wait for confirm dialog
       await waitFor(() => {
diff --git a/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata.spec.tsx
index c1406d1233..70432ebf9d 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/__tests__/select-metadata.spec.tsx
@@ -68,8 +68,7 @@ describe('SelectMetadata', () => {
           onManage={vi.fn()}
         />,
       )
-      // New action button should be present (from i18n)
-      expect(screen.getByText(/new/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.newAction' })).toBeInTheDocument()
     })
 
     it('should render manage action button', () => {
@@ -81,8 +80,7 @@ describe('SelectMetadata', () => {
           onManage={vi.fn()}
         />,
       )
-      // Manage action button should be present (from i18n)
-      expect(screen.getByText(/manage/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.manageAction' })).toBeInTheDocument()
     })
 
     it('should display type for each item', () => {
@@ -187,7 +185,7 @@ describe('SelectMetadata', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText('field_one'))
+      fireEvent.click(screen.getByRole('button', { name: /field_one/i }))
 
       expect(handleSelect).toHaveBeenCalledWith({
         id: '1',
@@ -207,9 +205,7 @@ describe('SelectMetadata', () => {
         />,
       )
 
-      // Find and click the new action button
-      const newButton = screen.getByText(/new/i)
-      fireEvent.click(newButton.closest('div') || newButton)
+      fireEvent.click(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.newAction' }))
 
       expect(handleNew).toHaveBeenCalled()
     })
@@ -225,9 +221,7 @@ describe('SelectMetadata', () => {
         />,
       )
 
-      // Find and click the manage action button
-      const manageButton = screen.getByText(/manage/i)
-      fireEvent.click(manageButton.closest('div') || manageButton)
+      fireEvent.click(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.manageAction' }))
 
       expect(handleManage).toHaveBeenCalled()
     })
@@ -255,8 +249,8 @@ describe('SelectMetadata', () => {
           onManage={vi.fn()}
         />,
       )
-      expect(screen.getByText(/new/i)).toBeInTheDocument()
-      expect(screen.getByText(/manage/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.newAction' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'dataset.metadata.selectMetadata.manageAction' })).toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
index b0824d14a9..691d1512bc 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
@@ -50,10 +50,10 @@ const CreateContent: FC<Props> = ({
       {hasBack && (
         <button
           type="button"
-          className="relative left-[-4px] mb-1 flex cursor-pointer items-center space-x-1 py-1 text-text-accent"
+          className="relative left-[-4px] mb-1 flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-1 text-left text-text-accent"
           onClick={onBack}
         >
-          <span className="i-ri-arrow-left-line size-4" />
+          <span className="i-ri-arrow-left-line size-4" aria-hidden="true" />
           <span className="system-xs-semibold-uppercase">{t(`${i18nPrefix}.back`, { ns: 'dataset' })}</span>
         </button>
       )}
@@ -65,10 +65,10 @@ const CreateContent: FC<Props> = ({
           <button
             type="button"
             aria-label={t('operation.close', { ns: 'common' })}
-            className="cursor-pointer p-1.5 text-text-tertiary"
+            className="cursor-pointer border-none bg-transparent p-1.5 text-text-tertiary"
             onClick={onClose}
           >
-            <span className="i-ri-close-line size-4" data-testid="modal-close-btn" />
+            <span className="i-ri-close-line size-4" aria-hidden="true" />
           </button>
         )}
       </div>
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index b6597e5f51..8553eddacf 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -70,7 +70,7 @@ const Item: FC<ItemProps> = ({
     onRename?.()
   }, [onRename])
 
-  const deleteBtnRef = useRef<HTMLDivElement>(null)
+  const deleteBtnRef = useRef<HTMLButtonElement>(null)
   const isDeleteHovering = useHover(deleteBtnRef)
   const [isShowDeleteConfirm, {
     setTrue: showDeleteConfirm,
@@ -107,10 +107,23 @@ const Item: FC<ItemProps> = ({
           </div>
         )}
         <div className="ml-2 hidden items-center space-x-1 text-text-tertiary group-hover/item:flex">
-          <RiEditLine className="size-4 cursor-pointer" onClick={handleRename} />
-          <div ref={deleteBtnRef} className="hover:text-text-destructive">
-            <RiDeleteBinLine className="size-4 cursor-pointer" onClick={showDeleteConfirm} />
-          </div>
+          <button
+            type="button"
+            aria-label={t('operation.edit', { ns: 'common' })}
+            className="cursor-pointer rounded-md border-none bg-transparent p-0.5 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            onClick={handleRename}
+          >
+            <RiEditLine className="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            ref={deleteBtnRef}
+            aria-label={t('operation.remove', { ns: 'common' })}
+            className="cursor-pointer rounded-md border-none bg-transparent p-0.5 hover:bg-state-destructive-hover hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+            onClick={showDeleteConfirm}
+          >
+            <RiDeleteBinLine className="size-4" aria-hidden="true" />
+          </button>
         </div>
         <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
           <AlertDialogContent>
@@ -205,7 +218,6 @@ const DatasetMetadataDrawer: FC<Props> = ({
                 <DrawerCloseButton
                   aria-label={t('operation.close', { ns: 'common' })}
                   className="h-6 w-6 rounded-md"
-                  data-testid="close-icon"
                 />
               </div>
               <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata.tsx
index 4d86ddf28e..2886601170 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/select-metadata.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata.tsx
@@ -45,9 +45,10 @@ const SelectMetadata: FC<Props> = ({
         {list.map((item) => {
           const Icon = getIcon(item.type)
           return (
-            <div
+            <button
+              type="button"
               key={item.id}
-              className="mx-1 flex h-6 cursor-pointer items-center justify-between rounded-md px-3 hover:bg-state-base-hover"
+              className="mx-1 flex h-6 cursor-pointer items-center justify-between rounded-md border-none bg-transparent px-3 text-left hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={() => onSelect({
                 id: item.id,
                 name: item.name,
@@ -55,27 +56,35 @@ const SelectMetadata: FC<Props> = ({
               })}
             >
               <div className="flex h-full w-0 grow items-center text-text-secondary">
-                <Icon className="mr-[5px] size-3.5 shrink-0" />
+                <Icon className="mr-[5px] size-3.5 shrink-0" aria-hidden="true" />
                 <div className="w-0 grow truncate system-sm-medium">{item.name}</div>
               </div>
               <div className="ml-1 shrink-0 system-xs-regular text-text-tertiary">
                 {item.type}
               </div>
-            </div>
+            </button>
           )
         })}
       </div>
       <div className="mt-1 flex justify-between border-t border-divider-subtle p-1">
-        <div className="flex h-6 cursor-pointer items-center space-x-1 rounded-md px-3 text-text-secondary hover:bg-state-base-hover" onClick={onNew}>
-          <RiAddLine className="size-3.5" />
+        <button
+          type="button"
+          className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-none bg-transparent px-3 text-left text-text-secondary hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={onNew}
+        >
+          <RiAddLine className="size-3.5" aria-hidden="true" />
           <div className="system-sm-medium">{t(`${i18nPrefix}.newAction`, { ns: 'dataset' })}</div>
-        </div>
+        </button>
         <div className="flex h-6 items-center text-text-secondary">
           <div className="mr-[3px] h-3 w-px bg-divider-regular"></div>
-          <div className="flex h-full cursor-pointer items-center rounded-md px-1.5 hover:bg-state-base-hover" onClick={onManage}>
+          <button
+            type="button"
+            className="flex h-full cursor-pointer items-center rounded-md border-none bg-transparent px-1.5 text-left text-text-secondary hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            onClick={onManage}
+          >
             <div className="mr-1 system-sm-medium">{t(`${i18nPrefix}.manageAction`, { ns: 'dataset' })}</div>
-            <RiArrowRightUpLine className="size-3.5" />
-          </div>
+            <RiArrowRightUpLine className="size-3.5" aria-hidden="true" />
+          </button>
         </div>
       </div>
     </div>
diff --git a/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx b/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
index c4dc89cafc..bcae6de66f 100644
--- a/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/__tests__/info-group.spec.tsx
@@ -41,7 +41,7 @@ vi.mock('@/hooks/use-timestamp', () => ({
 
 // Mock AddMetadataButton
 vi.mock('../../add-metadata-button', () => ({
-  default: () => <button data-testid="add-metadata-btn">Add Metadata</button>,
+  default: () => <button>Add Metadata</button>,
 }))
 
 // Mock InputCombined
@@ -61,9 +61,9 @@ vi.mock('../../metadata-dataset/select-metadata-modal', () => ({
   default: ({ trigger, onSelect, onSave, onManage }: SelectModalProps) => (
     <div data-testid="select-metadata-modal">
       {trigger}
-      <button data-testid="select-action" onClick={() => onSelect({ id: '1', name: 'test', type: DataType.string, value: null })}>Select</button>
-      <button data-testid="save-action" onClick={() => onSave({ name: 'new_field', type: DataType.string })}>Save</button>
-      <button data-testid="manage-action" onClick={onManage}>Manage</button>
+      <button onClick={() => onSelect({ id: '1', name: 'test', type: DataType.string, value: null })}>Select</button>
+      <button onClick={() => onSave({ name: 'new_field', type: DataType.string })}>Save</button>
+      <button onClick={onManage}>Manage</button>
     </div>
   ),
 }))
@@ -145,14 +145,14 @@ describe('InfoGroup', () => {
       render(
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit />,
       )
-      expect(screen.getByTestId('add-metadata-btn'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Add Metadata' }))!.toBeInTheDocument()
     })
 
     it('should not render add metadata button when isEdit is false', () => {
       render(
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit={false} />,
       )
-      expect(screen.queryByTestId('add-metadata-btn')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Add Metadata' })).not.toBeInTheDocument()
     })
 
     it('should render input combined for each item in edit mode', () => {
@@ -164,11 +164,10 @@ describe('InfoGroup', () => {
     })
 
     it('should render delete icons in edit mode', () => {
-      const { container } = render(
+      render(
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit />,
       )
-      const deleteIcons = container.querySelectorAll('.cursor-pointer svg')
-      expect(deleteIcons.length).toBeGreaterThan(0)
+      expect(screen.getAllByRole('button', { name: 'common.operation.remove' })).toHaveLength(3)
     })
   })
 
@@ -187,14 +186,11 @@ describe('InfoGroup', () => {
 
     it('should call onDelete when delete icon is clicked', () => {
       const handleDelete = vi.fn()
-      const { container } = render(
+      render(
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit onDelete={handleDelete} />,
       )
 
-      // Find delete icons (RiDeleteBinLine SVGs inside cursor-pointer divs)
-      const deleteButtons = container.querySelectorAll('svg.size-4')
-      if (deleteButtons.length > 0)
-        fireEvent.click(deleteButtons[0]!)
+      fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.remove' })[0]!)
 
       expect(handleDelete).toHaveBeenCalled()
     })
@@ -205,7 +201,7 @@ describe('InfoGroup', () => {
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit onSelect={handleSelect} />,
       )
 
-      fireEvent.click(screen.getByTestId('select-action'))
+      fireEvent.click(screen.getByRole('button', { name: 'Select' }))
 
       expect(handleSelect).toHaveBeenCalledWith({
         id: '1',
@@ -221,7 +217,7 @@ describe('InfoGroup', () => {
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit onAdd={handleAdd} />,
       )
 
-      fireEvent.click(screen.getByTestId('save-action'))
+      fireEvent.click(screen.getByRole('button', { name: 'Save' }))
 
       expect(handleAdd).toHaveBeenCalledWith({
         name: 'new_field',
@@ -234,11 +230,9 @@ describe('InfoGroup', () => {
         <InfoGroup dataSetId="ds-1" list={mockList} isEdit />,
       )
 
-      fireEvent.click(screen.getByTestId('manage-action'))
+      fireEvent.click(screen.getByRole('button', { name: 'Manage' }))
 
-      // The onManage callback triggers the navigation
-      // The onManage callback triggers the navigation
-      expect(screen.getByTestId('manage-action'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Manage' }))!.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 5d174b2534..0368aa18b6 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -99,9 +99,14 @@ const InfoGroup: FC<Props> = ({
                       value={item.value}
                       onChange={value => onChange?.({ ...item, value })}
                     />
-                    <div className="shrink-0 cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive">
-                      <RiDeleteBinLine className="size-4" onClick={() => onDelete?.(item)} />
-                    </div>
+                    <button
+                      type="button"
+                      aria-label={t('operation.remove', { ns: 'common' })}
+                      className="shrink-0 cursor-pointer rounded-md border-none bg-transparent p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                      onClick={() => onDelete?.(item)}
+                    >
+                      <RiDeleteBinLine className="size-4" aria-hidden="true" />
+                    </button>
                   </div>
                 )
               : (<div className="py-1 system-xs-regular text-text-secondary">{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('metadata.dateTimeFormat', { ns: 'datasetDocuments' })) : item.value}</div>)}
diff --git a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
index 4f8a421a52..ac4075fa5b 100644
--- a/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/rename-modal/__tests__/index.spec.tsx
@@ -167,11 +167,7 @@ describe('RenameDatasetModal', () => {
 
     it('should render close icon button', () => {
       render(<RenameDatasetModal {...defaultProps} />)
-      // The modal renders with title and other elements
-      // The close functionality is tested in user interactions
-      // The modal renders with title and other elements
-      // The close functionality is tested in user interactions
-      expect(screen.getByText('datasetSettings.title'))!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /operation\.close$/ }))!.toBeInTheDocument()
     })
 
     it('should render form labels', () => {
@@ -296,14 +292,10 @@ describe('RenameDatasetModal', () => {
     })
 
     it('should call onClose when close icon is clicked', () => {
-      // This test is covered by the cancel button test
-      // The close icon functionality works the same way as cancel button
       const handleClose = vi.fn()
       render(<RenameDatasetModal {...defaultProps} onClose={handleClose} />)
 
-      // Use the cancel button to verify close callback works
-      const cancelButton = screen.getByText('common.operation.cancel')
-      fireEvent.click(cancelButton)
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
 
       expect(handleClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index ae8f9f5d6a..d2750ae21b 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -93,9 +93,14 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
 
         <div className="flex items-center justify-between pb-2">
           <div className="text-xl leading-[30px] font-medium text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
-          <div className="cursor-pointer p-2" onClick={onClose}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onClose}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
         <div>
           <div className={cn('flex flex-col py-4')}>
diff --git a/web/app/components/datasets/settings/permission-selector/__tests__/index.spec.tsx b/web/app/components/datasets/settings/permission-selector/__tests__/index.spec.tsx
index 355946402b..84d5ae6455 100644
--- a/web/app/components/datasets/settings/permission-selector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/settings/permission-selector/__tests__/index.spec.tsx
@@ -287,7 +287,7 @@ describe('PermissionSelector', () => {
       fireEvent.change(searchInput, { target: { value: 'test' } })
       expect(searchInput)!.toHaveValue('test')
 
-      const clearButton = screen.getByTestId('input-clear')
+      const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
       fireEvent.click(clearButton)
 
       // After clicking clear, input should be empty
diff --git a/web/app/components/develop/__tests__/ApiServer.spec.tsx b/web/app/components/develop/__tests__/ApiServer.spec.tsx
index 1364513ce8..a805a3d2e0 100644
--- a/web/app/components/develop/__tests__/ApiServer.spec.tsx
+++ b/web/app/components/develop/__tests__/ApiServer.spec.tsx
@@ -5,7 +5,13 @@ import ApiServer from '../ApiServer'
 
 vi.mock('@/app/components/develop/secret-key/secret-key-modal', () => ({
   default: ({ isShow, onClose }: { isShow: boolean, onClose: () => void }) => (
-    isShow ? <div data-testid="secret-key-modal"><button onClick={onClose}>Close Modal</button></div> : null
+    isShow
+      ? (
+          <div role="dialog" aria-label="Secret key">
+            <button type="button" onClick={onClose}>Close Modal</button>
+          </div>
+        )
+      : null
   ),
 }))
 
@@ -81,7 +87,7 @@ describe('ApiServer', () => {
         await user.click(apiKeyButton)
       })
 
-      expect(screen.getByTestId('secret-key-modal')).toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Secret key' })).toBeInTheDocument()
     })
 
     it('should close modal when close button is clicked', async () => {
@@ -93,14 +99,14 @@ describe('ApiServer', () => {
         await user.click(apiKeyButton)
       })
 
-      expect(screen.getByTestId('secret-key-modal')).toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Secret key' })).toBeInTheDocument()
 
-      const closeButton = screen.getByText('Close Modal')
+      const closeButton = screen.getByRole('button', { name: 'Close Modal' })
       await act(async () => {
         await user.click(closeButton)
       })
 
-      expect(screen.queryByTestId('secret-key-modal')).not.toBeInTheDocument()
+      expect(screen.queryByRole('dialog', { name: 'Secret key' })).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx b/web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx
index e7a0ebb880..accd106305 100644
--- a/web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx
@@ -158,8 +158,9 @@ describe('InputCopy', () => {
     it('should have cursor-pointer on clickable area', async () => {
       await renderAndFlush(<InputCopy value="test" />)
       const valueText = screen.getByText('test')
-      const clickableArea = valueText.closest('div[class*="cursor-pointer"]')
+      const clickableArea = valueText.closest('button')
       expect(clickableArea).toBeInTheDocument()
+      expect(clickableArea?.className).toContain('cursor-pointer')
     })
   })
 
@@ -188,8 +189,9 @@ describe('InputCopy', () => {
     it('should have truncate class for long values', async () => {
       await renderAndFlush(<InputCopy value="very-long-api-key-value-that-might-overflow" />)
       const valueText = screen.getByText('very-long-api-key-value-that-might-overflow')
-      const container = valueText.closest('div[class*="truncate"]')
+      const container = valueText.closest('button')
       expect(container).toBeInTheDocument()
+      expect(container?.className).toContain('truncate')
     })
 
     it('should have text-secondary color on value', async () => {
@@ -201,8 +203,9 @@ describe('InputCopy', () => {
     it('should have absolute positioning for overlay', async () => {
       await renderAndFlush(<InputCopy value="test" />)
       const valueText = screen.getByText('test')
-      const container = valueText.closest('div[class*="absolute"]')
+      const container = valueText.closest('button')
       expect(container).toBeInTheDocument()
+      expect(container?.className).toContain('absolute')
     })
   })
 
diff --git a/web/app/components/develop/secret-key/input-copy.tsx b/web/app/components/develop/secret-key/input-copy.tsx
index 28a6aa4cc5..741cdd9bf5 100644
--- a/web/app/components/develop/secret-key/input-copy.tsx
+++ b/web/app/components/develop/secret-key/input-copy.tsx
@@ -42,18 +42,11 @@ const InputCopy = ({
       <div className="flex h-5 grow items-center">
         {children}
         <div className="relative h-full grow text-[13px]">
-          <div
-            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate pr-2 pl-2"
-            role="button"
+          <button
+            type="button"
+            className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate border-none bg-transparent py-0 pr-2 pl-2 text-left"
             aria-label={copyLabel}
-            tabIndex={0}
             onClick={handleCopy}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault()
-                handleCopy()
-              }
-            }}
           >
             <Tooltip>
               <TooltipTrigger
@@ -63,7 +56,7 @@ const InputCopy = ({
                 {copyLabel}
               </TooltipContent>
             </Tooltip>
-          </div>
+          </button>
         </div>
         <div className="h-4 w-px shrink-0 bg-divider-regular" />
         <div className="mx-1"><CopyFeedback content={value} /></div>
diff --git a/web/app/components/explore/app-list/__tests__/index.spec.tsx b/web/app/components/explore/app-list/__tests__/index.spec.tsx
index 7b5c02be4c..7c9bdb7b23 100644
--- a/web/app/components/explore/app-list/__tests__/index.spec.tsx
+++ b/web/app/components/explore/app-list/__tests__/index.spec.tsx
@@ -279,7 +279,7 @@ describe('AppList', () => {
       })
       expect(screen.queryByText('Alpha')).not.toBeInTheDocument()
 
-      fireEvent.click(screen.getByTestId('input-clear'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
       await act(async () => {
         await vi.advanceTimersByTimeAsync(500)
       })
diff --git a/web/app/components/explore/try-app/app/__tests__/chat.spec.tsx b/web/app/components/explore/try-app/app/__tests__/chat.spec.tsx
index 6335678a19..8fc2cb530e 100644
--- a/web/app/components/explore/try-app/app/__tests__/chat.spec.tsx
+++ b/web/app/components/explore/try-app/app/__tests__/chat.spec.tsx
@@ -172,7 +172,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'share.chat.resetChat' })).not.toBeInTheDocument()
     })
 
     it('renders reset button when conversation exists', () => {
@@ -193,7 +193,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'share.chat.resetChat' })).toBeInTheDocument()
     })
 
     it('calls handleNewConversation when reset button is clicked', () => {
@@ -214,7 +214,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
-      fireEvent.click(screen.getByRole('button'))
+      fireEvent.click(screen.getByRole('button', { name: 'share.chat.resetChat' }))
 
       expect(mockRemoveConversationIdInfo).toHaveBeenCalledWith('test-app-id')
       expect(mockHandleNewConversation).toHaveBeenCalled()
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index 0c319b4c21..c1c404e49e 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -81,8 +81,12 @@ const TryApp: FC<Props> = ({
               <Tooltip>
                 <TooltipTrigger
                   render={(
-                    <ActionButton size="l" onClick={handleNewConversation}>
-                      <RiResetLeftLine className="h-[18px] w-[18px]" />
+                    <ActionButton
+                      size="l"
+                      aria-label={t('chat.resetChat', { ns: 'share' })}
+                      onClick={handleNewConversation}
+                    >
+                      <RiResetLeftLine className="h-[18px] w-[18px]" aria-hidden="true" />
                     </ActionButton>
                   )}
                 />
diff --git a/web/app/components/header/__tests__/maintenance-notice.spec.tsx b/web/app/components/header/__tests__/maintenance-notice.spec.tsx
index 82c66a05b8..bab8c014fc 100644
--- a/web/app/components/header/__tests__/maintenance-notice.spec.tsx
+++ b/web/app/components/header/__tests__/maintenance-notice.spec.tsx
@@ -5,7 +5,7 @@ import { NOTICE_I18N } from '@/i18n-config/language'
 import MaintenanceNotice from '../maintenance-notice'
 
 vi.mock('@/app/components/base/icons/src/vender/line/general', () => ({
-  X: ({ onClick }: { onClick?: () => void }) => <button type="button" aria-label="close notice" onClick={onClick} />,
+  X: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
 }))
 
 vi.mock(
@@ -78,7 +78,7 @@ describe('MaintenanceNotice', () => {
       render(<MaintenanceNotice />)
       expect(screen.getByText('Notice Title')).toBeInTheDocument()
 
-      fireEvent.click(screen.getByRole('button', { name: /close notice/i }))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(screen.queryByText('Notice Title')).not.toBeInTheDocument()
       expect(localStorage.getItem('hide-maintenance-notice')).toBe('1')
@@ -88,7 +88,7 @@ describe('MaintenanceNotice', () => {
       setNoticeHref('https://dify.ai/notice')
       render(<MaintenanceNotice />)
 
-      const desc = screen.getByText('Notice Description')
+      const desc = screen.getByRole('button', { name: 'Notice Description' })
       fireEvent.click(desc)
 
       expect(windowOpenSpy).toHaveBeenCalledWith(
diff --git a/web/app/components/header/account-about/__tests__/index.spec.tsx b/web/app/components/header/account-about/__tests__/index.spec.tsx
index 8ec7d8800d..cc9508e50f 100644
--- a/web/app/components/header/account-about/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-about/__tests__/index.spec.tsx
@@ -90,15 +90,9 @@ describe('AccountAbout', () => {
   describe('User Interactions', () => {
     it('should call onCancel when close button is clicked', () => {
       renderWithSystemFeatures(<AccountAbout langGeniusVersionInfo={mockVersionInfo} onCancel={mockOnCancel} />)
-      // Modal content renders into a portal, so we need to use document.
-      const closeButton = document.querySelector('div.absolute.cursor-pointer')
 
-      if (!closeButton)
-        throw new Error('Close button not found')
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
-      fireEvent.click(closeButton)
-
-      // Assert
       expect(mockOnCancel).toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index ba3eba5993..a47b24a743 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -36,9 +36,14 @@ export default function AccountAbout({
       <DialogContent className="w-[calc(100vw-2rem)]! max-w-[480px]! overflow-hidden! border-none px-6! py-4! text-left align-middle">
 
         <div className="relative">
-          <div className="absolute top-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center" onClick={onCancel}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="absolute top-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onCancel}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
           <div className="flex flex-col items-center gap-4 py-8">
             {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
               ? (
diff --git a/web/app/components/header/account-setting/collapse/__tests__/index.spec.tsx b/web/app/components/header/account-setting/collapse/__tests__/index.spec.tsx
index d39f70d0a9..4cce58d83a 100644
--- a/web/app/components/header/account-setting/collapse/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/collapse/__tests__/index.spec.tsx
@@ -68,12 +68,12 @@ describe('Collapse', () => {
       expect(screen.queryByTestId('item-1')).not.toBeInTheDocument()
 
       // Click to open
-      fireEvent.click(screen.getByText('Test Title'))
+      fireEvent.click(screen.getByRole('button', { name: 'Test Title' }))
       expect(screen.getByTestId('item-1')).toBeInTheDocument()
       expect(screen.getByTestId('item-2')).toBeInTheDocument()
 
       // Click to close
-      fireEvent.click(screen.getByText('Test Title'))
+      fireEvent.click(screen.getByRole('button', { name: 'Test Title' }))
       expect(screen.queryByTestId('item-1')).not.toBeInTheDocument()
     })
 
@@ -89,7 +89,7 @@ describe('Collapse', () => {
       )
 
       // Act
-      fireEvent.click(screen.getByText('Test Title'))
+      fireEvent.click(screen.getByRole('button', { name: 'Test Title' }))
       const item1 = screen.getByTestId('item-1')
       fireEvent.click(item1)
 
@@ -109,7 +109,7 @@ describe('Collapse', () => {
       )
 
       // Act
-      fireEvent.click(screen.getByText('Test Title'))
+      fireEvent.click(screen.getByRole('button', { name: 'Test Title' }))
       const item1 = screen.getByTestId('item-1')
       fireEvent.click(item1)
 
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index f7cf1edcc8..78003bad3a 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -26,22 +26,31 @@ const Collapse = ({
 
   return (
     <div className={cn('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
-      <div className="flex cursor-pointer items-center justify-between px-3 py-2 text-xs leading-[18px] font-medium text-text-secondary" onClick={toggle}>
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent px-3 py-2 text-left text-xs leading-[18px] font-medium text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={toggle}
+      >
         {title}
         {
           open
-            ? <ChevronDownIcon className="h-3 w-3 text-components-button-tertiary-text" />
-            : <ChevronRightIcon className="h-3 w-3 text-components-button-tertiary-text" />
+            ? <ChevronDownIcon className="h-3 w-3 text-components-button-tertiary-text" aria-hidden="true" />
+            : <ChevronRightIcon className="h-3 w-3 text-components-button-tertiary-text" aria-hidden="true" />
         }
-      </div>
+      </button>
       {
         open && (
           <div className="mx-1 mb-1 rounded-lg border-t border-divider-subtle bg-components-panel-on-panel-item-bg py-1">
             {
               items.map(item => (
-                <div key={item.key} onClick={() => onSelect?.(item)}>
+                <button
+                  key={item.key}
+                  type="button"
+                  className="block w-full border-none bg-transparent p-0 text-left"
+                  onClick={() => onSelect?.(item)}
+                >
                   {renderItem(item)}
-                </div>
+                </button>
               ))
             }
           </div>
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index d952559fbf..9deff0cc1f 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -48,10 +48,15 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="mt-4! h-px" />
       <div className="flex items-center justify-between">
-        <div className="flex cursor-pointer items-center gap-1 system-md-semibold text-text-primary" onClick={() => setCollapse(!collapse)}>
-          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
+        <button
+          type="button"
+          aria-expanded={!collapse}
+          className="flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left system-md-semibold text-text-primary"
+          onClick={() => setCollapse(!collapse)}
+        >
+          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} aria-hidden="true" />
           {t('modelProvider.installDataSourceProvider', { ns: 'common' })}
-        </div>
+        </button>
         <div className="mb-2 flex items-center pt-2">
           <span className="pr-1 system-sm-regular text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
           <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="inline-flex items-center system-sm-medium text-text-accent">
diff --git a/web/app/components/header/account-setting/members-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/__tests__/index.spec.tsx
index c09f32ea83..a6d490ff77 100644
--- a/web/app/components/header/account-setting/members-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/__tests__/index.spec.tsx
@@ -200,7 +200,7 @@ describe('MembersPage', () => {
 
     renderMembersPage()
 
-    await user.click(screen.getByTestId('edit-workspace-pencil'))
+    await user.click(screen.getByRole('button', { name: /account\.editWorkspaceInfo/i }))
     expect(screen.getByText('Edit Workspace Modal'))!.toBeInTheDocument()
 
     await user.click(screen.getByRole('button', { name: 'Close Edit Workspace' }))
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
index db7b69f7cb..1b85319613 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/index.spec.tsx
@@ -11,6 +11,8 @@ const toastMocks = vi.hoisted(() => ({
   mockNotify: vi.fn(),
 }))
 
+const getSaveButton = () => screen.getByRole('button', { name: /operation\.(save|saving)/i })
+
 vi.mock('@/context/app-context')
 vi.mock('@/service/common')
 vi.mock('@langgenius/dify-ui/toast', () => ({
@@ -83,7 +85,7 @@ describe('EditWorkspaceModal', () => {
     const input = screen.getByLabelText(/account\.workspaceName/i)
     await user.clear(input)
     await user.type(input, 'Renamed Workspace')
-    await user.click(screen.getByTestId('edit-workspace-save'))
+    await user.click(getSaveButton())
 
     await waitFor(() => {
       expect(updateWorkspaceInfo).toHaveBeenCalledWith({
@@ -106,7 +108,7 @@ describe('EditWorkspaceModal', () => {
     const input = screen.getByLabelText(/account\.workspaceName/i)
     await user.clear(input)
     await user.type(input, 'Broken Workspace')
-    await user.click(screen.getByTestId('edit-workspace-save'))
+    await user.click(getSaveButton())
 
     await waitFor(() => {
       expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
@@ -118,7 +120,7 @@ describe('EditWorkspaceModal', () => {
   it('should disable save button when there are no changes', async () => {
     renderModal()
 
-    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
+    expect(getSaveButton()).toBeDisabled()
   })
 
   it('should disable save button and show error when the name is empty', async () => {
@@ -129,7 +131,7 @@ describe('EditWorkspaceModal', () => {
     const input = screen.getByLabelText(/account\.workspaceName/i)
     await user.clear(input)
 
-    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
+    expect(getSaveButton()).toBeDisabled()
     expect(input).toHaveAttribute('aria-invalid', 'true')
     expect(screen.getByTestId('edit-workspace-error')).toBeInTheDocument()
   })
@@ -137,7 +139,7 @@ describe('EditWorkspaceModal', () => {
   it('should not submit when the form is submitted while save is disabled', async () => {
     renderModal()
 
-    const saveButton = screen.getByTestId('edit-workspace-save')
+    const saveButton = getSaveButton()
     const form = saveButton.closest('form')
 
     expect(saveButton).toBeDisabled()
@@ -157,14 +159,14 @@ describe('EditWorkspaceModal', () => {
 
     renderModal()
 
-    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
+    expect(getSaveButton()).toBeDisabled()
   })
 
   it('should call onCancel when close icon is clicked', async () => {
     const user = userEvent.setup()
     renderModal()
 
-    await user.click(screen.getByTestId('edit-workspace-close'))
+    await user.click(screen.getByRole('button', { name: /Close|operation.close/ }))
     expect(mockOnCancel).toHaveBeenCalled()
   })
 
@@ -172,7 +174,7 @@ describe('EditWorkspaceModal', () => {
     const user = userEvent.setup()
     renderModal()
 
-    await user.click(screen.getByTestId('edit-workspace-cancel'))
+    await user.click(screen.getByRole('button', { name: /operation\.cancel/i }))
     expect(mockOnCancel).toHaveBeenCalled()
   })
 
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 0f6a6fb8d6..60fcf8c094 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -61,7 +61,7 @@ const EditWorkspaceModal = ({ onCancel }: IEditWorkspaceModalProps) => {
       }}
     >
       <DialogContent backdropProps={{ forceRender: true }} className="overflow-visible">
-        <DialogCloseButton data-testid="edit-workspace-close" />
+        <DialogCloseButton />
 
         <form
           className="flex flex-col"
@@ -102,10 +102,10 @@ const EditWorkspaceModal = ({ onCancel }: IEditWorkspaceModalProps) => {
           </div>
 
           <div className="sticky bottom-0 -mx-2 mt-2 flex flex-wrap items-center justify-end gap-x-2 bg-components-panel-bg px-2 pt-4">
-            <Button size="large" type="button" data-testid="edit-workspace-cancel" onClick={onCancel}>
+            <Button size="large" type="button" onClick={onCancel}>
               {t('operation.cancel', { ns: 'common' })}
             </Button>
-            <Button size="large" type="submit" variant="primary" data-testid="edit-workspace-save" disabled={isSaveDisabled} loading={isSubmitting}>
+            <Button size="large" type="submit" variant="primary" disabled={isSaveDisabled} loading={isSubmitting}>
               {t(isSubmitting ? 'operation.saving' : 'operation.save', { ns: 'common' })}
             </Button>
           </div>
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index cf25a2446a..da4440eb66 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -63,17 +63,19 @@ const MembersPage = () => {
                   <Tooltip>
                     <TooltipTrigger
                       render={(
-                        <div
-                          className="cursor-pointer rounded-md p-1 hover:bg-black/5"
+                        <button
+                          type="button"
+                          aria-label={t('account.editWorkspaceInfo', { ns: 'common' })}
+                          className="cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-black/5"
                           onClick={() => {
                             setEditWorkspaceModalVisible(true)
                           }}
                         >
-                          <div
-                            data-testid="edit-workspace-pencil"
+                          <span
+                            aria-hidden="true"
                             className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
                           />
-                        </div>
+                        </button>
                       )}
                     />
                     <TooltipContent>
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
index 9ed99614e4..9b262a3f31 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/index.spec.tsx
@@ -136,7 +136,7 @@ describe('InviteModal', () => {
     const user = userEvent.setup()
     renderModal()
 
-    await user.click(screen.getByTestId('invite-modal-close'))
+    await user.click(screen.getByRole('button', { name: /Close|operation.close/ }))
 
     expect(mockOnCancel).toHaveBeenCalled()
   })
@@ -161,7 +161,7 @@ describe('InviteModal', () => {
 
     expect(screen.getByText('user@example.com')).toBeInTheDocument()
 
-    const removeBtn = screen.getByTestId('remove-email-btn')
+    const removeBtn = screen.getByRole('button', { name: /operation\.remove.*user@example\.com/i })
     await user.click(removeBtn)
 
     expect(screen.queryByText('user@example.com')).not.toBeInTheDocument()
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/role-selector.spec.tsx b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/role-selector.spec.tsx
index af2c64179b..1284a7abb1 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/__tests__/role-selector.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/__tests__/role-selector.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
 import { vi } from 'vitest'
@@ -17,6 +17,10 @@ const RoleSelectorWrapper = ({ initialRole = 'normal' }: WrapperProps) => {
   return <RoleSelector value={role} onChange={setRole} />
 }
 
+const getTrigger = () => screen.getByRole('button', { name: /members\.invitedAsRole/i })
+const getRoleDialog = () => screen.getByRole('dialog')
+const getRoleOption = (role: string) => within(getRoleDialog()).getByRole('button', { name: new RegExp(`common\\.members\\.${role}`, 'i') })
+
 describe('RoleSelector', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -36,16 +40,16 @@ describe('RoleSelector', () => {
     const user = userEvent.setup()
     render(<RoleSelectorWrapper />)
 
-    const trigger = screen.getByTestId('role-selector-trigger')
+    const trigger = getTrigger()
 
     // Open
     await user.click(trigger)
-    expect(screen.getByTestId('role-option-normal')).toBeInTheDocument()
+    expect(getRoleOption('normal')).toBeInTheDocument()
 
     // Close
     await user.click(trigger)
     await waitFor(() => {
-      expect(screen.queryByTestId('role-option-normal')).not.toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     })
   })
 
@@ -53,28 +57,27 @@ describe('RoleSelector', () => {
     const user = userEvent.setup()
     render(<RoleSelectorWrapper initialRole="editor" />)
 
-    await user.click(screen.getByTestId('role-selector-trigger'))
+    await user.click(getTrigger())
 
-    const editorOption = screen.getByTestId('role-option-editor')
-    expect(editorOption.querySelector('[data-testid="role-option-check"]')).toBeInTheDocument()
+    expect(getRoleOption('editor')).toHaveAttribute('aria-pressed', 'true')
   })
 
   it.each([
-    ['normal', 'role-option-normal', 'common.members.normal'],
-    ['editor', 'role-option-editor', 'common.members.editor'],
-    ['admin', 'role-option-admin', 'common.members.admin'],
-    ['dataset_operator', 'role-option-dataset_operator', 'common.members.datasetOperator'],
-  ])('should update selected role after user chooses %s', async (_roleKey, testId) => {
+    ['normal'],
+    ['editor'],
+    ['admin'],
+    ['datasetOperator'],
+  ])('should update selected role after user chooses %s', async (roleKey) => {
     const user = userEvent.setup()
 
     render(<RoleSelectorWrapper initialRole="normal" />)
 
-    await user.click(screen.getByTestId('role-selector-trigger'))
-    await user.click(screen.getByTestId(testId))
+    await user.click(getTrigger())
+    await user.click(getRoleOption(roleKey))
 
     // Verify dropdown closed
     await waitFor(() => {
-      expect(screen.queryByTestId(testId)).not.toBeInTheDocument()
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     })
 
     // Verify trigger text updated (using translation key pattern from global mock)
@@ -90,9 +93,9 @@ describe('RoleSelector', () => {
 
     render(<RoleSelectorWrapper />)
 
-    await user.click(screen.getByTestId('role-selector-trigger'))
+    await user.click(getTrigger())
 
-    expect(screen.queryByTestId('role-option-dataset_operator')).not.toBeInTheDocument()
-    expect(screen.getByTestId('role-option-normal')).toBeInTheDocument()
+    expect(within(getRoleDialog()).queryByRole('button', { name: /common\.members\.datasetOperator/i })).not.toBeInTheDocument()
+    expect(getRoleOption('normal')).toBeInTheDocument()
   })
 })
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 426d0491a2..254dff491c 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -87,7 +87,7 @@ const InviteModal = ({
         backdropProps={{ forceRender: true }}
         className="w-[400px] overflow-visible px-8 py-6"
       >
-        <DialogCloseButton data-testid="invite-modal-close" className="top-6 right-8" />
+        <DialogCloseButton className="top-6 right-8" />
         <div className="mb-2 pr-8">
           <DialogTitle className="text-xl font-semibold text-text-primary">
             {t('members.inviteTeamMember', { ns: 'common' })}
@@ -122,13 +122,15 @@ const InviteModal = ({
               getLabel={(email, index, removeEmail) => (
                 <div data-tag key={index} className={cn('bg-components-button-secondary-bg!')}>
                   <div data-tag-item>{email}</div>
-                  <span
-                    data-testid="remove-email-btn"
+                  <button
+                    type="button"
                     data-tag-handle
+                    aria-label={`${t('operation.remove', { ns: 'common' })} ${email}`}
+                    className="border-none bg-transparent p-0 text-inherit"
                     onClick={() => removeEmail(index)}
                   >
                     ×
-                  </span>
+                  </button>
                 </div>
               )}
               placeholder={t('members.emailPlaceholder', { ns: 'common' }) || ''}
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index 9c44e8b93d..f22be94ddf 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -48,9 +48,10 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
         popupClassName="w-[336px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg"
       >
         <div className="p-1">
-          <div
-            data-testid="role-option-normal"
-            className="cursor-pointer rounded-lg p-2 hover:bg-state-base-hover"
+          <button
+            type="button"
+            aria-pressed={value === 'normal'}
+            className="w-full cursor-pointer rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover"
             onClick={() => {
               onChange('normal')
               setOpen(false)
@@ -61,15 +62,16 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.normalTip', { ns: 'common' })}</div>
               {value === 'normal' && (
                 <div
-                  data-testid="role-option-check"
+                  aria-hidden="true"
                   className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
-          </div>
-          <div
-            data-testid="role-option-editor"
-            className="cursor-pointer rounded-lg p-2 hover:bg-state-base-hover"
+          </button>
+          <button
+            type="button"
+            aria-pressed={value === 'editor'}
+            className="w-full cursor-pointer rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover"
             onClick={() => {
               onChange('editor')
               setOpen(false)
@@ -80,15 +82,16 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.editorTip', { ns: 'common' })}</div>
               {value === 'editor' && (
                 <div
-                  data-testid="role-option-check"
+                  aria-hidden="true"
                   className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
-          </div>
-          <div
-            data-testid="role-option-admin"
-            className="cursor-pointer rounded-lg p-2 hover:bg-state-base-hover"
+          </button>
+          <button
+            type="button"
+            aria-pressed={value === 'admin'}
+            className="w-full cursor-pointer rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover"
             onClick={() => {
               onChange('admin')
               setOpen(false)
@@ -99,16 +102,17 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
               <div className="text-xs leading-[18px] text-text-tertiary">{t('members.adminTip', { ns: 'common' })}</div>
               {value === 'admin' && (
                 <div
-                  data-testid="role-option-check"
+                  aria-hidden="true"
                   className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                 />
               )}
             </div>
-          </div>
+          </button>
           {datasetOperatorEnabled && (
-            <div
-              data-testid="role-option-dataset_operator"
-              className="cursor-pointer rounded-lg p-2 hover:bg-state-base-hover"
+            <button
+              type="button"
+              aria-pressed={value === 'dataset_operator'}
+              className="w-full cursor-pointer rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover"
               onClick={() => {
                 onChange('dataset_operator')
                 setOpen(false)
@@ -119,12 +123,12 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
                 <div className="text-xs leading-[18px] text-text-tertiary">{t('members.datasetOperatorTip', { ns: 'common' })}</div>
                 {value === 'dataset_operator' && (
                   <div
-                    data-testid="role-option-check"
+                    aria-hidden="true"
                     className="absolute top-0.5 left-0 i-custom-vender-line-general-check h-4 w-4 text-text-accent"
                   />
                 )}
               </div>
-            </div>
+            </button>
           )}
         </div>
       </PopoverContent>
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/__tests__/invitation-link.spec.tsx b/web/app/components/header/account-setting/members-page/invited-modal/__tests__/invitation-link.spec.tsx
index 06761da8cb..ddc06ab6e9 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/__tests__/invitation-link.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/__tests__/invitation-link.spec.tsx
@@ -28,7 +28,7 @@ describe('InvitationLink', () => {
 
     render(<InvitationLink value={value} />)
 
-    const copyBtn = screen.getByTestId('invitation-link-copy')
+    const copyBtn = screen.getByRole('button', { name: 'appApi.copy' })
     await user.click(copyBtn)
 
     expect(copy).toHaveBeenCalledWith('http://localhost:3000/invite/123')
@@ -45,7 +45,7 @@ describe('InvitationLink', () => {
 
     render(<InvitationLink value={absoluteValue} />)
 
-    await user.click(screen.getByTestId('invitation-link-url'))
+    await user.click(screen.getByRole('button', { name: 'https://dify.ai/invite/123' }))
 
     expect(copy).toHaveBeenCalledWith('https://dify.ai/invite/123')
   })
@@ -54,7 +54,7 @@ describe('InvitationLink', () => {
     vi.useFakeTimers()
     render(<InvitationLink value={value} />)
 
-    const url = screen.getByTestId('invitation-link-url')
+    const url = screen.getByRole('button', { name: '/invite/123' })
 
     // Initial state check - PopupContent should be "copy"
     // Since we mock i18next to return the key, we check for 'appApi.copy'
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
index c49a1ea599..098c87cc99 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -2,9 +2,9 @@
 import type { SuccessInvitationResult } from '.'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import copy from 'copy-to-clipboard'
-import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import s from './index.module.css'
 
 type IInvitationLinkProps = {
@@ -14,6 +14,7 @@ type IInvitationLinkProps = {
 const InvitationLink = ({
   value,
 }: IInvitationLinkProps) => {
+  const { t } = useTranslation()
   const [isCopied, setIsCopied] = useState(false)
 
   const copyHandle = useCallback(() => {
@@ -35,12 +36,20 @@ const InvitationLink = ({
   }, [isCopied])
 
   return (
-    <div className="flex items-center rounded-lg border border-components-input-border-active bg-components-input-bg-normal py-2 hover:bg-state-base-hover" data-testid="invitation-link-container">
+    <div className="flex items-center rounded-lg border border-components-input-border-active bg-components-input-bg-normal py-2 hover:bg-state-base-hover">
       <div className="flex h-5 grow items-center">
         <div className="relative h-full grow text-[13px]">
           <Tooltip>
             <TooltipTrigger
-              render={<div className="absolute top-0 right-0 left-0 w-full cursor-pointer truncate pr-2 pl-2 text-text-primary" onClick={copyHandle} data-testid="invitation-link-url">{value.url}</div>}
+              render={(
+                <button
+                  type="button"
+                  className="absolute top-0 right-0 left-0 block w-full cursor-pointer truncate border-none bg-transparent p-0 pr-2 pl-2 text-left text-text-primary"
+                  onClick={copyHandle}
+                >
+                  {value.url}
+                </button>
+              )}
             />
             <TooltipContent>
               {isCopied ? t('copied', { ns: 'appApi' }) : t('copy', { ns: 'appApi' })}
@@ -52,8 +61,12 @@ const InvitationLink = ({
           <TooltipTrigger
             render={(
               <div className="shrink-0 px-0.5">
-                <div className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle} data-testid="invitation-link-copy">
-                </div>
+                <button
+                  type="button"
+                  aria-label={t('copy', { ns: 'appApi' })}
+                  className={`box-border flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 hover:bg-state-base-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}
+                  onClick={copyHandle}
+                />
               </div>
             )}
           />
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
index 56a237d741..07371740bd 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/__tests__/index.spec.tsx
@@ -90,7 +90,7 @@ describe('TransferOwnershipModal', () => {
   }
 
   const goToTransferStep = async (user: ReturnType<typeof userEvent.setup>) => {
-    await user.click(screen.getByTestId('transfer-modal-send-code'))
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
     const input = await screen.findByTestId('transfer-modal-code-input')
     await user.type(input, '123456')
     await user.click(screen.getByTestId('transfer-modal-continue'))
@@ -126,7 +126,7 @@ describe('TransferOwnershipModal', () => {
     renderModal()
     // Trigger the email send (which starts the timer)
     await act(async () => {
-      fireEvent.click(screen.getByTestId('transfer-modal-send-code'))
+      fireEvent.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
     })
 
     // Step Verify shows up
@@ -144,7 +144,7 @@ describe('TransferOwnershipModal', () => {
     })
     expect(screen.queryByText(/members\.transferModal\.resendCount/i)).not.toBeInTheDocument()
 
-    const resendBtn = screen.getByTestId('transfer-modal-resend')
+    const resendBtn = screen.getByRole('button', { name: /members\.transferModal\.resend/i })
     await act(async () => {
       fireEvent.click(resendBtn)
     })
@@ -187,7 +187,7 @@ describe('TransferOwnershipModal', () => {
     const user = userEvent.setup()
     vi.mocked(sendOwnerEmail).mockRejectedValue(new Error('network error'))
     renderModal()
-    await user.click(screen.getByTestId('transfer-modal-send-code'))
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
 
     // The base service layer surfaces the real backend error. The modal itself
     // must NOT show an additional toast (e.g. "Error sending verification code: undefined").
@@ -196,7 +196,7 @@ describe('TransferOwnershipModal', () => {
     })
     expect(mockNotify).not.toHaveBeenCalled()
     // Should remain on the start step instead of advancing to the verify step.
-    expect(screen.getByTestId('transfer-modal-send-code')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i })).toBeInTheDocument()
   })
 
   it('should show error when ownership transfer fails', async () => {
@@ -223,7 +223,7 @@ describe('TransferOwnershipModal', () => {
     } as unknown as Awaited<ReturnType<typeof sendOwnerEmail>>)
 
     renderModal()
-    await user.click(screen.getByTestId('transfer-modal-send-code'))
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
 
     // Should advance to verify step even with null data
     await waitFor(() => {
@@ -236,13 +236,13 @@ describe('TransferOwnershipModal', () => {
     vi.mocked(sendOwnerEmail).mockRejectedValue(null)
 
     renderModal()
-    await user.click(screen.getByTestId('transfer-modal-send-code'))
+    await user.click(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i }))
 
     await waitFor(() => {
       expect(sendOwnerEmail).toHaveBeenCalled()
     })
     expect(mockNotify).not.toHaveBeenCalled()
-    expect(screen.getByTestId('transfer-modal-send-code')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /members\.transferModal\.sendVerifyCode/i })).toBeInTheDocument()
   })
 
   it('should show fallback error prefix when verifyOwnerEmail throws null', async () => {
@@ -281,7 +281,7 @@ describe('TransferOwnershipModal', () => {
   it('should close when close button is clicked', async () => {
     const user = userEvent.setup()
     renderModal()
-    await user.click(screen.getByTestId('transfer-modal-close'))
+    await user.click(screen.getByRole('button', { name: /operation\.close$/ }))
     expect(mockOnClose).toHaveBeenCalled()
   })
 
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index cadc2dc967..6dab5ab93a 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -105,9 +105,14 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
   return (
     <Dialog open={show}>
       <DialogContent className="w-[420px]">
-        <div data-testid="transfer-modal-close" className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
-          <div className="i-ri-close-line h-5 w-5 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          className="absolute top-5 right-5 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          aria-label={t('operation.close', { ns: 'common' })}
+          onClick={onClose}
+        >
+          <span className="i-ri-close-line h-5 w-5 text-text-tertiary" aria-hidden="true" />
+        </button>
         {step === STEP.start && (
           <>
             <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.title', { ns: 'common' })}</div>
@@ -120,7 +125,7 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
             </div>
             <div className="pt-3"></div>
             <div className="space-y-2">
-              <Button data-testid="transfer-modal-send-code" className="w-full!" variant="primary" onClick={sendCodeToOriginEmail}>
+              <Button className="w-full!" variant="primary" onClick={sendCodeToOriginEmail}>
                 {t('members.transferModal.sendVerifyCode', { ns: 'common' })}
               </Button>
               <Button data-testid="transfer-modal-cancel" className="w-full!" onClick={onClose}>
@@ -154,9 +159,13 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
               <span>{t('members.transferModal.resendTip', { ns: 'common' })}</span>
               {time > 0 && (<span>{t('members.transferModal.resendCount', { ns: 'common', count: time })}</span>)}
               {!time && (
-                <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">
+                <button
+                  type="button"
+                  onClick={sendCodeToOriginEmail}
+                  className="cursor-pointer border-none bg-transparent p-0 text-left system-xs-medium text-text-accent-secondary"
+                >
                   {t('members.transferModal.resend', { ns: 'common' })}
-                </span>
+                </button>
               )}
             </div>
           </>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/index.spec.tsx
index 7c996515b2..0b920008b4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/index.spec.tsx
@@ -113,7 +113,7 @@ describe('ProviderAddedCard', () => {
     mockFetchModelProviderModels.mockResolvedValue({ data: [{ model: 'gpt-4' }] })
     renderWithQueryClient(<ProviderAddedCard provider={mockProvider} />)
 
-    const showModelsBtn = screen.getByTestId('show-models-button')
+    const showModelsBtn = screen.getByRole('button', { name: /modelProvider\.showModels/i })
     fireEvent.click(showModelsBtn)
 
     await waitFor(() => {
@@ -127,7 +127,7 @@ describe('ProviderAddedCard', () => {
     await waitFor(() => expect(screen.queryByTestId('model-list')).not.toBeInTheDocument())
 
     // Explicitly re-find and click to re-open
-    fireEvent.click(screen.getByTestId('show-models-button'))
+    fireEvent.click(screen.getByRole('button', { name: /modelProvider\.showModels/i }))
     expect(await screen.findByTestId('model-list')).toBeInTheDocument()
     expect(mockFetchModelProviderModels).toHaveBeenCalledTimes(2) // Re-open fetches again with default stale/gc behavior
 
@@ -147,7 +147,7 @@ describe('ProviderAddedCard', () => {
     mockFetchModelProviderModels.mockReturnValue(promise)
 
     renderWithQueryClient(<ProviderAddedCard provider={mockProvider} />)
-    const showModelsBtn = screen.getByTestId('show-models-button')
+    const showModelsBtn = screen.getByRole('button', { name: /modelProvider\.showModels/i })
 
     // First call sets loading to true
     fireEvent.click(showModelsBtn)
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index c0bbab04f3..3439206785 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -127,8 +127,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
             {(showModelProvider || !notConfigured) && (
               <button
                 type="button"
-                data-testid="show-models-button"
-                className="flex h-6 items-center rounded-lg pr-1.5 pl-1 hover:bg-components-button-ghost-bg-hover"
+                className="flex h-6 items-center rounded-lg border-none bg-transparent pr-1.5 pl-1 text-left hover:bg-components-button-ghost-bg-hover"
                 aria-label={t('modelProvider.showModels', { ns: 'common' })}
                 onClick={handleOpenModelList}
               >
@@ -137,7 +136,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
                     ? t('modelProvider.modelsNum', { ns: 'common', num: modelList.length })
                     : t('modelProvider.showModels', { ns: 'common' })
                 }
-                {!loading && <div className="i-ri-arrow-right-s-line h-4 w-4" />}
+                {!loading && <div className="i-ri-arrow-right-s-line h-4 w-4" aria-hidden="true" />}
                 {
                   loading && (
                     <div className="ml-0.5 i-ri-loader-2-line h-3 w-3 animate-spin" />
diff --git a/web/app/components/header/maintenance-notice.tsx b/web/app/components/header/maintenance-notice.tsx
index 4df7108177..2c60477584 100644
--- a/web/app/components/header/maintenance-notice.tsx
+++ b/web/app/components/header/maintenance-notice.tsx
@@ -1,9 +1,11 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { NOTICE_I18N } from '@/i18n-config/language'
 
 const MaintenanceNotice = () => {
+  const { t } = useTranslation()
   const locale = useLanguage()
 
   const [showNotice, setShowNotice] = useState(() => localStorage.getItem('hide-maintenance-notice') !== '1')
@@ -27,10 +29,25 @@ const MaintenanceNotice = () => {
       <div className="mr-2 flex h-[22px] shrink-0 items-center rounded-xl bg-[#F79009] px-2 text-[11px] font-medium text-white">{titleByLocale[locale]}</div>
       {
         (NOTICE_I18N.href && NOTICE_I18N.href !== '#')
-          ? <div className="grow cursor-pointer text-xs font-medium text-gray-700" onClick={handleJumpNotice}>{descByLocale[locale]}</div>
+          ? (
+              <button
+                type="button"
+                className="grow cursor-pointer border-none bg-transparent p-0 text-left text-xs font-medium text-gray-700"
+                onClick={handleJumpNotice}
+              >
+                {descByLocale[locale]}
+              </button>
+            )
           : <div className="grow text-xs font-medium text-gray-700">{descByLocale[locale]}</div>
       }
-      <X className="h-4 w-4 shrink-0 cursor-pointer text-gray-500" onClick={handleCloseNotice} />
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="h-4 w-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-gray-500"
+        onClick={handleCloseNotice}
+      >
+        <X className="h-4 w-4" aria-hidden="true" />
+      </button>
     </div>
   )
 }
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index 1cf2202dae..5a7cf2e5f5 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -58,7 +58,7 @@ const InstallBundle: FC<Props> = ({
       }}
     >
       <DialogContent className={cn('relative w-full max-w-[480px] overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
           <div className="self-stretch title-2xl-semi-bold text-text-primary">
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index ca2b28d2ef..9808b87627 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -170,7 +170,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
       <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
         border-components-panel-border bg-components-panel-bg p-0`))}
       >
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
           <div className="flex grow flex-col items-start gap-1">
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index e7696d455a..b2a780dbdb 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -94,7 +94,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       }}
     >
       <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
           <div className="self-stretch title-2xl-semi-bold text-text-primary">
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index f2bcc14fda..523009abe1 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -78,7 +78,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
       }}
     >
       <DialogContent className={cn('w-[560px] max-w-none! overflow-hidden! text-left align-middle', cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0'))}>
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
           <div className="self-stretch title-2xl-semi-bold text-text-primary">
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
index f00df35d0c..dc05641a08 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/add-oauth-button.spec.tsx
@@ -104,7 +104,7 @@ describe('AddOAuthButton', () => {
   it('should open OAuth settings modal when settings icon clicked', () => {
     render(<AddOAuthButton pluginPayload={basePayload} buttonText="Use OAuth" />)
 
-    fireEvent.click(screen.getByTestId('oauth-settings-button'))
+    fireEvent.click(screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i }))
 
     expect(screen.getByTestId('oauth-settings-modal')).toBeInTheDocument()
     expect(mockOAuthClientSettingsProps.at(-1)?.open).toBe(true)
@@ -113,7 +113,7 @@ describe('AddOAuthButton', () => {
   it('should close OAuth settings modal', () => {
     render(<AddOAuthButton pluginPayload={basePayload} buttonText="Use OAuth" />)
 
-    fireEvent.click(screen.getByTestId('oauth-settings-button'))
+    fireEvent.click(screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i }))
     fireEvent.click(screen.getByTestId('oauth-settings-close'))
 
     expect(screen.queryByTestId('oauth-settings-modal')).not.toBeInTheDocument()
@@ -223,7 +223,7 @@ describe('AddOAuthButton', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('oauth-settings-button'))
+    fireEvent.click(screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i }))
 
     const settingsProps = mockOAuthClientSettingsProps.at(-1)
     expect(settingsProps?.editValues).toMatchObject({
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
index 0cc374d113..6987d6435b 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
@@ -231,7 +231,7 @@ describe('ApiKeyModal', () => {
     const mockOnClose = vi.fn()
     render(<ApiKeyModal pluginPayload={basePayload} onClose={mockOnClose} />)
 
-    fireEvent.click(screen.getByTestId('modal-close'))
+    fireEvent.click(screen.getByRole('button', { name: /Close|operation.close/ }))
     expect(mockOnClose).toHaveBeenCalled()
   })
 
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
index cba5c60654..3601d95a6b 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx
@@ -440,7 +440,7 @@ describe('AddOAuthButton', () => {
         { wrapper: createWrapper() },
       )
 
-      expect(screen.getByRole('button').className).toContain('custom-class')
+      expect(screen.getByText('use oauth').closest('.custom-class')).toBeInTheDocument()
     })
 
     it('should use oAuthData prop when provided', () => {
@@ -580,8 +580,7 @@ describe('AddOAuthButton', () => {
 
       render(<AddOAuthButton pluginPayload={pluginPayload} />, { wrapper: createWrapper() })
 
-      // Click the settings icon using data-testid for reliable selection
-      const settingsButton = screen.getByTestId('oauth-settings-button')
+      const settingsButton = screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i })
       fireEvent.click(settingsButton)
 
       await waitFor(() => {
@@ -669,11 +668,7 @@ describe('AddOAuthButton', () => {
 
       render(<AddOAuthButton pluginPayload={pluginPayload} />, { wrapper: createWrapper() })
 
-      // Open settings by clicking the gear icon
-      const button = screen.getByRole('button')
-      const gearIconContainer = button.querySelector('[class*="shrink-0"][class*="w-8"]')
-      if (gearIconContainer)
-        fireEvent.click(gearIconContainer)
+      fireEvent.click(screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i }))
 
       await waitFor(() => {
         expect(screen.getByText('plugin.auth.oauthClientSettings')).toBeInTheDocument()
@@ -706,11 +701,7 @@ describe('AddOAuthButton', () => {
 
       render(<AddOAuthButton pluginPayload={pluginPayload} />, { wrapper: createWrapper() })
 
-      // Click the settings icon
-      const button = screen.getByRole('button')
-      const gearIconContainer = button.querySelector('[class*="shrink-0"][class*="w-8"]')
-      if (gearIconContainer)
-        fireEvent.click(gearIconContainer)
+      fireEvent.click(screen.getByRole('button', { name: /plugin\.auth\.oauthClientSettings/i }))
 
       await waitFor(() => {
         // OAuthClientSettings modal should open
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
index 7509090be3..1a0e63c45e 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
@@ -205,7 +205,7 @@ describe('OAuthClientSettings', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('modal-close'))
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/i }))
     expect(mockOnClose).toHaveBeenCalled()
   })
 
@@ -213,7 +213,7 @@ describe('OAuthClientSettings', () => {
     const mockOnClose = vi.fn()
     render(<ControlledSettingsHarness OAuthClientSettings={OAuthClientSettings} onClose={mockOnClose} />)
 
-    fireEvent.click(screen.getByTestId('modal-close'))
+    fireEvent.click(screen.getByRole('button', { name: /operation\.cancel/i }))
 
     await waitFor(() => {
       expect(screen.getByTestId('modal-open-state')).toHaveTextContent('false')
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 41ef893db8..b2326d8ed0 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -187,19 +187,15 @@ const AddOAuthButton = ({
     <>
       {
         isConfigured && (
-          <Button
-            variant={buttonVariant}
-            className={cn(
-              'w-full px-0 py-0 hover:bg-components-button-primary-bg',
-              className,
-            )}
-            disabled={disabled}
-            onClick={handleOAuth}
-          >
-            <div className={cn(
-              'flex h-full w-0 grow items-center justify-center rounded-l-lg pl-0.5 hover:bg-components-button-primary-bg-hover',
-              buttonLeftClassName,
-            )}
+          <div className={cn('flex w-full', className)}>
+            <Button
+              variant={buttonVariant}
+              className={cn(
+                'h-8 min-w-0 flex-1 rounded-r-none px-0 py-0 hover:bg-components-button-primary-bg-hover',
+                buttonLeftClassName,
+              )}
+              disabled={disabled}
+              onClick={handleOAuth}
             >
               <div
                 className="truncate"
@@ -219,27 +215,28 @@ const AddOAuthButton = ({
                   </Badge>
                 )
               }
-            </div>
+            </Button>
             <div className={cn(
-              'h-4 w-px shrink-0 bg-text-primary-on-surface opacity-[0.15]',
+              'h-4 w-px shrink-0 self-center bg-text-primary-on-surface opacity-[0.15]',
               dividerClassName,
             )}
             >
             </div>
-            <div
-              data-testid="oauth-settings-button"
+            <Button
+              variant={buttonVariant}
+              aria-label={t('auth.oauthClientSettings', { ns: 'plugin' })}
               className={cn(
-                'flex h-full w-8 shrink-0 items-center justify-center rounded-r-lg hover:bg-components-button-primary-bg-hover',
+                'h-8 w-8 shrink-0 rounded-l-none px-0 py-0 hover:bg-components-button-primary-bg-hover',
                 buttonRightClassName,
               )}
-              onClick={(e) => {
-                e.stopPropagation()
+              disabled={disabled}
+              onClick={() => {
                 openOAuthSettings()
               }}
             >
-              <span className="i-ri-equalizer-2-line h-4 w-4" />
-            </div>
-          </Button>
+              <span className="i-ri-equalizer-2-line h-4 w-4" aria-hidden="true" />
+            </Button>
+          </div>
         )
       }
       {
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index 3a7e495a77..90e44cc5ec 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -152,7 +152,6 @@ const ApiKeyModal = ({
               {t('auth.useApiAuthDesc', { ns: 'plugin' })}
             </div>
             <DialogCloseButton
-              data-testid="modal-close"
               className="top-5 right-5 h-8 w-8 rounded-lg"
             />
           </div>
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index a3bd35a865..9f4c5cc046 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -150,7 +150,6 @@ const OAuthClientSettings = ({
               {t('auth.oauthClientSettings', { ns: 'plugin' })}
             </DialogTitle>
             <DialogCloseButton
-              data-testid="modal-x-close"
               className="top-5 right-5 h-8 w-8 rounded-lg"
             />
           </div>
@@ -182,7 +181,6 @@ const OAuthClientSettings = ({
             </div>
             <div className="flex items-center">
               <Button
-                data-testid="modal-close"
                 variant="secondary"
                 onClick={() => handleOpenChange(false)}
                 disabled={isDisabled}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
index af52ec14f0..2f050f2747 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
@@ -379,7 +379,7 @@ describe('CommonCreateModal', () => {
       const mockOnClose = vi.fn()
       render(<CommonCreateModal {...defaultProps} onClose={mockOnClose} />)
 
-      fireEvent.click(screen.getByTestId('modal-close'))
+      fireEvent.click(screen.getByRole('button', { name: /Close|operation.close/ }))
 
       expect(mockOnClose).toHaveBeenCalled()
     })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index f15a933f18..201f521b48 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -98,7 +98,6 @@ function CommonCreateModalContent({ onClose, createType, builder }: Omit<Props,
         </DialogTitle>
         <DialogCloseButton
           className="top-5 right-5 h-8 w-8 rounded-lg [&>span]:h-5 [&>span]:w-5"
-          data-testid="modal-close"
           onClick={onClose}
         />
       </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index 3c8b8c6aa7..189e4af2a5 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -68,7 +68,7 @@ export const OAuthClientSettingsModal = ({ open, oauthConfig, onOpenChange, show
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton data-testid="modal-close" className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             <div className="mb-2 system-sm-medium text-text-secondary">
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
index e1544f6649..dcf07e66a2 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
@@ -76,6 +76,11 @@ vi.mock('../../../store', () => ({
     selector({ detail: mockPluginStoreDetail }),
 }))
 
+const getCancelButton = () => screen.getByRole('button', { name: /common\.operation\.cancel/i })
+const getConfirmButton = () => screen.getByRole('button', { name: /common\.operation\.(save|saving)|pluginTrigger\.modal\.common\.verify/i })
+const getBackButton = () => screen.getByRole('button', { name: /pluginTrigger\.modal\.common\.back/i })
+const queryBackButton = () => screen.queryByRole('button', { name: /pluginTrigger\.modal\.common\.back/i })
+
 const mockRefetch = vi.fn()
 vi.mock('../../use-subscription-list', () => ({
   useSubscriptionList: () => ({ refetch: mockRefetch }),
@@ -401,7 +406,7 @@ describe('Edit Modal Components', () => {
     describe('Confirm Button Text', () => {
       it('should show "save" when not updating', () => {
         render(<ManualEditModal {...createProps()} />)
-        expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+        expect(getConfirmButton()).toHaveTextContent('common.operation.save')
       })
     })
 
@@ -409,21 +414,21 @@ describe('Edit Modal Components', () => {
       it('should call onClose when cancel button is clicked', () => {
         const onClose = vi.fn()
         render(<ManualEditModal {...createProps({ onClose })} />)
-        fireEvent.click(screen.getByTestId('modal-cancel-button'))
+        fireEvent.click(getCancelButton())
         expect(onClose).toHaveBeenCalledTimes(1)
       })
 
       it('should call onClose when close button is clicked', () => {
         const onClose = vi.fn()
         render(<ManualEditModal {...createProps({ onClose })} />)
-        fireEvent.click(screen.getByTestId('modal-close-button'))
+        fireEvent.click(screen.getByRole('button', { name: 'Close' }))
         expect(onClose).toHaveBeenCalledTimes(1)
       })
 
       it('should call updateSubscription when confirm is clicked with valid form', () => {
         formValuesMap.set('main', { values: { subscription_name: 'New Name' }, isCheckValidated: true })
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ subscriptionId: 'test-subscription-id', name: 'New Name' }),
           expect.any(Object),
@@ -433,7 +438,7 @@ describe('Edit Modal Components', () => {
       it('should not call updateSubscription when form validation fails', () => {
         formValuesMap.set('main', { values: {}, isCheckValidated: false })
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).not.toHaveBeenCalled()
       })
     })
@@ -446,7 +451,7 @@ describe('Edit Modal Components', () => {
           isCheckValidated: true,
         })
         render(<ManualEditModal {...createProps({ subscription })} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ properties: undefined }),
           expect.any(Object),
@@ -460,7 +465,7 @@ describe('Edit Modal Components', () => {
           isCheckValidated: true,
         })
         render(<ManualEditModal {...createProps({ subscription })} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ properties: { custom: 'new' } }),
           expect.any(Object),
@@ -474,7 +479,7 @@ describe('Edit Modal Components', () => {
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onSuccess())
         const onClose = vi.fn()
         render(<ManualEditModal {...createProps({ onClose })} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
         })
@@ -486,7 +491,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError(new Error('Custom error')))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -499,7 +504,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({ message: 'Object error' }))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -512,7 +517,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({}))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -525,7 +530,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError(null))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -538,7 +543,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({ message: 123 }))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -551,7 +556,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({ message: '' }))
         render(<ManualEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -591,7 +596,7 @@ describe('Edit Modal Components', () => {
       it('should show saving text when isUpdating is true', () => {
         mockIsUpdating = true
         render(<ManualEditModal {...createProps()} />)
-        expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.saving')
+        expect(getConfirmButton()).toHaveTextContent('common.operation.saving')
       })
     })
   })
@@ -697,7 +702,7 @@ describe('Edit Modal Components', () => {
           })}
           />,
         )
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ parameters: undefined }),
           expect.any(Object),
@@ -718,7 +723,7 @@ describe('Edit Modal Components', () => {
           })}
           />,
         )
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ parameters: { channel: 'new' } }),
           expect.any(Object),
@@ -732,7 +737,7 @@ describe('Edit Modal Components', () => {
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onSuccess())
         const onClose = vi.fn()
         render(<OAuthEditModal {...createProps({ onClose })} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
         })
@@ -743,7 +748,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError(new Error('Failed')))
         render(<OAuthEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
         })
@@ -753,7 +758,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({ message: 123 }))
         render(<OAuthEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -766,7 +771,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('main', { values: { subscription_name: 'Name' }, isCheckValidated: true })
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError({ message: '' }))
         render(<OAuthEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -780,7 +785,7 @@ describe('Edit Modal Components', () => {
       it('should not call updateSubscription when form validation fails', () => {
         formValuesMap.set('main', { values: {}, isCheckValidated: false })
         render(<OAuthEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).not.toHaveBeenCalled()
       })
     })
@@ -831,7 +836,7 @@ describe('Edit Modal Components', () => {
       it('should show saving text when isUpdating is true', () => {
         mockIsUpdating = true
         render(<OAuthEditModal {...createProps()} />)
-        expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.saving')
+        expect(getConfirmButton()).toHaveTextContent('common.operation.saving')
       })
     })
   })
@@ -879,12 +884,12 @@ describe('Edit Modal Components', () => {
 
       it('should show verify button text in credentials step', () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('pluginTrigger.modal.common.verify')
+        expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.verify')
       })
 
       it('should not show extra button (back) in credentials step', () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        expect(screen.queryByTestId('modal-extra-button')).not.toBeInTheDocument()
+        expect(queryBackButton()).not.toBeInTheDocument()
       })
 
       it('should render ReadmeEntrance when pluginDetail is provided', () => {
@@ -917,7 +922,7 @@ describe('Edit Modal Components', () => {
       it('should call verifyCredentials when confirm clicked in credentials step', () => {
         formValuesMap.set('credentials', { values: { api_key: 'test-key' }, isCheckValidated: true })
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockVerifyCredentials).toHaveBeenCalledWith(
           expect.objectContaining({
             provider: 'test-provider',
@@ -931,7 +936,7 @@ describe('Edit Modal Components', () => {
       it('should not call verifyCredentials when form validation fails', () => {
         formValuesMap.set('credentials', { values: {}, isCheckValidated: false })
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockVerifyCredentials).not.toHaveBeenCalled()
       })
 
@@ -939,7 +944,7 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('credentials', { values: { api_key: 'new-key' }, isCheckValidated: true })
         mockVerifyCredentials.mockImplementation((_p, cb) => cb.onSuccess())
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'success',
@@ -947,7 +952,7 @@ describe('Edit Modal Components', () => {
           }))
         })
         // Should now be in step 2
-        expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+        expect(getConfirmButton()).toHaveTextContent('common.operation.save')
       })
 
       it('should show error toast on verification failure', async () => {
@@ -955,7 +960,7 @@ describe('Edit Modal Components', () => {
         mockParsePluginErrorMessage.mockResolvedValue('Invalid API key')
         mockVerifyCredentials.mockImplementation((_p, cb) => cb.onError(new Error('Invalid')))
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -969,7 +974,7 @@ describe('Edit Modal Components', () => {
         mockParsePluginErrorMessage.mockResolvedValue(null)
         mockVerifyCredentials.mockImplementation((_p, cb) => cb.onError(new Error('Invalid')))
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -985,13 +990,13 @@ describe('Edit Modal Components', () => {
         render(<ApiKeyEditModal {...createProps()} />)
 
         // Verify credentials
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
         // Update subscription
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ credentials: undefined }),
           expect.any(Object),
@@ -1008,24 +1013,24 @@ describe('Edit Modal Components', () => {
 
       it('should show save button text in configuration step', async () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
       })
 
       it('should show extra button (back) in configuration step', async () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-extra-button')).toBeInTheDocument()
-          expect(screen.getByTestId('modal-extra-button')).toHaveTextContent('pluginTrigger.modal.common.back')
+          expect(getBackButton()).toBeInTheDocument()
+          expect(getBackButton()).toHaveTextContent('pluginTrigger.modal.common.back')
         })
       })
 
       it('should not show EncryptedBottom in configuration step', async () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.queryByTestId('modal-bottom-slot')).not.toBeInTheDocument()
         })
@@ -1033,7 +1038,7 @@ describe('Edit Modal Components', () => {
 
       it('should render basic form fields in step 2', async () => {
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.getByTestId('form-field-subscription_name')).toBeInTheDocument()
           expect(screen.getByTestId('form-field-callback_url')).toBeInTheDocument()
@@ -1045,7 +1050,7 @@ describe('Edit Modal Components', () => {
           createSchemaField('param1'),
         ]
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.getByTestId('form-field-param1')).toBeInTheDocument()
         })
@@ -1063,19 +1068,19 @@ describe('Edit Modal Components', () => {
         render(<ApiKeyEditModal {...createProps()} />)
 
         // Go to step 2
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-extra-button')).toBeInTheDocument()
+          expect(getBackButton()).toBeInTheDocument()
         })
 
         // Click back
-        fireEvent.click(screen.getByTestId('modal-extra-button'))
+        fireEvent.click(getBackButton())
 
         // Should be back in step 1
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('pluginTrigger.modal.common.verify')
+          expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.verify')
         })
-        expect(screen.queryByTestId('modal-extra-button')).not.toBeInTheDocument()
+        expect(queryBackButton()).not.toBeInTheDocument()
       })
 
       it('should go back to credentials step when clicking step indicator', async () => {
@@ -1084,9 +1089,9 @@ describe('Edit Modal Components', () => {
         render(<ApiKeyEditModal {...createProps()} />)
 
         // Go to step 2
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
         // Find and click the step indicator (first step text should be clickable in step 2)
@@ -1095,7 +1100,7 @@ describe('Edit Modal Components', () => {
 
         // Should be back in step 1
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('pluginTrigger.modal.common.verify')
+          expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.verify')
         })
       })
     })
@@ -1112,13 +1117,13 @@ describe('Edit Modal Components', () => {
         render(<ApiKeyEditModal {...createProps()} />)
 
         // Step 1: Verify
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
         // Step 2: Update
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({
             subscriptionId: 'test-subscription-id',
@@ -1133,12 +1138,12 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('basic', { values: {}, isCheckValidated: false })
         render(<ApiKeyEditModal {...createProps()} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).not.toHaveBeenCalled()
       })
 
@@ -1148,12 +1153,12 @@ describe('Edit Modal Components', () => {
         const onClose = vi.fn()
         render(<ApiKeyEditModal {...createProps({ onClose })} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'success',
@@ -1170,12 +1175,12 @@ describe('Edit Modal Components', () => {
         mockUpdateSubscription.mockImplementation((_p, cb) => cb.onError(new Error('Failed')))
         render(<ApiKeyEditModal {...createProps()} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
             type: 'error',
@@ -1208,12 +1213,12 @@ describe('Edit Modal Components', () => {
           />,
         )
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ parameters: undefined }),
           expect.any(Object),
@@ -1233,12 +1238,12 @@ describe('Edit Modal Components', () => {
           />,
         )
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).toHaveBeenCalledWith(
           expect.objectContaining({ parameters: { param1: 'new_value' } }),
           expect.any(Object),
@@ -1285,9 +1290,9 @@ describe('Edit Modal Components', () => {
         ]
         render(<ApiKeyEditModal {...createProps()} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
         expect(screen.getByTestId('form-field-channel')).toHaveAttribute('data-has-dynamic-select', 'true')
@@ -1307,9 +1312,9 @@ describe('Edit Modal Components', () => {
         ]
         render(<ApiKeyEditModal {...createProps()} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
         expect(screen.getByTestId('form-field-enabled')).toHaveAttribute(
@@ -1384,12 +1389,12 @@ describe('Edit Modal Components', () => {
         formValuesMap.set('parameters', { values: {}, isCheckValidated: false })
         render(<ApiKeyEditModal {...createProps()} />)
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
-          expect(screen.getByTestId('modal-confirm-button')).toHaveTextContent('common.operation.save')
+          expect(getConfirmButton()).toHaveTextContent('common.operation.save')
         })
 
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         expect(mockUpdateSubscription).not.toHaveBeenCalled()
       })
     })
@@ -1415,7 +1420,7 @@ describe('Edit Modal Components', () => {
           createSchemaField('secret_param', 'password'),
         ]
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.getByTestId('form-field-secret_param')).toHaveAttribute('data-field-type', FormTypeEnum.secretInput)
         })
@@ -1426,7 +1431,7 @@ describe('Edit Modal Components', () => {
           createSchemaField('api_secret', 'secret'),
         ]
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.getByTestId('form-field-api_secret')).toHaveAttribute('data-field-type', FormTypeEnum.secretInput)
         })
@@ -1437,7 +1442,7 @@ describe('Edit Modal Components', () => {
           createSchemaField('count', 'integer'),
         ]
         render(<ApiKeyEditModal {...createProps()} />)
-        fireEvent.click(screen.getByTestId('modal-confirm-button'))
+        fireEvent.click(getConfirmButton())
         await waitFor(() => {
           expect(screen.getByTestId('form-field-count')).toHaveAttribute('data-field-type', FormTypeEnum.textNumber)
         })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
index 8341d716d6..14d7dc30ad 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
@@ -313,7 +313,7 @@ export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props)
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
@@ -362,7 +362,6 @@ export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props)
               {currentStep === EditStep.EditConfiguration && (
                 <>
                   <Button
-                    data-testid="modal-extra-button"
                     variant="secondary"
                     onClick={handleBack}
                     disabled={isDisabled}
@@ -373,14 +372,12 @@ export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props)
                 </>
               )}
               <Button
-                data-testid="modal-cancel-button"
                 onClick={onClose}
                 disabled={isDisabled}
               >
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
               <Button
-                data-testid="modal-confirm-button"
                 className="ml-2"
                 variant="primary"
                 onClick={handleConfirm}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
index a7b5c9f2c0..d70fcbfdef 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
@@ -154,7 +154,7 @@ export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props)
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
@@ -171,14 +171,12 @@ export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props)
             <div />
             <div className="flex items-center">
               <Button
-                data-testid="modal-cancel-button"
                 onClick={onClose}
                 disabled={isUpdating}
               >
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
               <Button
-                data-testid="modal-confirm-button"
                 className="ml-2"
                 variant="primary"
                 onClick={handleConfirm}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
index 1416e02ac0..afbdbe56b3 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
@@ -168,7 +168,7 @@ export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) =
             <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
               {title}
             </DialogTitle>
-            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+            <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
           </div>
           <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
             {pluginDetail && (
@@ -185,14 +185,12 @@ export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) =
             <div />
             <div className="flex items-center">
               <Button
-                data-testid="modal-cancel-button"
                 onClick={onClose}
                 disabled={isUpdating}
               >
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
               <Button
-                data-testid="modal-confirm-button"
                 className="ml-2"
                 variant="primary"
                 onClick={handleConfirm}
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 339ec9edb5..c8f666326a 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -41,7 +41,7 @@ const PluginMutationModal: FC<Props> = ({
       }}
     >
       <DialogContent className="w-full min-w-[560px] overflow-hidden! border-none text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {modelTitle}
         </DialogTitle>
diff --git a/web/app/components/plugins/plugin-page/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/index.spec.tsx
index 067cea0a42..59d041f50c 100644
--- a/web/app/components/plugins/plugin-page/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/index.spec.tsx
@@ -465,7 +465,7 @@ describe('PluginPage Component', () => {
     it('should open settings modal when settings button is clicked', async () => {
       render(<PluginPageWithContext {...createDefaultProps()} />)
 
-      fireEvent.click(screen.getByTestId('plugin-settings-button'))
+      fireEvent.click(screen.getByRole('button', { name: /plugin\.privilege\.title/i }))
 
       await waitFor(() => {
         expect(screen.getByTestId('reference-setting-modal')).toBeInTheDocument()
@@ -476,7 +476,7 @@ describe('PluginPage Component', () => {
       render(<PluginPageWithContext {...createDefaultProps()} />)
 
       // Open modal
-      fireEvent.click(screen.getByTestId('plugin-settings-button'))
+      fireEvent.click(screen.getByRole('button', { name: /plugin\.privilege\.title/i }))
 
       await waitFor(() => {
         expect(screen.getByTestId('reference-setting-modal')).toBeInTheDocument()
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index d40a91e2b0..acd25836ab 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -222,11 +222,11 @@ const PluginPage = ({
                   <TooltipTrigger
                     render={(
                       <Button
-                        data-testid="plugin-settings-button"
+                        aria-label={t('privilege.title', { ns: 'plugin' })}
                         className="group h-full w-full p-2 text-components-button-secondary-text"
                         onClick={setShowPluginSettingModal}
                       >
-                        <RiEqualizer2Line className="h-4 w-4" />
+                        <RiEqualizer2Line className="h-4 w-4" aria-hidden="true" />
                       </Button>
                     )}
                   />
diff --git a/web/app/components/plugins/plugin-page/plugin-info.tsx b/web/app/components/plugins/plugin-page/plugin-info.tsx
index 29a137afca..6c836731cf 100644
--- a/web/app/components/plugins/plugin-page/plugin-info.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-info.tsx
@@ -31,7 +31,7 @@ const PlugInfo: FC<Props> = ({
       }}
     >
       <DialogContent className="w-full max-w-[480px]! overflow-hidden! border-none text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(`${i18nPrefix}.title`, { ns: 'plugin' })}
         </DialogTitle>
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
index c39147e83f..0a61802792 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
@@ -1104,7 +1104,7 @@ describe('auto-update-setting', () => {
 
         // Assert
         expect(screen.getByText('plugin.autoUpdate.partialUPdate:{"num":2}')).toBeInTheDocument()
-        expect(screen.getByText('plugin.autoUpdate.operation.clearAll')).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' })).toBeInTheDocument()
       })
 
       it('should render select button', () => {
@@ -1143,7 +1143,7 @@ describe('auto-update-setting', () => {
             onChange={onChange}
           />,
         )
-        fireEvent.click(screen.getByText('plugin.autoUpdate.operation.clearAll'))
+        fireEvent.click(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' }))
 
         // Assert
         expect(onChange).toHaveBeenCalledWith([])
@@ -1350,10 +1350,10 @@ describe('auto-update-setting', () => {
         render(<AutoUpdateSetting payload={payload} onChange={onChange} />)
 
         // Click time picker trigger
-        fireEvent.click(screen.getByTestId('time-picker').querySelector('[data-testid="time-input"]')!.parentElement!)
+        fireEvent.click(screen.getByRole('button', { name: /GMT-5/ }))
 
         // Set time
-        fireEvent.click(screen.getByTestId('time-picker-set'))
+        fireEvent.click(screen.getByRole('button', { name: 'Set 10:30' }))
 
         // Assert
         expect(onChange).toHaveBeenCalled()
@@ -1368,10 +1368,10 @@ describe('auto-update-setting', () => {
         render(<AutoUpdateSetting payload={payload} onChange={onChange} />)
 
         // Click time picker trigger
-        fireEvent.click(screen.getByTestId('time-picker').querySelector('[data-testid="time-input"]')!.parentElement!)
+        fireEvent.click(screen.getByRole('button', { name: /GMT-5/ }))
 
         // Clear time
-        fireEvent.click(screen.getByTestId('time-picker-clear'))
+        fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
 
         // Assert
         expect(onChange).toHaveBeenCalled()
@@ -1390,7 +1390,7 @@ describe('auto-update-setting', () => {
         render(<AutoUpdateSetting payload={payload} onChange={onChange} />)
 
         // Click clear all
-        fireEvent.click(screen.getByText('plugin.autoUpdate.operation.clearAll'))
+        fireEvent.click(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' }))
 
         // Assert
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
@@ -1411,7 +1411,7 @@ describe('auto-update-setting', () => {
         render(<AutoUpdateSetting payload={payload} onChange={onChange} />)
 
         // Click clear all
-        fireEvent.click(screen.getByText('plugin.autoUpdate.operation.clearAll'))
+        fireEvent.click(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' }))
 
         // Assert
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
@@ -1426,7 +1426,6 @@ describe('auto-update-setting', () => {
         // Act
         render(<AutoUpdateSetting {...defaultProps} payload={payload} />)
 
-        // Assert - timezone Trans component is rendered
         expect(screen.getByText('autoUpdate.changeTimezone')).toBeInTheDocument()
       })
     })
@@ -1459,7 +1458,7 @@ describe('auto-update-setting', () => {
         render(<AutoUpdateSetting payload={payload} onChange={onChange} />)
 
         // Trigger a change (clear plugins)
-        fireEvent.click(screen.getByText('plugin.autoUpdate.operation.clearAll'))
+        fireEvent.click(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' }))
 
         // Assert - other values should be preserved
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
index 99d7a5fdc5..a9ffe76ae6 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
@@ -60,7 +60,7 @@ describe('PluginsPicker', () => {
     expect(screen.getByText('plugin.autoUpdate.excludeUpdate:{"num":2}')).toBeInTheDocument()
     expect(screen.getByTestId('plugins-selected')).toHaveTextContent('dify/plugin-1,dify/plugin-2')
 
-    fireEvent.click(screen.getByText('plugin.autoUpdate.operation.clearAll'))
+    fireEvent.click(screen.getByRole('button', { name: 'plugin.autoUpdate.operation.clearAll' }))
 
     expect(onChange).toHaveBeenCalledWith([])
   })
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 5710eb7a66..33049f4b1b 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -33,7 +33,13 @@ const SettingTimeZone: FC<{
 }) => {
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
   return (
-    <span className="cursor-pointer body-xs-regular text-text-accent" onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}>{children}</span>
+    <button
+      type="button"
+      className="cursor-pointer border-none bg-transparent p-0 text-left body-xs-regular text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+      onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}
+    >
+      {children}
+    </button>
   )
 }
 const AutoUpdateSetting: FC<Props> = ({
@@ -104,8 +110,9 @@ const AutoUpdateSetting: FC<Props> = ({
 
   const renderTimePickerTrigger = useCallback(({ inputElem, onClick, isOpen }: TriggerParams) => {
     return (
-      <div
-        className="group flex h-8 w-[160px] cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2 hover:bg-state-base-hover-alt"
+      <button
+        type="button"
+        className="group flex h-8 w-[160px] cursor-pointer items-center justify-between rounded-lg border-none bg-components-input-bg-normal px-2 text-left hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onClick}
       >
         <div className="flex w-0 grow items-center gap-x-1">
@@ -117,7 +124,7 @@ const AutoUpdateSetting: FC<Props> = ({
           {inputElem}
         </div>
         <div className="system-sm-regular text-text-tertiary">{convertTimezoneToOffsetStr(timezone)}</div>
-      </div>
+      </button>
     )
   }, [timezone])
 
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index 1bb4caeb3f..ef25c35592 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -39,7 +39,13 @@ const PluginsPicker: FC<Props> = ({
         ? (
             <div className="flex justify-between text-text-tertiary">
               <div className="system-xs-medium">{t(`${i18nPrefix}.${isExcludeMode ? 'excludeUpdate' : 'partialUPdate'}`, { ns: 'plugin', num: value.length })}</div>
-              <div className="cursor-pointer system-xs-medium" onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}</div>
+              <button
+                type="button"
+                className="cursor-pointer border-none bg-transparent p-0 text-left system-xs-medium text-text-tertiary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={handleClear}
+              >
+                {t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}
+              </button>
             </div>
           )
         : (
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index 9bc0aaf7d6..e7d15f5402 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -61,7 +61,7 @@ const PluginSettingModal: FC<Props> = ({
       }}
     >
       <DialogContent className="w-[620px] max-w-[620px] overflow-hidden! border-none p-0! text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className="shadows-shadow-xl flex w-full flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg">
           <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
diff --git a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
index 30b503899e..2f21811f86 100644
--- a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
@@ -729,7 +729,7 @@ describe('PublishAsKnowledgePipelineModal', () => {
     it('should call onCancel when close icon is clicked', () => {
       render(<PublishAsKnowledgePipelineModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('publish-modal-close-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       expect(mockOnCancel).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
index e1a4af0410..4a795ba516 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
@@ -122,7 +122,7 @@ describe('PublishAsKnowledgePipelineModal', () => {
   it('should call onCancel when close button clicked', () => {
     render(<PublishAsKnowledgePipelineModal {...defaultProps} />)
 
-    fireEvent.click(screen.getByTestId('publish-modal-close-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(mockOnCancel).toHaveBeenCalled()
   })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/__tests__/index.spec.tsx
index d8feea44c6..d824ea52fb 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/__tests__/index.spec.tsx
@@ -153,7 +153,7 @@ describe('InputFieldEditorPanel', () => {
 
       renderWithProviders(<InputFieldEditorPanel {...props} />)
 
-      const closeButton = screen.getByRole('button', { name: '' })
+      const closeButton = screen.getByRole('button', { name: /Close|operation.close/ })
       expect(closeButton).toBeInTheDocument()
     })
 
@@ -270,7 +270,7 @@ describe('InputFieldEditorPanel', () => {
       const props = createInputFieldEditorProps({ onClose })
 
       renderWithProviders(<InputFieldEditorPanel {...props} />)
-      fireEvent.click(screen.getByTestId('input-field-editor-close-btn'))
+      fireEvent.click(screen.getByRole('button', { name: /Close|operation.close/ }))
 
       expect(onClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/show-all-settings.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/show-all-settings.spec.tsx
index 9dd943f969..438fef8d7b 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/show-all-settings.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/show-all-settings.spec.tsx
@@ -55,7 +55,7 @@ describe('ShowAllSettings', () => {
     }
     render(<ShowAllSettingsHarness />)
 
-    fireEvent.click(screen.getByText('appDebug.variableConfig.showAllSettings'))
+    fireEvent.click(screen.getByRole('button', { name: /appDebug\.variableConfig\.showAllSettings/ }))
 
     expect(handleShowAllSettings).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
index d881188446..4eb290450a 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/show-all-settings.tsx
@@ -24,7 +24,11 @@ const ShowAllSettings = ({
     const hiddenFieldNames = useHiddenFieldNames(type)
 
     return (
-      <div className="flex cursor-pointer items-center gap-x-4" onClick={handleShowAllSettings}>
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center gap-x-4 border-none bg-transparent p-0 text-left"
+        onClick={handleShowAllSettings}
+      >
         <div className="flex grow flex-col">
           <span className="flex min-h-6 items-center system-sm-medium text-text-secondary">
             {t('variableConfig.showAllSettings', { ns: 'appDebug' })}
@@ -33,8 +37,8 @@ const ShowAllSettings = ({
             {hiddenFieldNames}
           </span>
         </div>
-        <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-secondary" />
-      </div>
+        <RiArrowRightSLine className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
+      </button>
     )
   },
 })
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
index 6bd21866db..5b7f565c09 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
@@ -49,11 +49,11 @@ const InputFieldEditorPanel = ({
       </div>
       <button
         type="button"
-        data-testid="input-field-editor-close-btn"
-        className="absolute top-2.5 right-2.5 flex size-8 items-center justify-center"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-2.5 right-2.5 flex size-8 items-center justify-center border-none bg-transparent p-0"
         onClick={onClose}
       >
-        <RiCloseLine className="size-4 text-text-tertiary" />
+        <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <InputFieldForm
         initialData={formData}
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
index 84c700e273..b87b097c60 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/__tests__/index.spec.tsx
@@ -1574,7 +1574,7 @@ describe('handleSubmitField', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('field-list-add-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
 
     expect(mockToggleInputFieldEditPanel).toHaveBeenCalled()
     const editorProps = mockToggleInputFieldEditPanel.mock.calls[0]![0]
@@ -1798,7 +1798,7 @@ describe('handleSubmitField', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('field-list-add-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
 
     const editorProps = mockToggleInputFieldEditPanel.mock.calls[0]![0]
 
@@ -1822,7 +1822,7 @@ describe('handleSubmitField', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('field-list-add-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
 
     const editorProps = mockToggleInputFieldEditPanel.mock.calls[0]![0]
     expect(editorProps).toHaveProperty('onClose')
@@ -1853,7 +1853,7 @@ describe('Duplicate Variable Name Handling', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('field-list-add-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
 
     const editorProps = mockToggleInputFieldEditPanel.mock.calls[0]![0]
 
@@ -1939,7 +1939,7 @@ describe('Integration Tests', () => {
       )
       fireEvent.mouseEnter(container.querySelector('.handle')!)
 
-      fireEvent.click(screen.getByTestId('field-list-add-btn'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
       expect(mockToggleInputFieldEditPanel).toHaveBeenCalled()
 
       const fieldItemButtons = container.querySelectorAll('.handle button.action-btn')
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
index 64b05f762d..0e7400d302 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
@@ -3,6 +3,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
 import FieldListContainer from './field-list-container'
@@ -27,6 +28,7 @@ const FieldList = ({
   labelClassName,
   allVariableNames,
 }: FieldListProps) => {
+  const { t } = useTranslation()
   const onInputFieldsChange = useCallback((value: InputVar[]) => {
     handleInputFieldsChange(nodeId, value)
   }, [handleInputFieldsChange, nodeId])
@@ -53,12 +55,12 @@ const FieldList = ({
           {LabelRightContent}
         </div>
         <ActionButton
-          data-testid="field-list-add-btn"
+          aria-label={t('operation.add', { ns: 'common' })}
           onClick={() => handleOpenInputFieldEditor()}
           disabled={readonly}
           className={cn(readonly && 'cursor-not-allowed')}
         >
-          <RiAddLine className="h-4 w-4 text-text-tertiary" />
+          <RiAddLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
         </ActionButton>
       </div>
       <FieldListContainer
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index eeb6337847..a7f06197b5 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -81,13 +81,14 @@ const PublishAsKnowledgePipelineModal = ({
 
           <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
             {t('common.publishAs', { ns: 'pipeline' })}
-            <div
-              data-testid="publish-modal-close-btn"
-              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center"
+            <button
+              type="button"
+              aria-label={t('operation.close', { ns: 'common' })}
+              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center border-none bg-transparent p-0"
               onClick={onCancel}
             >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
+              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            </button>
           </div>
           <div className="px-6 py-3">
             <div className="mb-5 flex">
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index da75e03b5c..7a597c911b 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -50,9 +50,14 @@ const UpdateDSLModal = ({
 
           <div className="mb-3 flex items-center justify-between">
             <div className="title-2xl-semi-bold text-text-primary">{t('common.importDSL', { ns: 'workflow' })}</div>
-            <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
-              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              aria-label={t('operation.close', { ns: 'common' })}
+              onClick={onCancel}
+            >
+              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+            </button>
           </div>
           <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
             <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
diff --git a/web/app/components/share/text-generation/__tests__/text-generation-result-panel.spec.tsx b/web/app/components/share/text-generation/__tests__/text-generation-result-panel.spec.tsx
index e0d361eefb..b54534eb3c 100644
--- a/web/app/components/share/text-generation/__tests__/text-generation-result-panel.spec.tsx
+++ b/web/app/components/share/text-generation/__tests__/text-generation-result-panel.spec.tsx
@@ -151,10 +151,10 @@ describe('TextGenerationResultPanel', () => {
       values: baseProps.exportRes,
     }))
     expect(screen.getByText('share.generation.batchFailed.info:{"num":1}'))!.toBeInTheDocument()
-    expect(screen.getByText('share.generation.batchFailed.retry'))!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'share.generation.batchFailed.retry' }))!.toBeInTheDocument()
     expect(screen.getByRole('status', { name: 'appApi.loading' }))!.toBeInTheDocument()
 
-    fireEvent.click(screen.getByText('share.generation.batchFailed.retry'))
+    fireEvent.click(screen.getByRole('button', { name: 'share.generation.batchFailed.retry' }))
     expect(handleRetryAllFailedTask).toHaveBeenCalledTimes(1)
   })
 
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index f3b2bef5ad..b851610661 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -25,7 +25,7 @@ const InfoModal = ({
       }}
     >
       <DialogContent className="w-full max-w-[400px] min-w-[400px] overflow-hidden! border-none p-0! text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
 
         <div className={cn('flex flex-col items-center gap-4 px-4 pt-10 pb-8')}>
           <AppIcon
diff --git a/web/app/components/share/text-generation/run-once/__tests__/index.spec.tsx b/web/app/components/share/text-generation/run-once/__tests__/index.spec.tsx
index 628bf9bd85..40a2bdbaaf 100644
--- a/web/app/components/share/text-generation/run-once/__tests__/index.spec.tsx
+++ b/web/app/components/share/text-generation/run-once/__tests__/index.spec.tsx
@@ -219,7 +219,7 @@ describe('RunOnce', () => {
     await waitFor(() => {
       expect(onInputsChange).toHaveBeenCalled()
     })
-    fireEvent.click(screen.getByTestId('run-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'share.generation.run' }))
     expect(onSend).toHaveBeenCalledTimes(1)
   })
 
@@ -233,7 +233,7 @@ describe('RunOnce', () => {
     await waitFor(() => {
       expect(onInputsChange).toHaveBeenCalled()
     })
-    const stopButton = screen.getByTestId('stop-button')
+    const stopButton = screen.getByRole('button', { name: 'share.generation.stopRun:{"defaultValue":"Stop Run"}' })
     fireEvent.click(stopButton)
     expect(onStop).toHaveBeenCalledTimes(1)
   })
@@ -247,7 +247,7 @@ describe('RunOnce', () => {
     await waitFor(() => {
       expect(onInputsChange).toHaveBeenCalled()
     })
-    const stopButton = screen.getByTestId('stop-button')
+    const stopButton = screen.getByRole('button', { name: 'share.generation.stopRun:{"defaultValue":"Stop Run"}' })
     expect(stopButton)!.toBeDisabled()
   })
 
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 96b223e61b..285ca803a8 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -251,7 +251,6 @@ const RunOnce: FC<IRunOnceProps> = ({
                 variant={isRunning ? 'secondary' : 'primary'}
                 disabled={isRunning && runControl?.isStopping}
                 onClick={handlePrimaryClick}
-                data-testid={isRunning ? 'stop-button' : 'run-button'}
               >
                 {isRunning
                   ? (
diff --git a/web/app/components/share/text-generation/text-generation-result-panel.tsx b/web/app/components/share/text-generation/text-generation-result-panel.tsx
index bcd38e563a..67681a123a 100644
--- a/web/app/components/share/text-generation/text-generation-result-panel.tsx
+++ b/web/app/components/share/text-generation/text-generation-result-panel.tsx
@@ -184,7 +184,13 @@ const TextGenerationResultPanel: FC<TextGenerationResultPanelProps> = ({
             <span aria-hidden className="i-ri-error-warning-fill h-4 w-4 text-text-destructive" />
             <div className="system-sm-medium text-text-secondary">{t('generation.batchFailed.info', { ns: 'share', num: allFailedTaskList.length })}</div>
             <div className="h-3.5 w-px bg-divider-regular"></div>
-            <div onClick={handleRetryAllFailedTask} className="cursor-pointer system-sm-semibold-uppercase text-text-accent">{t('generation.batchFailed.retry', { ns: 'share' })}</div>
+            <button
+              type="button"
+              className="inline cursor-pointer border-none bg-transparent p-0 text-left system-sm-semibold-uppercase text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={handleRetryAllFailedTask}
+            >
+              {t('generation.batchFailed.retry', { ns: 'share' })}
+            </button>
           </div>
         )}
       </div>
diff --git a/web/app/components/signin/__tests__/countdown.spec.tsx b/web/app/components/signin/__tests__/countdown.spec.tsx
index 7d5e847b72..4ac0b437bb 100644
--- a/web/app/components/signin/__tests__/countdown.spec.tsx
+++ b/web/app/components/signin/__tests__/countdown.spec.tsx
@@ -31,7 +31,7 @@ describe('Countdown', () => {
       localStorage.setItem(COUNT_DOWN_KEY, '0')
       render(<Countdown />)
 
-      expect(screen.getByText('login.checkCode.resend')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'login.checkCode.resend' })).toBeInTheDocument()
       expect(screen.queryByText('s')).not.toBeInTheDocument()
     })
 
@@ -39,7 +39,7 @@ describe('Countdown', () => {
       localStorage.setItem(COUNT_DOWN_KEY, '1000')
       render(<Countdown />)
 
-      expect(screen.queryByText('login.checkCode.resend')).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'login.checkCode.resend' })).not.toBeInTheDocument()
     })
   })
 
@@ -79,7 +79,7 @@ describe('Countdown', () => {
 
       render(<Countdown onResend={onResend} />)
 
-      const resendLink = screen.getByText('login.checkCode.resend')
+      const resendLink = screen.getByRole('button', { name: 'login.checkCode.resend' })
       fireEvent.click(resendLink)
 
       expect(onResend).toHaveBeenCalledTimes(1)
@@ -90,7 +90,7 @@ describe('Countdown', () => {
 
       render(<Countdown />)
 
-      const resendLink = screen.getByText('login.checkCode.resend')
+      const resendLink = screen.getByRole('button', { name: 'login.checkCode.resend' })
       fireEvent.click(resendLink)
 
       expect(localStorage.setItem).toHaveBeenCalledWith(COUNT_DOWN_KEY, String(COUNT_DOWN_TIME_MS))
@@ -101,7 +101,7 @@ describe('Countdown', () => {
 
       render(<Countdown />)
 
-      const resendLink = screen.getByText('login.checkCode.resend')
+      const resendLink = screen.getByRole('button', { name: 'login.checkCode.resend' })
       expect(() => fireEvent.click(resendLink)).not.toThrow()
     })
   })
@@ -127,14 +127,14 @@ describe('Countdown', () => {
       localStorage.setItem(COUNT_DOWN_KEY, '0')
       render(<Countdown />)
 
-      expect(screen.getByText('login.checkCode.resend')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'login.checkCode.resend' })).toBeInTheDocument()
     })
 
     it('should handle negative time values', () => {
       localStorage.setItem(COUNT_DOWN_KEY, '-1000')
       render(<Countdown />)
 
-      expect(screen.getByText('login.checkCode.resend')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'login.checkCode.resend' })).toBeInTheDocument()
     })
 
     it('should round time display correctly', () => {
@@ -160,7 +160,7 @@ describe('Countdown', () => {
 
       render(<Countdown onResend={onResend} />)
 
-      expect(screen.getByText('login.checkCode.resend')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'login.checkCode.resend' })).toBeInTheDocument()
     })
 
     it('should render correctly without any props', () => {
diff --git a/web/app/components/signin/countdown.tsx b/web/app/components/signin/countdown.tsx
index 651a2fb430..627a1eea36 100644
--- a/web/app/components/signin/countdown.tsx
+++ b/web/app/components/signin/countdown.tsx
@@ -41,7 +41,15 @@ export default function Countdown({ onResend }: CountdownProps) {
         </span>
       )}
       {
-        time <= 0 && <span className="cursor-pointer system-xs-medium text-text-accent-secondary" onClick={resend}>{t('checkCode.resend', { ns: 'login' })}</span>
+        time <= 0 && (
+          <button
+            type="button"
+            className="cursor-pointer border-none bg-transparent p-0 text-left system-xs-medium text-text-accent-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            onClick={resend}
+          >
+            {t('checkCode.resend', { ns: 'login' })}
+          </button>
+        )
       }
     </p>
   )
diff --git a/web/app/components/tools/__tests__/provider-list.spec.tsx b/web/app/components/tools/__tests__/provider-list.spec.tsx
index 6661c26083..30c2854fa3 100644
--- a/web/app/components/tools/__tests__/provider-list.spec.tsx
+++ b/web/app/components/tools/__tests__/provider-list.spec.tsx
@@ -306,7 +306,7 @@ describe('ProviderList', () => {
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'Google' } })
       expect(screen.queryByTestId('card-weather-tool')).not.toBeInTheDocument()
-      fireEvent.click(screen.getByTestId('input-clear'))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.clear' }))
       expect(screen.getByTestId('card-weather-tool')).toBeInTheDocument()
     })
 
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 00fa47ace4..029d9889e5 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -77,11 +77,10 @@ const LabelFilter: FC<LabelFilterProps> = ({
           <button
             type="button"
             aria-label={t('operation.clear', { ns: 'common' })}
-            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 p-px"
-            data-testid="label-filter-clear-button"
+            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 border-none bg-transparent p-px"
             onClick={() => onChange([])}
           >
-            <XCircle className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" />
+            <XCircle className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
           </button>
         )}
         <PopoverContent
@@ -104,11 +103,11 @@ const LabelFilter: FC<LabelFilterProps> = ({
                 <button
                   key={label.name}
                   type="button"
-                  className="flex w-full items-center gap-2 rounded-lg py-[6px] pr-2 pl-3 text-left select-none hover:bg-state-base-hover"
+                  className="flex w-full items-center gap-2 rounded-lg border-none bg-transparent py-[6px] pr-2 pl-3 text-left select-none hover:bg-state-base-hover"
                   onClick={() => selectLabel(label)}
                 >
                   <div title={label.label} className="grow truncate text-sm leading-5 text-text-secondary">{label.label}</div>
-                  {value.includes(label.name) && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
+                  {value.includes(label.name) && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />}
                 </button>
               ))}
               {!filteredLabelList.length && (
diff --git a/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx b/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
index c496dd9adf..a3bf645ba7 100644
--- a/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx
@@ -113,8 +113,7 @@ describe('MCPServerModal', () => {
 
     it('should render close icon', () => {
       render(<MCPServerModal {...defaultProps} />, { wrapper: createWrapper() })
-      const closeButton = document.querySelector('.cursor-pointer svg')
-      expect(closeButton)!.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /operation\.close/ }))!.toBeInTheDocument()
     })
   })
 
@@ -175,11 +174,8 @@ describe('MCPServerModal', () => {
       const onHide = vi.fn()
       render(<MCPServerModal {...defaultProps} onHide={onHide} />, { wrapper: createWrapper() })
 
-      const closeButton = document.querySelector('.cursor-pointer')
-      if (closeButton) {
-        fireEvent.click(closeButton)
-        expect(onHide).toHaveBeenCalled()
-      }
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close/ }))
+      expect(onHide).toHaveBeenCalled()
     })
 
     it('should call onHide when the dialog requests close', () => {
diff --git a/web/app/components/tools/mcp/__tests__/modal.spec.tsx b/web/app/components/tools/mcp/__tests__/modal.spec.tsx
index a57f88ecad..435d06b75f 100644
--- a/web/app/components/tools/mcp/__tests__/modal.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/modal.spec.tsx
@@ -227,16 +227,8 @@ describe('MCPModal', () => {
       const onHide = vi.fn()
       render(<MCPModal {...defaultProps} onHide={onHide} />, { wrapper: createWrapper() })
 
-      // Find the close button by its parent div with cursor-pointer class
-      const closeButtons = document.querySelectorAll('.cursor-pointer')
-      const closeButton = Array.from(closeButtons).find(el =>
-        el.querySelector('svg'),
-      )
-
-      if (closeButton) {
-        fireEvent.click(closeButton)
-        expect(onHide).toHaveBeenCalled()
-      }
+      fireEvent.click(screen.getByRole('button', { name: /operation\.close/ }))
+      expect(onHide).toHaveBeenCalled()
     })
 
     it('should have confirm button disabled when form is empty', () => {
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index cfb33f3839..e575988067 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -135,9 +135,14 @@ const MCPServerModal = ({
       }}
     >
       <DialogContent className="w-[calc(100vw-2rem)] max-w-[520px]! overflow-hidden! border-none p-0! text-left align-middle transition-all duration-100 ease-in">
-        <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
-          <RiCloseLine className="h-5 w-5 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-5 right-5 z-10 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={onHide}
+        >
+          <RiCloseLine className="h-5 w-5 text-text-tertiary" aria-hidden="true" />
+        </button>
         <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
           {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
         </div>
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 79179ae3dc..8df2d1f635 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -129,9 +129,14 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
 
   return (
     <>
-      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
-        <RiCloseLine className="h-5 w-5 text-text-tertiary" />
-      </div>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-5 right-5 z-10 cursor-pointer border-none bg-transparent p-1.5 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onHide}
+      >
+        <RiCloseLine className="h-5 w-5 text-text-tertiary" aria-hidden="true" />
+      </button>
       <div className="relative pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!isCreate ? t('mcp.modal.editTitle', { ns: 'tools' }) : t('mcp.modal.title', { ns: 'tools' })}
       </div>
diff --git a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
index d8babd2955..9db9852e0b 100644
--- a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
+++ b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
@@ -968,7 +968,7 @@ describe('WorkflowToolDrawer', () => {
 
       // Act
       render(<WorkflowToolDrawer {...props} />)
-      await user.click(screen.getByTestId('drawer-close'))
+      await user.click(screen.getByRole('button', { name: /Close|operation.close/ }))
 
       // Assert
       expect(onHide).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
index 6535564a32..e81d1789dd 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
@@ -110,10 +110,7 @@ describe('ConfirmModal', () => {
       const onClose = vi.fn()
       renderComponent({ onClose })
 
-      // Act - Find the close button and click it
-      const closeButton = document.querySelector('.cursor-pointer')
-      expect(closeButton).toBeInTheDocument() // Ensure the button is found before clicking
-      await user.click(closeButton!)
+      await user.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
       // Assert
       expect(onClose).toHaveBeenCalledTimes(1)
@@ -243,10 +240,9 @@ describe('ConfirmModal', () => {
       renderComponent()
 
       // Assert
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(2)
-      expect(buttons[0]).toHaveTextContent('common.operation.cancel')
-      expect(buttons[1]).toHaveTextContent('common.operation.confirm')
+      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.confirm' })).toBeInTheDocument()
     })
 
     it('should have proper text hierarchy', () => {
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 4f17862c1a..08d3253535 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -21,9 +21,14 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
         backdropProps={{ forceRender: true }}
         className={cn('w-[600px]! max-w-[600px]! p-8!')}
       >
-        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2"
+          onClick={onClose}
+        >
+          <span aria-hidden className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        </button>
         <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl">
           <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
         </div>
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index c582980a49..dfa64b1506 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -113,7 +113,6 @@ const WorkflowToolDrawerFrame = ({ title, closeLabel, onHide, children }: Workfl
                     {title}
                   </DrawerTitle>
                   <DrawerCloseButton
-                    data-testid="drawer-close"
                     className="h-6 w-6 rounded-md"
                     aria-label={closeLabel}
                   />
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 07c630dacf..2122eb9fae 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -54,24 +54,32 @@ const MethodSelector: FC<MethodSelectorProps> = ({
         >
           <div className="relative w-[320px]">
             <div className="p-1">
-              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => handleSelect('llm')}>
+              <button
+                type="button"
+                className="block w-full cursor-pointer rounded-lg border-none bg-transparent py-2.5 pr-2 pl-3 text-left hover:bg-components-panel-on-panel-item-bg-hover"
+                onClick={() => handleSelect('llm')}
+              >
                 <div className="flex items-center gap-1">
                   <div className="h-4 w-4 shrink-0">
-                    {value === 'llm' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
+                    {value === 'llm' && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden />}
                   </div>
                   <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodParameter', { ns: 'tools' })}</div>
                 </div>
                 <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">{t('createTool.toolInput.methodParameterTip', { ns: 'tools' })}</div>
-              </div>
-              <div className="cursor-pointer rounded-lg py-2.5 pr-2 pl-3 hover:bg-components-panel-on-panel-item-bg-hover" onClick={() => handleSelect('form')}>
+              </button>
+              <button
+                type="button"
+                className="block w-full cursor-pointer rounded-lg border-none bg-transparent py-2.5 pr-2 pl-3 text-left hover:bg-components-panel-on-panel-item-bg-hover"
+                onClick={() => handleSelect('form')}
+              >
                 <div className="flex items-center gap-1">
                   <div className="h-4 w-4 shrink-0">
-                    {value === 'form' && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
+                    {value === 'form' && <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden />}
                   </div>
                   <div className="text-[13px] leading-[18px] font-medium text-text-secondary">{t('createTool.toolInput.methodSetting', { ns: 'tools' })}</div>
                 </div>
                 <div className="pl-5 text-[13px] leading-[18px] text-text-tertiary">{t('createTool.toolInput.methodSettingTip', { ns: 'tools' })}</div>
-              </div>
+              </button>
             </div>
           </div>
         </PopoverContent>
diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index 1106cfcb75..1d1f375412 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -120,24 +120,24 @@ describe('SelectionContextmenu', () => {
     })
 
     await waitFor(() => {
-      expect(screen.getByTestId('selection-contextmenu-item-copy')).toBeInTheDocument()
+      expect(screen.getByRole('menuitem', { name: /common.copy/ })).toBeInTheDocument()
     })
 
-    fireEvent.click(screen.getByTestId('selection-contextmenu-item-copy'))
+    fireEvent.click(screen.getByRole('menuitem', { name: /common.copy/ }))
     expect(mockHandleNodesCopy).toHaveBeenCalledTimes(1)
     expect(store.getState().selectionMenu).toBeUndefined()
 
     act(() => {
       store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
     })
-    fireEvent.click(screen.getByTestId('selection-contextmenu-item-duplicate'))
+    fireEvent.click(screen.getByRole('menuitem', { name: /common.duplicate/ }))
     expect(mockHandleNodesDuplicate).toHaveBeenCalledTimes(1)
     expect(store.getState().selectionMenu).toBeUndefined()
 
     act(() => {
       store.setState({ selectionMenu: { clientX: 120, clientY: 120 } })
     })
-    fireEvent.click(screen.getByTestId('selection-contextmenu-item-delete'))
+    fireEvent.click(screen.getByRole('menuitem', { name: /operation.delete/ }))
     expect(mockHandleNodesDelete).toHaveBeenCalledTimes(1)
     expect(store.getState().selectionMenu).toBeUndefined()
   })
diff --git a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
index 684c700648..f461c70927 100644
--- a/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx
@@ -135,6 +135,15 @@ describe('UpdateDSLModal', () => {
     expect(onCancel).toHaveBeenCalledTimes(1)
   })
 
+  it('should call cancel handler when the close button is clicked', () => {
+    const onCancel = vi.fn()
+    renderModal({ ...defaultProps, onCancel })
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
   it('should import a valid file and emit workflow update payload', async () => {
     renderModal()
 
diff --git a/web/app/components/workflow/block-selector/__tests__/index-bar.spec.tsx b/web/app/components/workflow/block-selector/__tests__/index-bar.spec.tsx
index cdf2e2afd4..f956b3d99f 100644
--- a/web/app/components/workflow/block-selector/__tests__/index-bar.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/index-bar.spec.tsx
@@ -89,7 +89,7 @@ describe('IndexBar', () => {
         />,
       )
 
-      await user.click(screen.getByText('A'))
+      await user.click(screen.getByRole('button', { name: 'A' }))
 
       expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' })
     })
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 7565c087c3..d983519539 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -89,9 +89,14 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
     <div className={cn('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
       <div className={cn('absolute top-0 left-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
-        <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
+        <button
+          type="button"
+          className="cursor-pointer border-none bg-transparent p-0 text-left hover:text-text-secondary"
+          key={letter}
+          onClick={() => handleIndexClick(letter)}
+        >
           {letter}
-        </div>
+        </button>
       ))}
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 55732ff1cb..e073011321 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -5,6 +5,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import FormItem from './form-item'
@@ -24,6 +25,7 @@ const Form: FC<Props> = ({
   values,
   onChange,
 }) => {
+  const { t } = useTranslation()
   const mapKeysWithSameValueSelector = useMemo(() => {
     const keysWithSameValueSelector = (key: string) => {
       const targetValueSelector = inputs.find(
@@ -80,9 +82,14 @@ const Form: FC<Props> = ({
         <div className="mb-1 flex items-center justify-between">
           <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">{label}</div>
           {isArrayLikeType && !isIteratorItemFile && (
-            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddContext} data-testid="add-button">
-              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              aria-label={`${t('operation.add', { ns: 'common' })} ${label}`}
+              className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={handleAddContext}
+            >
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            </button>
           )}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
index 2844f683c0..6ed63f361e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.branches.spec.tsx
@@ -157,7 +157,7 @@ describe('VarReferencePicker branches', () => {
       value: ['node-a', 'answer'],
     })
 
-    fireEvent.click(screen.getByTestId('var-reference-picker-clear'))
+    fireEvent.click(screen.getByRole('button', { name: /Clear|operation.clear/ }))
 
     expect(onChange).toHaveBeenCalledWith([], VarKindType.variable)
   })
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
index b915201ca4..d01f68784d 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.spec.tsx
@@ -115,7 +115,7 @@ describe('VarReferencePicker', () => {
     expect(screen.getByText('Source Node')).toBeInTheDocument()
     expect(screen.getByText('answer')).toBeInTheDocument()
 
-    fireEvent.click(screen.getByTestId('var-reference-picker-clear'))
+    fireEvent.click(screen.getByRole('button', { name: /Clear|operation.clear/ }))
     expect(onChange).toHaveBeenCalledWith('', 'constant')
   })
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.trigger.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.trigger.spec.tsx
index a01d2a0387..422cf9cf5a 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.trigger.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/__tests__/var-reference-picker.trigger.spec.tsx
@@ -96,7 +96,7 @@ describe('VarReferencePickerTrigger', () => {
     fireEvent.click(screen.getByText('Source Node'), { ctrlKey: true })
     expect(handleVariableJump).toHaveBeenCalledWith('node-a')
 
-    fireEvent.click(screen.getByTestId('var-reference-picker-clear'))
+    fireEvent.click(screen.getByRole('button', { name: /Clear|operation.clear/ }))
     expect(handleClearVar).toHaveBeenCalledTimes(1)
   })
 
@@ -131,7 +131,7 @@ describe('VarReferencePickerTrigger', () => {
       varName: 'answer',
     })
 
-    expect(screen.getByTestId('add-button'))!.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.add' }))!.toBeInTheDocument()
   })
 
   it('should stay inert in readonly mode and show value type placeholder badge', () => {
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 3c9c517e55..7d87d69ac5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -11,6 +11,7 @@ import { PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { PreviewCard, PreviewCardContent, PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiArrowDownSLine, RiCloseLine, RiErrorWarningFill, RiLoader4Line, RiMoreLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
@@ -114,6 +115,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
   varName,
   variableCategory,
 }) => {
+  const { t } = useTranslation()
   const handleTriggerReadonlyClick = (e: React.MouseEvent<HTMLElement>) => {
     if (!readonly)
       return
@@ -252,9 +254,14 @@ const VarReferencePickerTrigger: FC<Props> = ({
         {isAddBtnTrigger
           ? (
               <div>
-                <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={() => {}} data-testid="add-button">
-                  <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                </div>
+                <button
+                  type="button"
+                  aria-label={t('operation.add', { ns: 'common' })}
+                  className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                  onClick={() => {}}
+                >
+                  <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                </button>
               </div>
             )
           : (
@@ -303,13 +310,14 @@ const VarReferencePickerTrigger: FC<Props> = ({
                     )
                   : resolvedVariablePicker}
                 {(hasValue && !readonly && !isInTable && !isJustShowValue) && (
-                  <div
-                    className="group invisible absolute top-[50%] right-1 h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 group-hover/wrap:visible hover:bg-state-base-hover"
+                  <button
+                    type="button"
+                    aria-label={t('operation.clear', { ns: 'common' })}
+                    className="group invisible absolute top-[50%] right-1 h-5 translate-y-[-50%] cursor-pointer rounded-md border-none bg-transparent p-1 group-hover/wrap:visible hover:bg-state-base-hover"
                     onClick={handleClearVar}
-                    data-testid="var-reference-picker-clear"
                   >
-                    <RiCloseLine className="h-3.5 w-3.5 text-text-tertiary group-hover:text-text-secondary" />
-                  </div>
+                    <RiCloseLine className="h-3.5 w-3.5 text-text-tertiary group-hover:text-text-secondary" aria-hidden="true" />
+                  </button>
                 )}
                 {!hasValue && valueTypePlaceHolder && (
                   <Badge
diff --git a/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx
index 72d640651d..ed3342ab57 100644
--- a/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx
@@ -226,16 +226,15 @@ describe('code/panel', () => {
     expect(screen.getByText('editor:editable')).toBeInTheDocument()
     expect(screen.getByText('language:javascript')).toBeInTheDocument()
 
-    const addButtons = screen.getAllByTestId('add-button')
-    await user.click(addButtons[0]!)
-    await user.click(screen.getByTestId('sync-button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.code.inputVars' }))
+    await user.click(screen.getByRole('button', { name: 'workflow.nodes.code.syncFunctionSignature' }))
     await user.click(screen.getByRole('button', { name: 'change-code' }))
     await user.click(screen.getByRole('button', { name: 'generate-code' }))
     await user.click(screen.getByRole('button', { name: 'language:javascript' }))
     await user.click(screen.getByRole('button', { name: 'change-var-list' }))
     await user.click(screen.getByRole('button', { name: 'change-output-list' }))
     await user.click(screen.getByRole('button', { name: 'remove-output' }))
-    await user.click(addButtons[1]!)
+    await user.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.code.outputVars' }))
     await user.click(screen.getByRole('button', { name: 'cancel-remove' }))
     await user.click(screen.getByRole('button', { name: 'confirm-remove' }))
 
@@ -285,8 +284,9 @@ describe('code/panel', () => {
 
     renderPanel()
 
-    expect(screen.queryByTestId('sync-button')).not.toBeInTheDocument()
-    expect(screen.getAllByTestId('add-button')).toHaveLength(1)
+    expect(screen.queryByRole('button', { name: 'workflow.nodes.code.syncFunctionSignature' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.add workflow.nodes.code.inputVars' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.code.outputVars' })).toBeInTheDocument()
     expect(screen.getByText('editor:readonly')).toBeInTheDocument()
     expect(screen.getByText('var-list:readonly')).toBeInTheDocument()
     expect(screen.getByText('output-list:readonly')).toBeInTheDocument()
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index b531dcf49c..225585eb26 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -75,17 +75,22 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
                   <div className="flex gap-2">
                     <Tooltip>
                       <TooltipTrigger
-                        className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover"
+                        className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                         onClick={handleSyncFunctionSignature}
-                        data-testid="sync-button"
+                        aria-label={t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}
                       >
-                        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
+                        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
                       </TooltipTrigger>
                       <TooltipContent>{t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}</TooltipContent>
                     </Tooltip>
-                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
-                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                    </div>
+                    <button
+                      type="button"
+                      aria-label={`${t('operation.add', { ns: 'common' })} ${t(`${i18nPrefix}.inputVars`, { ns: 'workflow' })}`}
+                      className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                      onClick={handleAddVariable}
+                    >
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    </button>
                   </div>
                 )
               : undefined
@@ -124,9 +129,14 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.outputVars`, { ns: 'workflow' })}
           operations={(
-            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddOutputVariable} data-testid="add-button">
-              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              aria-label={`${t('operation.add', { ns: 'common' })} ${t(`${i18nPrefix}.outputVars`, { ns: 'workflow' })}`}
+              className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={handleAddOutputVariable}
+            >
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            </button>
           )}
           required
         >
diff --git a/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx
index b4218e338b..4340d341ff 100644
--- a/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx
@@ -38,7 +38,7 @@ describe('EndPanel', () => {
 
     expect(screen.getByText('workflow.nodes.end.output.variable')).toBeInTheDocument()
 
-    fireEvent.click(screen.getByTestId('add-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.end.output.variable' }))
 
     expect(handleAddVariable).toHaveBeenCalledTimes(1)
   })
@@ -53,6 +53,6 @@ describe('EndPanel', () => {
 
     render(<Panel id="end-node" data={createData()} panelProps={{} as PanelProps} />)
 
-    expect(screen.queryByTestId('add-button')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.add workflow.nodes.end.output.variable' })).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index a88777c82d..a428a926eb 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -33,9 +33,14 @@ const Panel: FC<NodePanelProps<EndNodeType>> = ({
           operations={
             !readOnly
               ? (
-                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                  </div>
+                  <button
+                    type="button"
+                    aria-label={`${t('operation.add', { ns: 'common' })} ${t(`${i18nPrefix}.output.variable`, { ns: 'workflow' })}`}
+                    className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                    onClick={handleAddVariable}
+                  >
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                  </button>
                 )
               : undefined
           }
diff --git a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
index 0f0a6839eb..03247710a7 100644
--- a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
@@ -306,7 +306,7 @@ describe('human-input/panel', () => {
     const config = createConfigResult()
     mockUseConfig.mockReturnValue(config)
 
-    const { container } = renderPanel()
+    renderPanel()
 
     expect(screen.getByRole('button', { name: 'delivery-method:editable' })).toBeInTheDocument()
     expect(screen.getByText('form-content:collapsed')).toBeInTheDocument()
@@ -329,9 +329,8 @@ describe('human-input/panel', () => {
     await user.click(screen.getByRole('button', { name: 'toggle-output-vars' }))
     await user.click(screen.getByRole('button', { name: 'close-preview' }))
 
-    const iconContainers = container.querySelectorAll('div.flex.size-6.cursor-pointer')
-    await user.click(iconContainers[0] as HTMLElement)
-    await user.click(iconContainers[1] as HTMLElement)
+    await user.click(screen.getByRole('button', { name: 'common.operation.copy' }))
+    await user.click(screen.getByRole('button', { name: 'share.chat.expand' }))
 
     expect(config.handleDeliveryMethodChange).toHaveBeenCalledWith([{
       id: 'dm-email',
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/single-run-form.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/single-run-form.spec.tsx
new file mode 100644
index 0000000000..13ec9b346d
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/single-run-form.spec.tsx
@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react'
+import type { HumanInputFormData } from '@/types/workflow'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InputVarType } from '@/app/components/workflow/types'
+import { UserActionButtonType } from '../../types'
+import SingleRunForm from '../single-run-form'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+vi.mock('@langgenius/dify-ui/button', () => ({
+  Button: ({
+    children,
+    disabled,
+    onClick,
+  }: {
+    children?: ReactNode
+    disabled?: boolean
+    onClick?: () => void
+  }) => (
+    <button type="button" disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  ),
+}))
+
+vi.mock('@/app/components/base/chat/chat/answer/human-input-content/content-item', () => ({
+  __esModule: true,
+  default: ({ content }: { content: string }) => <div>{content}</div>,
+}))
+
+const createFormData = (overrides: Partial<HumanInputFormData> = {}): HumanInputFormData => ({
+  form_id: 'form-1',
+  node_id: 'human-1',
+  node_title: 'Review',
+  form_content: 'Please review {{#$output.review#}}',
+  inputs: [{
+    type: InputVarType.paragraph,
+    output_variable_name: 'review',
+    default: {
+      selector: [],
+      type: 'constant',
+      value: 'initial review',
+    },
+  }],
+  actions: [{
+    id: 'approve',
+    title: 'Approve',
+    button_style: UserActionButtonType.Primary,
+  }],
+  form_token: 'token',
+  resolved_default_values: {},
+  display_in_ui: true,
+  expiration_time: 0,
+  ...overrides,
+})
+
+describe('SingleRunForm', () => {
+  it('renders the back action as a named button and forwards clicks', async () => {
+    const user = userEvent.setup()
+    const handleBack = vi.fn()
+
+    render(
+      <SingleRunForm
+        nodeName="Review"
+        data={createFormData()}
+        showBackButton
+        handleBack={handleBack}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'nodes.humanInput.singleRun.back' }))
+
+    expect(handleBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('submits the selected action with initialized inputs', async () => {
+    const user = userEvent.setup()
+    const onSubmit = vi.fn().mockResolvedValue(undefined)
+
+    render(
+      <SingleRunForm
+        nodeName="Review"
+        data={createFormData()}
+        onSubmit={onSubmit}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Approve' }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        inputs: { review: 'initial review' },
+        action: 'approve',
+      })
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/test-email-sender.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/test-email-sender.spec.tsx
index 7c62b20b8a..638a309c06 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/test-email-sender.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/test-email-sender.spec.tsx
@@ -263,7 +263,7 @@ describe('human-input/delivery-method/test-email-sender', () => {
 
     expect(screen.getByPlaceholderText('message')).toBeInTheDocument()
 
-    await user.click(screen.getByText('workflow.nodes.humanInput.deliveryMethod.emailSender.vars'))
+    await user.click(screen.getByRole('button', { name: 'workflow.nodes.humanInput.deliveryMethod.emailSender.vars' }))
 
     expect(screen.queryByPlaceholderText('message')).not.toBeInTheDocument()
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index b88ec6cef6..158d199cbc 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -315,7 +315,13 @@ const EmailSenderModal = ({
                 i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.tip`}
                 ns="workflow"
                 components={{
-                  strong: <span onClick={jumpToEmailConfigModal} className="cursor-pointer system-xs-regular text-text-accent"></span>,
+                  strong: (
+                    <button
+                      type="button"
+                      onClick={jumpToEmailConfigModal}
+                      className="inline cursor-pointer border-none bg-transparent p-0 text-left system-xs-regular text-text-accent"
+                    />
+                  ),
                 }}
               />
             </div>
@@ -328,10 +334,15 @@ const EmailSenderModal = ({
               <Divider className="mt-4! mb-2! h-px! w-12! bg-divider-regular" />
             </div>
             <div className="py-2">
-              <div className="group flex h-6 cursor-pointer items-center" onClick={() => setCollapsed(!collapsed)}>
+              <button
+                type="button"
+                aria-expanded={!collapsed}
+                className="group flex h-6 cursor-pointer items-center border-none bg-transparent p-0 text-left"
+                onClick={() => setCollapsed(!collapsed)}
+              >
                 <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
-                <RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} />
-              </div>
+                <RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} aria-hidden />
+              </button>
               <div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
               {!collapsed && (
                 <div className="mt-3 space-y-4">
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index 6226b6c06f..507b9b1a39 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -49,10 +49,14 @@ const FormContent = ({
     <>
       {showBackButton && (
         <div className="flex items-center p-4 pb-1">
-          <div className="flex cursor-pointer items-center system-sm-semibold-uppercase text-text-accent" onClick={handleBack}>
-            <RiArrowLeftLine className="mr-1 h-4 w-4" />
+          <button
+            type="button"
+            className="flex cursor-pointer items-center border-none bg-transparent p-0 text-left system-sm-semibold-uppercase text-text-accent"
+            onClick={handleBack}
+          >
+            <RiArrowLeftLine className="mr-1 h-4 w-4" aria-hidden />
             {t('nodes.humanInput.singleRun.back', { ns: 'workflow' })}
-          </div>
+          </button>
           <div className="mx-1 system-xs-regular text-divider-deep">/</div>
           <div className="system-sm-semibold-uppercase text-text-secondary">{nodeName}</div>
         </div>
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 99b5da42eb..2f51af95b6 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -128,18 +128,25 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
               </Button>
               <div className="mx-2 h-3 w-px bg-divider-regular"></div>
               <div className="flex items-center space-x-1">
-                <div
-                  className="flex size-6 cursor-pointer items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover"
+                <button
+                  type="button"
+                  aria-label={t('operation.copy', { ns: 'common' })}
+                  className="flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 hover:bg-components-button-ghost-bg-hover"
                   onClick={() => {
                     copy(inputs.form_content)
                     toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                   }}
                 >
-                  <RiClipboardLine className="h-4 w-4 text-text-secondary" />
-                </div>
-                <div className={cn('flex size-6 cursor-pointer items-center justify-center rounded-md text-text-secondary hover:bg-components-button-ghost-bg-hover', isExpandFormContent && 'bg-state-accent-active text-text-accent')} onClick={toggleExpandFormContent}>
-                  {isExpandFormContent ? <RiCollapseDiagonalLine className="h-4 w-4" /> : <RiExpandDiagonalLine className="h-4 w-4" />}
-                </div>
+                  <RiClipboardLine className="h-4 w-4 text-text-secondary" aria-hidden />
+                </button>
+                <button
+                  type="button"
+                  aria-label={t(isExpandFormContent ? 'chat.collapse' : 'chat.expand', { ns: 'share' })}
+                  className={cn('flex size-6 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-text-secondary hover:bg-components-button-ghost-bg-hover', isExpandFormContent && 'bg-state-accent-active text-text-accent')}
+                  onClick={toggleExpandFormContent}
+                >
+                  {isExpandFormContent ? <RiCollapseDiagonalLine className="h-4 w-4" aria-hidden /> : <RiExpandDiagonalLine className="h-4 w-4" aria-hidden />}
+                </button>
               </div>
             </div>
           )}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
index ea02cf5980..1c7513d13f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
@@ -300,7 +300,7 @@ describe('knowledge-retrieval path', () => {
         />,
       )
 
-      await user.click(screen.getByTestId('add-button'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.knowledgeRetrieval.knowledge' }))
       await user.click(screen.getByText('select-dataset'))
 
       expect(onChange).toHaveBeenCalledWith([
@@ -606,7 +606,7 @@ describe('knowledge-retrieval path', () => {
 
       await user.click(screen.getAllByRole('button', { name: /contains/i })[0]!)
       await user.click(screen.getByText('workflow.nodes.ifElse.comparisonOperator.is'))
-      await user.click(screen.getByText(/March 09 2024/).nextElementSibling as Element)
+      await user.click(screen.getByRole('button', { name: 'common.operation.clear' }))
       fireEvent.change(screen.getByDisplayValue('agent'), { target: { value: 'updated-agent' } })
       fireEvent.click(container.querySelector('.ml-1.mt-1') as Element)
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index 85d480a561..df30932137 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -4,6 +4,7 @@ import type { DataSet } from '@/models/datasets'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
 
 type Props = {
@@ -15,6 +16,7 @@ const AddDataset: FC<Props> = ({
   selectedIds,
   onChange,
 }) => {
+  const { t } = useTranslation()
   const [isShowModal, {
     setTrue: showModal,
     setFalse: hideModal,
@@ -28,9 +30,9 @@ const AddDataset: FC<Props> = ({
     <div>
       <button
         type="button"
-        className="cursor-pointer rounded-md p-1 outline-hidden select-none hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+        aria-label={`${t('operation.add', { ns: 'common' })} ${t('nodes.knowledgeRetrieval.knowledge', { ns: 'workflow' })}`}
+        className="cursor-pointer rounded-md border-none bg-transparent p-1 outline-hidden select-none hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
         onClick={showModal}
-        data-testid="add-button"
       >
         <span aria-hidden="true" className="i-ri-add-line h-4 w-4 text-text-tertiary" />
       </button>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index 8182a5ab87..c8a0824565 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -94,7 +94,6 @@ const DatasetItem: FC<Props> = ({
             editable && (
               <ActionButton
                 aria-label={t('operation.edit', { ns: 'common' })}
-                data-testid="dataset-item-edit-button"
                 onClick={(e) => {
                   e.stopPropagation()
                   showSettingsModal()
@@ -106,7 +105,6 @@ const DatasetItem: FC<Props> = ({
           }
           <ActionButton
             aria-label={t('operation.remove', { ns: 'common' })}
-            data-testid="dataset-item-remove-button"
             onClick={handleRemove}
             state={isDeleteHovered ? ActionButtonState.Destructive : ActionButtonState.Default}
             onMouseEnter={() => setIsDeleteHovered(true)}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index fe4c086cb4..639ef164e4 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -31,41 +31,46 @@ const ConditionDate = ({
   const renderTrigger = useCallback(({
     handleClickTrigger,
   }: TriggerProps) => {
+    const hasValue = Boolean(value)
+    const triggerText = value
+      ? dayjs(value * 1000).tz(timezone).format('MMMM DD YYYY HH:mm A')
+      : t('nodes.knowledgeRetrieval.metadata.panel.datePlaceholder', { ns: 'workflow' })
+
     return (
-      <div className="group flex items-center" onClick={handleClickTrigger}>
-        <div
+      <div className="group flex items-center">
+        <button
+          type="button"
           className={cn(
-            'mr-0.5 flex h-6 grow cursor-pointer items-center px-1 system-sm-regular',
-            value ? 'text-text-secondary' : 'text-text-tertiary',
+            'mr-0.5 flex h-6 grow cursor-pointer items-center border-none bg-transparent px-1 py-0 text-left system-sm-regular focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+            hasValue ? 'text-text-secondary' : 'text-text-tertiary',
           )}
+          onClick={handleClickTrigger}
         >
-          {
-            value
-              ? dayjs(value * 1000).tz(timezone).format('MMMM DD YYYY HH:mm A')
-              : t('nodes.knowledgeRetrieval.metadata.panel.datePlaceholder', { ns: 'workflow' })
-          }
-        </div>
-        {
-          !!value && (
-            <RiCloseCircleFill
-              className={cn(
-                'hidden h-4 w-4 shrink-0 cursor-pointer group-hover:block hover:text-components-input-text-filled',
-                value && 'text-text-quaternary',
-              )}
-              onClick={(e) => {
-                e.stopPropagation()
-                handleDateChange()
-              }}
-            />
-          )
-        }
-        <RiCalendarLine
-          className={cn(
-            'block h-4 w-4 shrink-0',
-            value ? 'text-text-quaternary' : 'text-text-tertiary',
-            value && 'group-hover:hidden',
-          )}
-        />
+          <span className="grow">{triggerText}</span>
+          <RiCalendarLine
+            className={cn(
+              'block h-4 w-4 shrink-0',
+              hasValue ? 'text-text-quaternary' : 'text-text-tertiary',
+              hasValue && 'group-hover:hidden',
+            )}
+            aria-hidden="true"
+          />
+        </button>
+        {hasValue
+          ? (
+              <button
+                type="button"
+                aria-label={t('operation.clear', { ns: 'common' })}
+                className="hidden h-4 w-4 shrink-0 cursor-pointer border-none bg-transparent p-0 text-text-quaternary group-hover:block hover:text-components-input-text-filled focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleDateChange()
+                }}
+              >
+                <RiCloseCircleFill className="h-4 w-4" aria-hidden="true" />
+              </button>
+            )
+          : null}
       </div>
     )
   }, [value, handleDateChange, timezone, t])
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index da8c89f755..d521a0b861 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -99,9 +99,14 @@ const JsonImporter: FC<JsonImporterProps> = ({
         <div className="flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
           {/* Title */}
           <div className="relative px-3 pt-3.5 pb-1">
-            <div className="absolute right-2.5 bottom-0 flex h-8 w-8 items-center justify-center" onClick={onClose}>
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              aria-label={t('operation.close', { ns: 'common' })}
+              className="absolute right-2.5 bottom-0 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+              onClick={onClose}
+            >
+              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            </button>
             <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
               {t('nodes.llm.jsonSchema.import', { ns: 'workflow' })}
             </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index 2023d093a7..ddb1ac2eb3 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -68,9 +68,14 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
           </div>
         ) : (
           <>
-            <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              aria-label={t('operation.close', { ns: 'common' })}
+              className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+              onClick={onClose}
+            >
+              <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+            </button>
             {/* Title */}
             <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
               <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 42b57bc40b..76afba2abe 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
@@ -44,9 +44,14 @@ const PromptEditor: FC<PromptEditorProps> = ({
 
   return (
     <div className="relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
-      <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-      </div>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center border-none bg-transparent p-0"
+        onClick={onClose}
+      >
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+      </button>
       {/* Title */}
       <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
         <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 922a18e46e..ba103736d4 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -174,9 +174,14 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
             operations={
               !readOnly
                 ? (
-                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
-                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                    </div>
+                    <button
+                      type="button"
+                      aria-label={`${t('operation.add', { ns: 'common' })} ${t('nodes.templateTransform.inputVars', { ns: 'workflow' })}`}
+                      className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                      onClick={handleAddEmptyVariable}
+                    >
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    </button>
                   )
                 : undefined
             }
diff --git a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
index 2c5de93964..a818b8601b 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/__tests__/integration.spec.tsx
@@ -604,7 +604,7 @@ describe('parameter-extractor path', () => {
         />,
       )
 
-      expect(screen.getByTestId('add-button')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'workflow.nodes.parameterExtractor.addExtractParameter' })).toBeInTheDocument()
     })
 
     it('should reject invalid names and reset add modal fields after canceling', async () => {
@@ -619,7 +619,7 @@ describe('parameter-extractor path', () => {
         />,
       )
 
-      await user.click(screen.getByTestId('add-button'))
+      await user.click(screen.getByRole('button', { name: 'workflow.nodes.parameterExtractor.addExtractParameter' }))
 
       const nameInput = screen.getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.namePlaceholder')
       const descriptionInput = screen.getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.descriptionPlaceholder')
@@ -635,7 +635,7 @@ describe('parameter-extractor path', () => {
       expect(onCancel).toHaveBeenCalledTimes(1)
       expect(screen.queryByTestId('base-modal')).not.toBeInTheDocument()
 
-      await user.click(screen.getByTestId('add-button'))
+      await user.click(screen.getByRole('button', { name: 'workflow.nodes.parameterExtractor.addExtractParameter' }))
       expect(screen.getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.namePlaceholder')).toHaveValue('')
       expect(screen.getByPlaceholderText('workflow.nodes.parameterExtractor.addExtractParameterContent.descriptionPlaceholder')).toHaveValue('')
     })
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
index c73b990b68..34d788be50 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/__tests__/update.spec.tsx
@@ -41,7 +41,7 @@ describe('parameter-extractor/extract-parameter/update', () => {
 
     const existingDialogs = screen.queryAllByRole('dialog').length
 
-    fireEvent.click(screen.getByTestId('add-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.nodes.parameterExtractor.addExtractParameter' }))
     const dialogs = await waitFor(() => {
       const nextDialogs = screen.getAllByRole('dialog')
       expect(nextDialogs.length).toBeGreaterThan(existingDialogs)
@@ -88,7 +88,7 @@ describe('parameter-extractor/extract-parameter/update', () => {
 
     const existingDialogs = screen.queryAllByRole('dialog').length
 
-    await user.click(screen.getByTestId('add-button'))
+    await user.click(screen.getByRole('button', { name: 'workflow.nodes.parameterExtractor.addExtractParameter' }))
     const dialogs = await waitFor(() => {
       const nextDialogs = screen.getAllByRole('dialog')
       expect(nextDialogs.length).toBeGreaterThan(existingDialogs)
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 122ee16941..895f240176 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -119,9 +119,14 @@ const AddExtractParameter: FC<Props> = ({
   return (
     <div>
       {isAdd && (
-        <div className="mx-1 cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddModal} data-testid="add-button">
-          <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          aria-label={t(`${i18nPrefix}.addExtractParameter`, { ns: 'workflow' })}
+          className="mx-1 cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={showAddModal}
+        >
+          <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
       )}
       {isShowModal && (
         <Dialog
diff --git a/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-list.spec.tsx b/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-list.spec.tsx
index 8a7542ab89..0ce9af524f 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-list.spec.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/__tests__/class-list.spec.tsx
@@ -79,10 +79,10 @@ describe('question-classifier/class-list', () => {
     await user.click(screen.getAllByText('remove-item')[0]!)
     expect(handleEdgeDeleteByDeleteBranch).toHaveBeenCalledWith('node-1', 'topic-1')
 
-    await user.click(screen.getByText('workflow.nodes.questionClassifiers.class'))
+    await user.click(screen.getByRole('button', { name: /workflow\.nodes\.questionClassifiers\.class/ }))
     expect(screen.queryByText('workflow.nodes.questionClassifiers.addClass')).not.toBeInTheDocument()
 
-    await user.click(screen.getByText('workflow.nodes.questionClassifiers.class'))
+    await user.click(screen.getByRole('button', { name: /workflow\.nodes\.questionClassifiers\.class/ }))
     await user.click(screen.getByText('workflow.nodes.questionClassifiers.addClass'))
     expect(onChange).toHaveBeenCalledWith(expect.arrayContaining([
       expect.objectContaining({ name: '' }),
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 1a80266de5..cf92439cd5 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -117,8 +117,12 @@ const ClassList: FC<Props> = ({
 
   return (
     <>
-      <div className="mb-2 flex items-center justify-between" onClick={handleCollapse}>
-        <div className="flex cursor-pointer items-center text-xs font-semibold text-text-secondary uppercase">
+      <div className="mb-2 flex items-center justify-between">
+        <button
+          type="button"
+          className="flex cursor-pointer items-center border-none bg-transparent p-0 text-left text-xs font-semibold text-text-secondary uppercase focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={handleCollapse}
+        >
           {t(`${i18nPrefix}.class`, { ns: 'workflow' })}
           {' '}
           <span className="text-text-destructive">*</span>
@@ -128,9 +132,10 @@ const ClassList: FC<Props> = ({
                 'h-4 w-4 text-text-quaternary transition-transform duration-200',
                 collapsed && '-rotate-90',
               )}
+              aria-hidden="true"
             />
           )}
-        </div>
+        </button>
       </div>
       {shouldShowRenameHint && (
         <div className="mb-2 rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-xs text-text-tertiary">
diff --git a/web/app/components/workflow/nodes/start/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/start/__tests__/panel.spec.tsx
index 1d9e1bc7bb..7b7f7a096d 100644
--- a/web/app/components/workflow/nodes/start/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/start/__tests__/panel.spec.tsx
@@ -93,7 +93,7 @@ describe('StartPanel', () => {
     expect(screen.getByText('userinput.files')).toBeInTheDocument()
     expect(screen.queryByText('LEGACY')).not.toBeInTheDocument()
 
-    fireEvent.click(screen.getByTestId('add-button'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.start.inputField' }))
 
     expect(showAddVarModal).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/workflow/nodes/start/components/__tests__/var-item.spec.tsx b/web/app/components/workflow/nodes/start/components/__tests__/var-item.spec.tsx
new file mode 100644
index 0000000000..720d0f1bc0
--- /dev/null
+++ b/web/app/components/workflow/nodes/start/components/__tests__/var-item.spec.tsx
@@ -0,0 +1,38 @@
+import type { InputVar } from '@/app/components/workflow/types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InputVarType } from '@/app/components/workflow/types'
+import VarItem from '../var-item'
+
+vi.mock('@/app/components/app/configuration/config-var/config-modal', () => ({
+  __esModule: true,
+  default: ({ isShow }: { isShow: boolean }) => isShow ? <div role="dialog">edit-variable</div> : null,
+}))
+
+const createPayload = (overrides: Partial<InputVar> = {}): InputVar => ({
+  label: 'Query',
+  variable: 'query',
+  type: InputVarType.textInput,
+  required: false,
+  ...overrides,
+})
+
+describe('StartVarItem', () => {
+  it('shows named edit and remove actions on hover', () => {
+    const handleRemove = vi.fn()
+    const { container } = render(
+      <VarItem
+        readonly={false}
+        payload={createPayload()}
+        onRemove={handleRemove}
+      />,
+    )
+
+    fireEvent.mouseEnter(container.firstElementChild!)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.edit' }))
+    expect(screen.getByRole('dialog')).toHaveTextContent('edit-variable')
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
+    expect(handleRemove).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index 8cb7f8acf6..ce03fb55f6 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -86,12 +86,22 @@ const VarItem: FC<Props> = ({
                 )
               : (!readonly && (
                   <>
-                    <div onClick={showEditVarModal} className="mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover">
-                      <Edit03 className="h-4 w-4 text-text-tertiary" />
-                    </div>
-                    <div onClick={onRemove} className="group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover">
-                      <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" />
-                    </div>
+                    <button
+                      type="button"
+                      aria-label={t('operation.edit', { ns: 'common' })}
+                      className="mr-1 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                      onClick={showEditVarModal}
+                    >
+                      <Edit03 className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                    </button>
+                    <button
+                      type="button"
+                      aria-label={t('operation.remove', { ns: 'common' })}
+                      className="group cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-destructive-hover focus-visible:ring-1 focus-visible:ring-state-destructive-border focus-visible:outline-hidden"
+                      onClick={onRemove}
+                    >
+                      <RiDeleteBinLine className="h-4 w-4 text-text-tertiary group-hover:text-text-destructive" aria-hidden="true" />
+                    </button>
                   </>
                 ))}
           </>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 5fc8f224fe..c723ee8931 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -47,9 +47,14 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
           operations={
             !readOnly
               ? (
-                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddVarModal} data-testid="add-button">
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                  </div>
+                  <button
+                    type="button"
+                    aria-label={`${t('operation.add', { ns: 'common' })} ${t(`${i18nPrefix}.inputField`, { ns: 'workflow' })}`}
+                    className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                    onClick={showAddVarModal}
+                  >
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                  </button>
                 )
               : undefined
           }
diff --git a/web/app/components/workflow/nodes/template-transform/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/template-transform/__tests__/integration.spec.tsx
index 6e5b00ee20..c956caf305 100644
--- a/web/app/components/workflow/nodes/template-transform/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/template-transform/__tests__/integration.spec.tsx
@@ -178,7 +178,7 @@ describe('template-transform path', () => {
       />,
     )
 
-    await user.click(screen.getByTestId('add-button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.templateTransform.inputVars' }))
     await user.click(screen.getByRole('button', { name: 'change-var-list' }))
     await user.click(screen.getByRole('button', { name: 'rename-var' }))
     await user.click(screen.getByRole('button', { name: 'add-var' }))
@@ -219,6 +219,6 @@ describe('template-transform path', () => {
       />,
     )
 
-    expect(screen.queryByTestId('add-button')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.add workflow.nodes.templateTransform.inputVars' })).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/nodes/template-transform/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/template-transform/__tests__/panel.spec.tsx
index ed0db7647b..3a51948082 100644
--- a/web/app/components/workflow/nodes/template-transform/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/template-transform/__tests__/panel.spec.tsx
@@ -144,7 +144,7 @@ describe('template-transform/panel', () => {
       />,
     )
 
-    await user.click(screen.getByTestId('add-button'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.add workflow.nodes.templateTransform.inputVars' }))
     await user.click(screen.getByRole('button', { name: 'change-var-list' }))
     await user.click(screen.getByRole('button', { name: 'rename-var' }))
     await user.click(screen.getByRole('button', { name: 'add-var' }))
@@ -185,6 +185,6 @@ describe('template-transform/panel', () => {
       />,
     )
 
-    expect(screen.queryByTestId('add-button')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.operation.add workflow.nodes.templateTransform.inputVars' })).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 4a6515da7a..4993d232d1 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -43,9 +43,14 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
           operations={
             !readOnly
               ? (
-                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
-                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-                  </div>
+                  <button
+                    type="button"
+                    aria-label={`${t('operation.add', { ns: 'common' })} ${t(`${i18nPrefix}.inputVars`, { ns: 'workflow' })}`}
+                    className="cursor-pointer rounded-md border-none bg-transparent p-1 select-none hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+                    onClick={handleAddEmptyVariable}
+                  >
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+                  </button>
                 )
               : undefined
           }
diff --git a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
index 9b5f89ebd0..63ee0ceb37 100644
--- a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
+++ b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
@@ -153,7 +153,7 @@ describe('WorkflowPreview', () => {
 
   it('should keep the input tab active, switch to result after running, and close the preview panel', async () => {
     const user = userEvent.setup()
-    const { container } = renderWorkflowComponent(
+    renderWorkflowComponent(
       <WorkflowPreview />,
       {
         initialStoreState: {
@@ -169,7 +169,7 @@ describe('WorkflowPreview', () => {
     await user.click(screen.getByRole('button', { name: 'run-inputs' }))
     expect(screen.getByTestId('result-text')).toBeInTheDocument()
 
-    await user.click(container.querySelector('.flex.items-center.justify-between .cursor-pointer.p-1') as HTMLElement)
+    await user.click(screen.getByRole('button', { name: /operation\.close/ }))
     expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalledTimes(1)
   })
 
diff --git a/web/app/components/workflow/panel/debug-and-preview/__tests__/conversation-variable-modal.spec.tsx b/web/app/components/workflow/panel/debug-and-preview/__tests__/conversation-variable-modal.spec.tsx
index e36c17ca96..fa050b9bc5 100644
--- a/web/app/components/workflow/panel/debug-and-preview/__tests__/conversation-variable-modal.spec.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/__tests__/conversation-variable-modal.spec.tsx
@@ -118,8 +118,7 @@ describe('ConversationVariableModal', () => {
     await user.click(screen.getByText('summary'))
     expect(screen.getByText('latest text')).toBeInTheDocument()
 
-    const closeTrigger = document.querySelector('.absolute.right-4.top-4.cursor-pointer') as HTMLElement
-    await user.click(closeTrigger)
+    await user.click(screen.getByRole('button', { name: /operation\.close/ }))
 
     expect(onHide).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 689b2fe0b3..b7f720b370 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -78,19 +78,29 @@ const ConversationVariableModal = ({
     <Dialog open>
       <DialogContent className={cn('max-h-none w-full overflow-hidden! border-none text-left align-middle', cn('h-[640px] w-[920px] max-w-[920px] p-0'))}>
 
-        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
-          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="absolute top-4 right-4 cursor-pointer border-none bg-transparent p-2 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={onHide}
+        >
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
         <div className="flex h-full w-full">
           {/* LEFT */}
           <div className="flex h-full w-[224px] shrink-0 flex-col border-r border-divider-burn bg-background-sidenav-bg">
             <div className="shrink-0 pt-5 pr-4 pb-3 pl-5 system-xl-semibold text-text-primary">{t('chatVariable.panelTitle', { ns: 'workflow' })}</div>
             <div className="grow overflow-y-auto px-3 py-2">
               {varList.map(chatVar => (
-                <div key={chatVar.id} className={cn('group mb-0.5 flex cursor-pointer items-center rounded-lg p-2 hover:bg-state-base-hover', currentVar.id === chatVar.id && 'bg-state-base-hover')} onClick={() => setCurrentVar(chatVar)}>
-                  <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} />
+                <button
+                  key={chatVar.id}
+                  type="button"
+                  className={cn('group mb-0.5 flex w-full cursor-pointer items-center rounded-lg border-none bg-transparent p-2 text-left hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden', currentVar.id === chatVar.id && 'bg-state-base-hover')}
+                  onClick={() => setCurrentVar(chatVar)}
+                >
+                  <BubbleX className={cn('mr-1 h-4 w-4 shrink-0 text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')} aria-hidden="true" />
                   <div title={chatVar.name} className={cn('truncate system-sm-medium text-text-tertiary group-hover:text-util-colors-teal-teal-700', currentVar.id === chatVar.id && 'text-util-colors-teal-teal-700')}>{chatVar.name}</div>
-                </div>
+                </button>
               ))}
             </div>
           </div>
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 89ae09c374..7bf858fdd3 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -116,9 +116,14 @@ const WorkflowPreview = () => {
       />
       <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
         {`Test Run${formatWorkflowRunIdentifier(workflowRunningData?.result.finished_at, workflowRunningData?.result.status)}`}
-        <div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
-        </div>
+        <button
+          type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
+          className="cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={() => handleCancelDebugAndPreviewPanel()}
+        >
+          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        </button>
       </div>
       <div className="relative flex grow flex-col">
         <div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
diff --git a/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx b/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx
index fd9ce7a29c..2f7658f984 100644
--- a/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx
+++ b/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx
@@ -75,7 +75,7 @@ describe('LoopResultPanel', () => {
     const contentPanels = container.querySelectorAll('.transition-all.duration-200')
     expect(contentPanels[0]).toHaveClass('max-h-0')
 
-    fireEvent.click(screen.getByText('workflow.singleRun.loop 1'))
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.singleRun.loop 1' }))
     expect(contentPanels[0]).not.toHaveClass('max-h-0')
     expect(screen.getAllByTestId('tracing-panel')[0]).toHaveTextContent('1')
     expect(mockTracingPanel).toHaveBeenCalledWith({
@@ -83,11 +83,8 @@ describe('LoopResultPanel', () => {
       className: 'bg-background-section-burn',
     })
 
-    fireEvent.click(screen.getByText('workflow.singleRun.back'))
-    const closeTrigger = container.querySelector('.ml-2.shrink-0.cursor-pointer.p-1')
-    if (!closeTrigger)
-      throw new Error('Expected close trigger to be rendered')
-    fireEvent.click(closeTrigger)
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.singleRun.back' }))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(onBack).toHaveBeenCalledTimes(1)
     expect(onHide).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/workflow/run/__tests__/result-text.spec.tsx b/web/app/components/workflow/run/__tests__/result-text.spec.tsx
index 9b0827c2f0..b9ba43deda 100644
--- a/web/app/components/workflow/run/__tests__/result-text.spec.tsx
+++ b/web/app/components/workflow/run/__tests__/result-text.spec.tsx
@@ -43,7 +43,7 @@ describe('ResultText', () => {
 
     expect(screen.getByText('runLog.resultEmpty.title')).toBeInTheDocument()
 
-    fireEvent.click(screen.getByText('runLog.resultEmpty.link'))
+    fireEvent.click(screen.getByRole('button', { name: 'runLog.resultEmpty.link' }))
 
     expect(onClick).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index bd391266c3..a2867fb310 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -45,24 +45,34 @@ const LoopResultPanel: FC<Props> = ({
           <div className="truncate system-xl-semibold text-text-primary">
             {t(`${i18nPrefix}.testRunLoop`, { ns: 'workflow' }) }
           </div>
-          <div className="ml-2 shrink-0 cursor-pointer p-1" onClick={onHide}>
-            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-          </div>
+          <button
+            type="button"
+            className="ml-2 shrink-0 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+            aria-label={t('operation.close', { ns: 'common' })}
+            onClick={onHide}
+          >
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+          </button>
         </div>
-        <div className="flex cursor-pointer items-center space-x-1 py-2 text-text-accent-secondary" onClick={onBack}>
-          <ArrowNarrowLeft className="h-4 w-4" />
+        <button
+          type="button"
+          className="flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-2 text-left text-text-accent-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+          onClick={onBack}
+        >
+          <ArrowNarrowLeft className="h-4 w-4" aria-hidden="true" />
           <div className="system-sm-medium">{t(`${i18nPrefix}.back`, { ns: 'workflow' })}</div>
-        </div>
+        </button>
       </div>
       {/* List */}
       <div className={cn(!noWrap ? 'grow overflow-auto' : 'max-h-full', 'bg-components-panel-bg p-2')}>
         {list.map((loop, index) => (
           <div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
-            <div
+            <button
+              type="button"
               className={cn(
                 'flex w-full cursor-pointer items-center justify-between px-3',
                 expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
-                'rounded-xl text-left',
+                'rounded-xl border-none bg-transparent text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
               )}
               onClick={() => toggleLoop(index)}
             >
@@ -75,13 +85,15 @@ const LoopResultPanel: FC<Props> = ({
                   {' '}
                   {index + 1}
                 </span>
-                <RiArrowRightSLine className={cn(
-                  'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
-                  expandedLoops[index] && 'rotate-90',
-                )}
+                <RiArrowRightSLine
+                  className={cn(
+                    'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
+                    expandedLoops[index] && 'rotate-90',
+                  )}
+                  aria-hidden="true"
                 />
               </div>
-            </div>
+            </button>
             {expandedLoops[index] && (
               <div
                 className="h-px grow bg-divider-subtle"
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index fcbbf8043d..f76c99fe9c 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -45,7 +45,13 @@ const ResultText: FC<ResultTextProps> = ({
           <div className="mr-2">{t('resultEmpty.title', { ns: 'runLog' })}</div>
           <div>
             {t('resultEmpty.tipLeft', { ns: 'runLog' })}
-            <span onClick={onClick} className="cursor-pointer text-primary-600">{t('resultEmpty.link', { ns: 'runLog' })}</span>
+            <button
+              type="button"
+              onClick={onClick}
+              className="inline cursor-pointer border-none bg-transparent p-0 text-left text-primary-600"
+            >
+              {t('resultEmpty.link', { ns: 'runLog' })}
+            </button>
             {t('resultEmpty.tipRight', { ns: 'runLog' })}
           </div>
         </div>
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 56a1afbba6..a2d7117022 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -383,7 +383,6 @@ const SelectionContextmenu = () => {
         <ContextMenuGroup>
           <ContextMenuItem
             className="justify-between px-3 text-text-secondary"
-            data-testid="selection-contextmenu-item-copy"
             onClick={handleCopyNodes}
           >
             <span>{t('common.copy', { defaultValue: 'common.copy', ns: 'workflow' })}</span>
@@ -391,7 +390,6 @@ const SelectionContextmenu = () => {
           </ContextMenuItem>
           <ContextMenuItem
             className="justify-between px-3 text-text-secondary"
-            data-testid="selection-contextmenu-item-duplicate"
             onClick={handleDuplicateNodes}
           >
             <span>{t('common.duplicate', { defaultValue: 'common.duplicate', ns: 'workflow' })}</span>
@@ -402,7 +400,6 @@ const SelectionContextmenu = () => {
         <ContextMenuGroup>
           <ContextMenuItem
             className="justify-between px-3 text-text-secondary data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive"
-            data-testid="selection-contextmenu-item-delete"
             onClick={handleDeleteNodes}
           >
             <span>{t('operation.delete', { defaultValue: 'operation.delete', ns: 'common' })}</span>
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index c5cb9cc62d..de5e92a006 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -210,9 +210,14 @@ const UpdateDSLModal = ({
 
           <div className="mb-3 flex items-center justify-between">
             <div className="title-2xl-semi-bold text-text-primary">{t('importApp', { ns: 'app' })}</div>
-            <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
-              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
-            </div>
+            <button
+              type="button"
+              className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              aria-label={t('operation.close', { ns: 'common' })}
+              onClick={onCancel}
+            >
+              <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" aria-hidden="true" />
+            </button>
           </div>
           <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
             <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
diff --git a/web/app/components/workflow/variable-inspect/__tests__/group.spec.tsx b/web/app/components/workflow/variable-inspect/__tests__/group.spec.tsx
index f87bc3b896..c445670717 100644
--- a/web/app/components/workflow/variable-inspect/__tests__/group.spec.tsx
+++ b/web/app/components/workflow/variable-inspect/__tests__/group.spec.tsx
@@ -69,7 +69,7 @@ describe('VariableInspect Group', () => {
       />,
     )
 
-    fireEvent.click(screen.getByText('API_KEY'))
+    fireEvent.click(screen.getByRole('button', { name: /API_KEY/ }))
 
     expect(screen.getByText('workflow.debug.variableInspect.envNode'))!.toBeInTheDocument()
     expect(handleSelect).toHaveBeenCalledWith({
@@ -100,7 +100,7 @@ describe('VariableInspect Group', () => {
     expect(screen.getByText('visible_var'))!.toBeInTheDocument()
     expect(screen.queryByText('hidden_var')).not.toBeInTheDocument()
 
-    fireEvent.click(screen.getByText('Code'))
+    fireEvent.click(screen.getByRole('button', { name: 'Code' }))
 
     expect(screen.queryByText('visible_var')).not.toBeInTheDocument()
   })
@@ -120,10 +120,8 @@ describe('VariableInspect Group', () => {
       />,
     )
 
-    const actionButtons = screen.getAllByRole('button')
-
-    fireEvent.click(actionButtons[0]!)
-    fireEvent.click(actionButtons[1]!)
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.debug.variableInspect.view' }))
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.debug.variableInspect.clearNode' }))
 
     expect(handleView).toHaveBeenCalledTimes(1)
     expect(handleClear).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index ab3c327ce0..bef4fecb63 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -45,6 +45,11 @@ const Group = ({
   const isEnv = varType === VarInInspectType.environment
   const isChatVar = varType === VarInInspectType.conversation
   const isSystem = varType === VarInInspectType.system
+  const groupTitle = nodeData?.title
+    || (isEnv && t('debug.variableInspect.envNode', { ns: 'workflow' }))
+    || (isChatVar && t('debug.variableInspect.chatNode', { ns: 'workflow' }))
+    || (isSystem && t('debug.variableInspect.systemNode', { ns: 'workflow' }))
+    || ''
 
   const visibleVarList = isEnv ? varList : varList.filter(v => v.visible)
 
@@ -100,15 +105,20 @@ const Group = ({
     <div className="p-0.5">
       {/* node item */}
       <div className="group flex h-6 items-center gap-0.5">
-        <div className="h-3 w-3 shrink-0">
-          {nodeData?.isSingRunRunning && (
-            <RiLoader2Line className="h-3 w-3 animate-spin text-text-accent" />
-          )}
-          {(!nodeData || !nodeData.isSingRunRunning) && visibleVarList.length > 0 && (
-            <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
-          )}
-        </div>
-        <div className="flex grow cursor-pointer items-center gap-1" onClick={() => setIsCollapsed(!isCollapsed)}>
+        <button
+          type="button"
+          aria-expanded={visibleVarList.length > 0 ? !isCollapsed : undefined}
+          className="flex min-w-0 grow cursor-pointer items-center gap-0.5 rounded-sm border-none bg-transparent p-0 text-left outline-hidden focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          <div className="h-3 w-3 shrink-0">
+            {nodeData?.isSingRunRunning && (
+              <RiLoader2Line className="h-3 w-3 animate-spin text-text-accent" aria-hidden />
+            )}
+            {(!nodeData || !nodeData.isSingRunRunning) && visibleVarList.length > 0 && (
+              <RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} aria-hidden />
+            )}
+          </div>
           {nodeData && (
             <>
               <BlockIcon
@@ -122,19 +132,17 @@ const Group = ({
           )}
           {!nodeData && (
             <div className="truncate system-xs-medium-uppercase text-text-tertiary">
-              {isEnv && t('debug.variableInspect.envNode', { ns: 'workflow' })}
-              {isChatVar && t('debug.variableInspect.chatNode', { ns: 'workflow' })}
-              {isSystem && t('debug.variableInspect.systemNode', { ns: 'workflow' })}
+              {groupTitle}
             </div>
           )}
-        </div>
+        </button>
         {nodeData && !nodeData.isSingRunRunning && (
           <div className="hidden shrink-0 items-center group-hover:flex">
             <Tooltip>
               <TooltipTrigger
                 render={(
-                  <ActionButton onClick={handleView}>
-                    <RiFileList3Line className="h-4 w-4" />
+                  <ActionButton aria-label={t('debug.variableInspect.view', { ns: 'workflow' })} onClick={handleView}>
+                    <RiFileList3Line className="h-4 w-4" aria-hidden />
                   </ActionButton>
                 )}
               />
@@ -145,8 +153,8 @@ const Group = ({
             <Tooltip>
               <TooltipTrigger
                 render={(
-                  <ActionButton onClick={handleClear}>
-                    <RiDeleteBinLine className="h-4 w-4" />
+                  <ActionButton aria-label={t('debug.variableInspect.clearNode', { ns: 'workflow' })} onClick={handleClear}>
+                    <RiDeleteBinLine className="h-4 w-4" aria-hidden />
                   </ActionButton>
                 )}
               />
@@ -161,11 +169,14 @@ const Group = ({
       {!isCollapsed && !nodeData?.isSingRunRunning && (
         <div className="px-0.5">
           {visibleVarList.length > 0 && visibleVarList.map(varItem => (
-            <div
+            <button
+              type="button"
               key={varItem.id}
               className={cn(
-                'relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover',
-                varItem.id === currentVar?.var?.id && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
+                'relative flex w-full cursor-pointer items-center gap-1 rounded-md border-none px-3 py-1 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover',
+                varItem.id === currentVar?.var?.id
+                  ? 'bg-state-base-hover-alt hover:bg-state-base-hover-alt'
+                  : 'bg-transparent',
               )}
               onClick={() => handleSelectVar(varItem, varType)}
             >
@@ -176,7 +187,7 @@ const Group = ({
               />
               <div className="grow truncate system-sm-medium text-text-secondary">{varItem.name}</div>
               <div className="shrink-0 system-xs-regular text-text-tertiary">{varItem.value_type}</div>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index 5e07bf0fb1..ca59527508 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -49,7 +49,7 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
       }}
     >
       <DialogContent className="w-full max-w-[600px] overflow-hidden! border-none text-left align-middle">
-        <DialogCloseButton data-testid="modal-close-button" />
+        <DialogCloseButton />
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {expired ? t(`${i18nPrefix}.expired.title`, { ns: 'education' }) : t(`${i18nPrefix}.isAboutToExpire.title`, { ns: 'education', date: formatTime(expireAt, t(`${i18nPrefix}.dateFormat`, { ns: 'education' }) as string), interpolation: { escapeValue: false } })}
         </DialogTitle>
diff --git a/web/docs/test.md b/web/docs/test.md
index 402a24d30f..aab8b81eef 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -13,10 +13,10 @@ Run these commands from `web/`. From the repository root, prefix them with `pnpm
 pnpm test
 
 # Watch mode
-pnpm test:watch
+pnpm test --watch
 
 # Generate coverage report
-pnpm test:coverage
+pnpm test --coverage
 
 # Run specific file
 pnpm test path/to/file.spec.tsx
@@ -41,6 +41,8 @@ pnpm test path/to/file.spec.tsx
 
 - **Single behavior per test**: Each test verifies one user-observable behavior.
 - **Black-box first**: Assert external behavior and observable outputs, avoid internal implementation details. Prefer role-based queries (`getByRole`) and pattern matching (`/text/i`) over hardcoded string assertions.
+- **Accessibility selectors first**: Prefer `getByRole` with accessible `name`, then `getByLabelText`, `getByPlaceholderText`, `getByText`, and scoped `within(...)` queries. Avoid `getByTestId` unless the target has no user-observable semantics, such as a mocked non-visual integration boundary, virtualized/canvas output, or a third-party widget shim.
+- **Fix markup before selectors**: If a test cannot find a control by role, name, label, landmark, or dialog scope, treat that as a component accessibility problem first. Add semantic HTML, an accessible name, or an associated label instead of adding `data-testid`.
 - **Semantic naming**: Use `should <behavior> when <condition>` and group related cases with `describe(<subject or scenario>)`.
 - **AAA / Given–When–Then**: Separate Arrange, Act, and Assert clearly with code blocks or comments.
 - **Minimal but sufficient assertions**: Keep only the expectations that express the essence of the behavior.
@@ -79,6 +81,16 @@ Use `pnpm analyze-component <path>` to analyze component complexity and adopt di
 - ✅ TypeScript: No `any` types
 - ✅ **Cleanup**: `vi.clearAllMocks()` should be in `beforeEach()`, not `afterEach()`. This ensures mock call history is reset before each test, preventing test pollution when using assertions like `toHaveBeenCalledWith()` or `toHaveBeenCalledTimes()`.
 
+### Test ID Policy
+
+`data-testid` is a last resort because users and assistive technology cannot perceive it. It can hide broken semantics, such as a clickable `div` that should have been a button or an input without a label.
+
+- Prefer `screen.getByRole('button', { name: /save/i })`, `screen.getByRole('textbox', { name: /email/i })`, and scoped queries like `within(screen.getByRole('dialog', { name: /settings/i }))`.
+- Prefer `userEvent` for interactions that should match real user behavior.
+- Remove production `data-testid` attributes when they exist only to support tests and a semantic selector is available.
+- Keep `data-testid` only for justified boundaries that cannot expose stable semantics in the test environment: mocked non-visual children, browser/editor shims such as Monaco, canvas/chart output, or third-party widgets. In those cases, keep assertions focused on the boundary contract rather than internal DOM shape.
+- Do not assert decorative icons by test id. If the icon conveys meaning, give the control an accessible name and assert the control. If the icon is decorative, keep it `aria-hidden`.
+
 **⚠️ Mock components must accurately reflect actual component behavior**, especially conditional rendering based on props or state.
 
 **Rules**:
diff --git a/web/features/tag-management/__tests__/dataset-card-tags.spec.tsx b/web/features/tag-management/__tests__/dataset-card-tags.spec.tsx
index 7c950becc3..7de4325ad2 100644
--- a/web/features/tag-management/__tests__/dataset-card-tags.spec.tsx
+++ b/web/features/tag-management/__tests__/dataset-card-tags.spec.tsx
@@ -8,9 +8,9 @@ vi.mock('@/features/tag-management/components/tag-selector', () => ({
     value: Tag[]
     onOpenTagManagement?: () => void
   }) => (
-    <div data-testid="tag-selector">
-      <div data-testid="tag-values">{value.map(tag => tag.id).join(',')}</div>
-      <div data-testid="selected-count">
+    <div role="group" aria-label="Tag selector mock">
+      <div>{value.map(tag => tag.id).join(',')}</div>
+      <div>
         {value.length}
         {' '}
         tags
@@ -42,29 +42,29 @@ describe('DatasetCardTags', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<DatasetCardTags {...defaultProps} />)
-      expect(screen.getByTestId('tag-selector')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Tag selector mock' })).toBeInTheDocument()
     })
 
     it('should render TagSelector with correct value', () => {
       render(<DatasetCardTags {...defaultProps} />)
-      expect(screen.getByTestId('tag-values')).toHaveTextContent('tag-1,tag-2')
+      expect(screen.getByText('tag-1,tag-2')).toBeInTheDocument()
     })
 
     it('should display selected tags count', () => {
       render(<DatasetCardTags {...defaultProps} />)
-      expect(screen.getByTestId('selected-count')).toHaveTextContent('2 tags')
+      expect(screen.getByText('2 tags')).toBeInTheDocument()
     })
   })
 
   describe('Props', () => {
     it('should pass dataset id to TagSelector', () => {
       render(<DatasetCardTags {...defaultProps} datasetId="custom-dataset-id" />)
-      expect(screen.getByTestId('tag-selector')).toBeInTheDocument()
+      expect(screen.getByRole('group', { name: 'Tag selector mock' })).toBeInTheDocument()
     })
 
     it('should render with empty tags', () => {
       render(<DatasetCardTags {...defaultProps} tags={[]} />)
-      expect(screen.getByTestId('selected-count')).toHaveTextContent('0 tags')
+      expect(screen.getByText('0 tags')).toBeInTheDocument()
     })
   })
 
@@ -119,7 +119,7 @@ describe('DatasetCardTags', () => {
 
     it('should keep TagSelector visible when tags are empty', () => {
       const { container } = render(<DatasetCardTags {...defaultProps} tags={[]} />)
-      const tagSelectorWrapper = screen.getByTestId('tag-selector').parentElement
+      const tagSelectorWrapper = screen.getByRole('group', { name: 'Tag selector mock' }).parentElement
 
       expect(tagSelectorWrapper).toBeInTheDocument()
       expect(tagSelectorWrapper).toHaveClass('w-full')
@@ -129,7 +129,7 @@ describe('DatasetCardTags', () => {
 
     it('should keep TagSelector visible when tags exist', () => {
       const { container } = render(<DatasetCardTags {...defaultProps} />)
-      const tagSelectorWrapper = screen.getByTestId('tag-selector').parentElement
+      const tagSelectorWrapper = screen.getByRole('group', { name: 'Tag selector mock' }).parentElement
 
       expect(tagSelectorWrapper).toBeInTheDocument()
       expect(tagSelectorWrapper).toHaveClass('w-full')
@@ -151,7 +151,7 @@ describe('DatasetCardTags', () => {
         binding_count: 0,
       }))
       render(<DatasetCardTags {...defaultProps} tags={manyTags} />)
-      expect(screen.getByTestId('selected-count')).toHaveTextContent('20 tags')
+      expect(screen.getByText('20 tags')).toBeInTheDocument()
     })
   })
 })
diff --git a/web/features/tag-management/__tests__/tag-filter.spec.tsx b/web/features/tag-management/__tests__/tag-filter.spec.tsx
index 933f55683b..adf109079a 100644
--- a/web/features/tag-management/__tests__/tag-filter.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-filter.spec.tsx
@@ -45,16 +45,15 @@ describe('TagFilter', () => {
       expect(screen.getByText(i18n.placeholder)).toBeInTheDocument()
     })
 
-    it('should render the tag icon', () => {
+    it('should expose the trigger as a named combobox', () => {
       render(<TagFilter {...defaultProps} />)
-      expect(screen.getByTestId('tag-filter-trigger-icon')).toBeInTheDocument()
+      expect(screen.getByRole('combobox', { name: i18n.placeholder })).toBeInTheDocument()
     })
 
-    it('should render the arrow down icon when no tags are selected', () => {
+    it('should keep the placeholder in the trigger when no tags are selected', () => {
       render(<TagFilter {...defaultProps} />)
       expect(screen.getByText(i18n.placeholder)).toBeInTheDocument()
-      expect(screen.getByTestId('tag-filter-trigger-icon')).toBeInTheDocument()
-      expect(screen.getByTestId('tag-filter-arrow-down-icon')).toBeInTheDocument()
+      expect(screen.getByRole('combobox', { name: i18n.placeholder })).toBeInTheDocument()
     })
 
     it('should display the first selected tag name when tags are selected', () => {
@@ -183,9 +182,9 @@ describe('TagFilter', () => {
       const onChange = vi.fn()
       render(<TagFilter {...defaultProps} value={['tag-1', 'tag-2']} onChange={onChange} />)
 
-      const clearButton = screen.getByTestId('tag-filter-clear-button')
+      const clearButton = screen.getByRole('button', { name: i18n.operationClear })
       expect(clearButton).toBeInTheDocument()
-      await user.click(clearButton!)
+      await user.click(clearButton)
 
       expect(onChange).toHaveBeenCalledWith([])
     })
@@ -281,7 +280,7 @@ describe('TagFilter', () => {
       const onChange = vi.fn()
       render(<TagFilter {...defaultProps} value={['tag-1']} onChange={onChange} />)
 
-      const clearButton = screen.getByTestId('tag-filter-clear-button')
+      const clearButton = screen.getByRole('button', { name: i18n.operationClear })
       expect(clearButton).toBeInTheDocument()
 
       await user.click(clearButton)
diff --git a/web/features/tag-management/__tests__/tag-item-editor.spec.tsx b/web/features/tag-management/__tests__/tag-item-editor.spec.tsx
index 39ebd06ae7..0114b677a6 100644
--- a/web/features/tag-management/__tests__/tag-item-editor.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-item-editor.spec.tsx
@@ -79,6 +79,12 @@ const baseTag: Tag = {
   binding_count: 3,
 }
 
+const i18n = {
+  editTag: 'common.operation.edit Frontend',
+  removeTag: 'common.operation.remove Frontend',
+  renameTag: 'common.operation.rename Frontend',
+}
+
 describe('TagItemEditor', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -102,19 +108,19 @@ describe('TagItemEditor', () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      const editButton = screen.getByTestId('tag-item-editor-edit-button')
+      const editButton = screen.getByRole('button', { name: i18n.editTag })
       expect(editButton).toBeInTheDocument()
-      await user.click(editButton as HTMLElement)
+      await user.click(editButton)
 
-      expect(screen.getByRole('textbox')).toHaveValue('Frontend')
+      expect(screen.getByRole('textbox', { name: i18n.renameTag })).toHaveValue('Frontend')
     })
 
     it('should update tag and notify success when submitting a new name', async () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      const editButton = screen.getByTestId('tag-item-editor-edit-button')
-      await user.click(editButton as HTMLElement)
+      const editButton = screen.getByRole('button', { name: i18n.editTag })
+      await user.click(editButton)
 
       const input = screen.getByRole('textbox')
       await user.clear(input)
@@ -135,7 +141,7 @@ describe('TagItemEditor', () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      await user.click(screen.getByTestId('tag-item-editor-edit-button') as HTMLElement)
+      await user.click(screen.getByRole('button', { name: i18n.editTag }))
       await user.keyboard('{Enter}')
 
       expect(tagMocks.updateTag).not.toHaveBeenCalled()
@@ -146,8 +152,8 @@ describe('TagItemEditor', () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      const editButton = screen.getByTestId('tag-item-editor-edit-button')
-      await user.click(editButton as HTMLElement)
+      const editButton = screen.getByRole('button', { name: i18n.editTag })
+      await user.click(editButton)
 
       const input = screen.getByRole('textbox')
       await user.clear(input)
@@ -169,8 +175,8 @@ describe('TagItemEditor', () => {
       vi.mocked(tagMocks.updateTag).mockRejectedValueOnce(new Error('update failed'))
       render(<TagItemEditor tag={baseTag} />)
 
-      const editButton = screen.getByTestId('tag-item-editor-edit-button')
-      await user.click(editButton as HTMLElement)
+      const editButton = screen.getByRole('button', { name: i18n.editTag })
+      await user.click(editButton)
 
       const input = screen.getByRole('textbox')
       await user.clear(input)
@@ -194,9 +200,9 @@ describe('TagItemEditor', () => {
       const removableTag: Tag = { ...baseTag, binding_count: 0 }
       render(<TagItemEditor tag={removableTag} />)
 
-      const removeButton = screen.getByTestId('tag-item-editor-remove-button')
+      const removeButton = screen.getByRole('button', { name: i18n.removeTag })
       expect(removeButton).toBeInTheDocument()
-      await user.click(removeButton as HTMLElement)
+      await user.click(removeButton)
 
       await waitFor(() => {
         expect(tagMocks.deleteTag).toHaveBeenCalledWith('tag-1')
@@ -211,8 +217,8 @@ describe('TagItemEditor', () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      const removeButton = screen.getByTestId('tag-item-editor-remove-button')
-      await user.click(removeButton as HTMLElement)
+      const removeButton = screen.getByRole('button', { name: i18n.removeTag })
+      await user.click(removeButton)
 
       expect(screen.getByText('common.tag.delete "Frontend"')).toBeInTheDocument()
       await user.click(screen.getByText('common.operation.confirm'))
@@ -229,8 +235,8 @@ describe('TagItemEditor', () => {
       const user = userEvent.setup()
       render(<TagItemEditor tag={baseTag} />)
 
-      const removeButton = screen.getByTestId('tag-item-editor-remove-button')
-      await user.click(removeButton as HTMLElement)
+      const removeButton = screen.getByRole('button', { name: i18n.removeTag })
+      await user.click(removeButton)
 
       expect(screen.getByText('common.tag.delete "Frontend"')).toBeInTheDocument()
       await user.click(screen.getByText('common.operation.cancel'))
@@ -247,8 +253,8 @@ describe('TagItemEditor', () => {
       const removableTag: Tag = { ...baseTag, binding_count: 0 }
       render(<TagItemEditor tag={removableTag} />)
 
-      const removeButton = screen.getByTestId('tag-item-editor-remove-button')
-      await user.click(removeButton as HTMLElement)
+      const removeButton = screen.getByRole('button', { name: i18n.removeTag })
+      await user.click(removeButton)
 
       await waitFor(() => {
         expect(tagMocks.deleteTag).toHaveBeenCalledWith('tag-1')
diff --git a/web/features/tag-management/__tests__/tag-management-modal.spec.tsx b/web/features/tag-management/__tests__/tag-management-modal.spec.tsx
index 0c7b1a5323..d9afcca54f 100644
--- a/web/features/tag-management/__tests__/tag-management-modal.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-management-modal.spec.tsx
@@ -100,13 +100,12 @@ describe('TagManagementModal', () => {
 
     it('should render the close button', () => {
       render(<TagManagementModal {...defaultProps} />)
-      const closeIcon = screen.getByTestId('tag-management-modal-close-button')
-      expect(closeIcon).toBeTruthy()
+      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
     })
 
     it('should render the new tag input with placeholder', () => {
       render(<TagManagementModal {...defaultProps} />)
-      expect(screen.getByPlaceholderText(i18n.addNew)).toBeInTheDocument()
+      expect(screen.getByRole('textbox', { name: i18n.addNew })).toBeInTheDocument()
     })
 
     it('should fallback to empty placeholder when translation returns empty', () => {
@@ -142,7 +141,7 @@ describe('TagManagementModal', () => {
       const onClose = vi.fn()
       render(<TagManagementModal {...defaultProps} onClose={onClose} />)
 
-      await user.click(screen.getByTestId('tag-management-modal-close-button'))
+      await user.click(screen.getByRole('button', { name: 'Close' }))
 
       expect(onClose).toHaveBeenCalledTimes(1)
     })
@@ -151,7 +150,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'NewTag')
 
       expect(input).toHaveValue('NewTag')
@@ -161,7 +160,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'NewTag')
       await user.keyboard('{Enter}')
 
@@ -174,7 +173,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'NewTag')
       await user.keyboard('{Enter}')
 
@@ -190,7 +189,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'NewTag')
       await user.keyboard('{Enter}')
 
@@ -203,7 +202,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'NewTag')
       // Click outside to trigger blur
       await user.click(document.body)
@@ -219,7 +218,7 @@ describe('TagManagementModal', () => {
       const user = userEvent.setup()
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       // Focus and press Enter without typing
       await user.click(input)
       await user.keyboard('{Enter}')
@@ -233,7 +232,7 @@ describe('TagManagementModal', () => {
 
       render(<TagManagementModal {...defaultProps} />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'FailTag')
       await user.keyboard('{Enter}')
 
@@ -253,7 +252,7 @@ describe('TagManagementModal', () => {
       render(<TagManagementModal {...defaultProps} />)
 
       // Should still render the input
-      expect(screen.getByPlaceholderText(i18n.addNew)).toBeInTheDocument()
+      expect(screen.getByRole('textbox', { name: i18n.addNew })).toBeInTheDocument()
     })
 
     it('should handle tag creation with knowledge type', async () => {
@@ -262,7 +261,7 @@ describe('TagManagementModal', () => {
 
       render(<TagManagementModal {...defaultProps} type="knowledge" />)
 
-      const input = screen.getByPlaceholderText(i18n.addNew)
+      const input = screen.getByRole('textbox', { name: i18n.addNew })
       await user.type(input, 'KnowledgeTag')
       await user.keyboard('{Enter}')
 
diff --git a/web/features/tag-management/__tests__/tag-panel.spec.tsx b/web/features/tag-management/__tests__/tag-panel.spec.tsx
index 65b2f0c285..78c129b89d 100644
--- a/web/features/tag-management/__tests__/tag-panel.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-panel.spec.tsx
@@ -135,8 +135,9 @@ describe('TagPanel', () => {
 
     await user.type(screen.getByRole('combobox', { name: i18n.selectorPlaceholder }), 'BrandNewTag')
 
-    expect(screen.getByTestId('create-tag-option')).toHaveTextContent(i18n.create)
-    expect(screen.getByTestId('create-tag-option')).toHaveTextContent('BrandNewTag')
+    const createOption = screen.getByRole('option', { name: /BrandNewTag/i })
+    expect(createOption).toHaveTextContent(i18n.create)
+    expect(createOption).toHaveTextContent('BrandNewTag')
   })
 
   it('does not show a create option for an exact existing tag name', async () => {
@@ -145,7 +146,7 @@ describe('TagPanel', () => {
 
     await user.type(screen.getByRole('combobox', { name: i18n.selectorPlaceholder }), 'Frontend')
 
-    expect(screen.queryByTestId('create-tag-option')).not.toBeInTheDocument()
+    expect(screen.queryByRole('option', { name: /common\.tag\.create/i })).not.toBeInTheDocument()
   })
 
   it('updates only the combobox draft value when selecting and deselecting options', async () => {
@@ -165,7 +166,7 @@ describe('TagPanel', () => {
 
     const input = screen.getByRole('combobox', { name: i18n.selectorPlaceholder })
     await user.type(input, 'BrandNewTag')
-    await user.click(screen.getByTestId('create-tag-option'))
+    await user.click(screen.getByRole('option', { name: /BrandNewTag/i }))
 
     expect(onValueChangeSpy).toHaveBeenLastCalledWith(expect.arrayContaining([
       expect.objectContaining({
diff --git a/web/features/tag-management/__tests__/tag-selector.spec.tsx b/web/features/tag-management/__tests__/tag-selector.spec.tsx
index 3b751a7a17..f33470825b 100644
--- a/web/features/tag-management/__tests__/tag-selector.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-selector.spec.tsx
@@ -233,7 +233,7 @@ describe('TagSelector', () => {
 
     await user.click(screen.getByRole('combobox', { name: i18n.addTag }))
     await user.type(await screen.findByRole('combobox', { name: i18n.selectorPlaceholder }), 'NewKnowledgeTag')
-    await user.click(await screen.findByTestId('create-tag-option'))
+    await user.click(await screen.findByRole('option', { name: /NewKnowledgeTag/i }))
 
     await waitFor(() => {
       expect(createTag).toHaveBeenCalledWith('NewKnowledgeTag', 'knowledge')
diff --git a/web/features/tag-management/__tests__/tag-trigger.spec.tsx b/web/features/tag-management/__tests__/tag-trigger.spec.tsx
index 3f98d8de1c..abca2b95ec 100644
--- a/web/features/tag-management/__tests__/tag-trigger.spec.tsx
+++ b/web/features/tag-management/__tests__/tag-trigger.spec.tsx
@@ -41,8 +41,7 @@ describe('Trigger', () => {
     it('should render a badge even when a tag label is an empty string', () => {
       render(<TagTrigger tags={['']} />)
 
-      // One outer container + one tag badge.
-      expect(screen.getAllByTestId(/^tag-badge-/)).toHaveLength(1)
+      expect(screen.getAllByRole('listitem')).toHaveLength(1)
       expect(screen.queryByText('common.tag.addTag')).not.toBeInTheDocument()
     })
 
@@ -51,7 +50,7 @@ describe('Trigger', () => {
       render(<TagTrigger tags={tags} />)
 
       tags.forEach(tag => expect(screen.getByText(tag)).toBeInTheDocument())
-      expect(screen.getAllByTestId(/^tag-badge-/)).toHaveLength(tags.length)
+      expect(screen.getAllByRole('listitem')).toHaveLength(tags.length)
     })
   })
 })
diff --git a/web/features/tag-management/components/__tests__/app-card-tags.spec.tsx b/web/features/tag-management/components/__tests__/app-card-tags.spec.tsx
index 26d6cf67aa..8a75e99770 100644
--- a/web/features/tag-management/components/__tests__/app-card-tags.spec.tsx
+++ b/web/features/tag-management/components/__tests__/app-card-tags.spec.tsx
@@ -17,11 +17,8 @@ vi.mock('@/features/tag-management/components/tag-selector', () => ({
     renderTagSelector(props)
 
     return (
-      <div data-testid="tag-selector">
-        <span data-testid="target-id">{props.targetId}</span>
-        <span data-testid="tag-type">{props.type}</span>
-        <span data-testid="selected-tag-ids">{props.value.map(tag => tag.id).join(',')}</span>
-        <span data-testid="selected-tag-names">{props.value.map(tag => tag.name).join(',')}</span>
+      <div role="group" aria-label="Tag selector mock">
+        <span>{props.value.map(tag => tag.name).join(',')}</span>
         <button type="button" onClick={props.onOpenTagManagement}>Manage Tags</button>
         <button type="button" onClick={props.onTagsChange}>Tags Changed</button>
       </div>
@@ -43,11 +40,8 @@ describe('AppCardTags', () => {
     it('should render TagSelector with app tag bindings', () => {
       render(<AppCardTags appId="app-1" tags={tags} />)
 
-      expect(screen.getByTestId('tag-selector')).toBeInTheDocument()
-      expect(screen.getByTestId('target-id')).toHaveTextContent('app-1')
-      expect(screen.getByTestId('tag-type')).toHaveTextContent('app')
-      expect(screen.getByTestId('selected-tag-ids')).toHaveTextContent('tag-1,tag-2')
-      expect(screen.getByTestId('selected-tag-names')).toHaveTextContent('Frontend,Backend')
+      expect(screen.getByRole('group', { name: 'Tag selector mock' })).toBeInTheDocument()
+      expect(screen.getByText('Frontend,Backend')).toBeInTheDocument()
       expect(renderTagSelector).toHaveBeenCalledWith(expect.objectContaining({
         placement: 'bottom-start',
         targetId: 'app-1',
@@ -83,7 +77,6 @@ describe('AppCardTags', () => {
     it('should pass an empty selection when the app has no tags', () => {
       render(<AppCardTags appId="app-1" tags={[]} />)
 
-      expect(screen.getByTestId('selected-tag-ids')).toHaveTextContent('')
       expect(renderTagSelector).toHaveBeenCalledWith(expect.objectContaining({
         value: [],
       }))
diff --git a/web/features/tag-management/components/tag-filter.tsx b/web/features/tag-management/components/tag-filter.tsx
index 6f7ac1dd93..bca8465730 100644
--- a/web/features/tag-management/components/tag-filter.tsx
+++ b/web/features/tag-management/components/tag-filter.tsx
@@ -80,7 +80,7 @@ export const TagFilter = ({
         >
           <span className="flex min-w-0 items-center gap-1">
             <span className="p-px">
-              <Tag01Icon className="h-3.5 w-3.5 text-text-tertiary" data-testid="tag-filter-trigger-icon" />
+              <Tag01Icon className="h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" />
             </span>
             <span className="min-w-0 truncate text-[13px] leading-4.5 text-text-secondary">
               {!value.length && t('tag.placeholder', { ns: 'common' })}
@@ -91,7 +91,7 @@ export const TagFilter = ({
             )}
             {!value.length && (
               <span className="shrink-0 p-px">
-                <span aria-hidden className="i-ri-arrow-down-s-line h-3.5 w-3.5 text-text-tertiary" data-testid="tag-filter-arrow-down-icon" />
+                <span aria-hidden className="i-ri-arrow-down-s-line h-3.5 w-3.5 text-text-tertiary" />
               </span>
             )}
           </span>
@@ -100,14 +100,13 @@ export const TagFilter = ({
           <button
             type="button"
             aria-label={t('operation.clear', { ns: 'common' })}
-            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 p-px"
+            className="group/clear absolute top-1/2 right-2 -translate-y-1/2 border-none bg-transparent p-px"
             onClick={(event) => {
               event.stopPropagation()
               onChange([])
             }}
-            data-testid="tag-filter-clear-button"
           >
-            <XCircleIcon className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" />
+            <XCircleIcon className="h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary" aria-hidden="true" />
           </button>
         )}
         <ComboboxContent
diff --git a/web/features/tag-management/components/tag-item-editor.tsx b/web/features/tag-management/components/tag-item-editor.tsx
index edf74196c3..0e47eafa60 100644
--- a/web/features/tag-management/components/tag-item-editor.tsx
+++ b/web/features/tag-management/components/tag-item-editor.tsx
@@ -100,11 +100,18 @@ export const TagItemEditor = ({ tag, onTagsChange }: TagItemEditorProps) => {
               </TooltipTrigger>
               <TooltipContent>{t('common.tagBound', { ns: 'workflow' })}</TooltipContent>
             </Tooltip>
-            <div className="group/edit shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-base-hover" onClick={() => setIsEditing(true)}>
-              <span className="i-ri-edit-line h-3 w-3 text-text-tertiary group-hover/edit:text-text-secondary" data-testid="tag-item-editor-edit-button" />
-            </div>
-            <div
-              className="group/remove shrink-0 cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
+            <button
+              type="button"
+              aria-label={`${t('operation.edit', { ns: 'common' })} ${tag.name}`}
+              className="group/edit shrink-0 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+              onClick={() => setIsEditing(true)}
+            >
+              <span aria-hidden="true" className="i-ri-edit-line h-3 w-3 text-text-tertiary group-hover/edit:text-text-secondary" />
+            </button>
+            <button
+              type="button"
+              aria-label={`${t('operation.remove', { ns: 'common' })} ${tag.name}`}
+              className="group/remove shrink-0 cursor-pointer rounded-md border-none bg-transparent p-1 hover:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
               onClick={() => {
                 if (tag.binding_count)
                   setShowRemoveModal(true)
@@ -112,11 +119,11 @@ export const TagItemEditor = ({ tag, onTagsChange }: TagItemEditorProps) => {
                   handleRemove()
               }}
             >
-              <span className="i-ri-delete-bin-line h-3 w-3 text-text-tertiary group-hover/remove:text-text-secondary" data-testid="tag-item-editor-remove-button" />
-            </div>
+              <span aria-hidden="true" className="i-ri-delete-bin-line h-3 w-3 text-text-tertiary group-hover/remove:text-text-secondary" />
+            </button>
           </>
         )}
-        {isEditing && (<input className="shrink-0 appearance-none caret-primary-600 outline-hidden placeholder:text-text-quaternary" autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && editTag(tag.id, name)} onBlur={() => editTag(tag.id, name)} />)}
+        {isEditing && (<input aria-label={`${t('operation.rename', { ns: 'common' })} ${tag.name}`} className="shrink-0 appearance-none caret-primary-600 outline-hidden placeholder:text-text-quaternary" autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && editTag(tag.id, name)} onBlur={() => editTag(tag.id, name)} />)}
       </div>
       <AlertDialog open={showRemoveModal} onOpenChange={open => !open && setShowRemoveModal(false)}>
         <AlertDialogContent>
diff --git a/web/features/tag-management/components/tag-management-modal.tsx b/web/features/tag-management/components/tag-management-modal.tsx
index 05a09519be..129ac2ce2e 100644
--- a/web/features/tag-management/components/tag-management-modal.tsx
+++ b/web/features/tag-management/components/tag-management-modal.tsx
@@ -56,9 +56,9 @@ export const TagManagementModal = ({ show, type, onClose, onTagsChange }: TagMan
     <Dialog open={show} onOpenChange={open => !open && handleClose()}>
       <DialogContent className="w-150 max-w-150 rounded-xl p-8">
         <div className="relative pb-2 text-xl leading-7.5 font-semibold text-text-primary">{t('tag.manageTags', { ns: 'common' })}</div>
-        <DialogCloseButton data-testid="tag-management-modal-close-button" className="top-4 right-4" />
+        <DialogCloseButton className="top-4 right-4" />
         <div className="mt-3 flex flex-wrap gap-2">
-          <input className="w-25 shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm leading-5 text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary focus:border-solid" placeholder={t('tag.addNew', { ns: 'common' }) || ''} autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()} onBlur={createNewTag} />
+          <input aria-label={t('tag.addNew', { ns: 'common' }) || ''} className="w-25 shrink-0 appearance-none rounded-lg border border-dashed border-divider-regular bg-transparent px-2 py-1 text-sm leading-5 text-text-secondary caret-primary-600 outline-hidden placeholder:text-text-quaternary focus:border-solid" placeholder={t('tag.addNew', { ns: 'common' }) || ''} autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && !e.nativeEvent.isComposing && createNewTag()} onBlur={createNewTag} />
           {tagList.map(tag => (<TagItemEditor key={tag.id} tag={tag} onTagsChange={onTagsChange} />))}
         </div>
       </DialogContent>
diff --git a/web/features/tag-management/components/tag-panel.tsx b/web/features/tag-management/components/tag-panel.tsx
index d112dd9ceb..e778ecdb03 100644
--- a/web/features/tag-management/components/tag-panel.tsx
+++ b/web/features/tag-management/components/tag-panel.tsx
@@ -44,7 +44,6 @@ export const TagPanel = ({
               className="mr-1.5 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-text-tertiary outline-hidden hover:bg-components-input-bg-hover hover:text-text-secondary focus-visible:bg-components-input-bg-hover focus-visible:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset"
               onClick={() => onInputValueChange('')}
               onPointerDown={event => event.preventDefault()}
-              data-testid="tag-search-clear-button"
             >
               <span className="i-ri-close-line size-4" aria-hidden="true" />
             </button>
@@ -59,7 +58,6 @@ export const TagPanel = ({
                 <Fragment key={tag.id}>
                   <ComboboxItem
                     value={tag}
-                    data-testid="create-tag-option"
                   >
                     <ComboboxItemText className="flex items-center gap-x-1 px-0">
                       <span aria-hidden="true" className="i-ri-add-line h-4 w-4 shrink-0 text-text-tertiary" />
diff --git a/web/features/tag-management/components/tag-trigger.tsx b/web/features/tag-management/components/tag-trigger.tsx
index 49b08b4f76..f76cba4333 100644
--- a/web/features/tag-management/components/tag-trigger.tsx
+++ b/web/features/tag-management/components/tag-trigger.tsx
@@ -10,7 +10,10 @@ export const TagTrigger = ({
   const { t } = useTranslation()
 
   return (
-    <div className="flex w-full cursor-pointer items-center gap-1 overflow-hidden rounded-lg p-1 hover:bg-state-base-hover">
+    <div
+      className="flex w-full cursor-pointer items-center gap-1 overflow-hidden rounded-lg p-1 hover:bg-state-base-hover"
+      role={tags.length ? 'list' : undefined}
+    >
       {!tags.length
         ? (
             <div className="flex max-w-full min-w-0 items-center gap-x-0.5 rounded-[5px] border border-dashed border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75">
@@ -27,8 +30,8 @@ export const TagTrigger = ({
                   return (
                     <div
                       key={content}
+                      role="listitem"
                       className="flex max-w-30 min-w-0 shrink-0 items-center gap-x-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1.25 py-0.75"
-                      data-testid={`tag-badge-${content}`}
                     >
                       <span aria-hidden="true" className="i-ri-price-tag-3-line h-3 w-3 shrink-0 text-text-quaternary" />
                       <div className="truncate system-2xs-medium-uppercase text-text-tertiary">
diff --git a/web/i18n/en-US/common.json b/web/i18n/en-US/common.json
index d4f72c242d..bddbef74e1 100644
--- a/web/i18n/en-US/common.json
+++ b/web/i18n/en-US/common.json
@@ -193,6 +193,7 @@
   "imageInput.browse": "browse",
   "imageInput.dropImageHere": "Drop your image here, or",
   "imageInput.supportedFormats": "Supports PNG, JPG, JPEG, WEBP and GIF",
+  "imageUploader.imageList": "Image list",
   "imageUploader.imageUpload": "Image Upload",
   "imageUploader.pasteImageLink": "Paste image link",
   "imageUploader.pasteImageLinkInputPlaceholder": "Paste image link here",
@@ -511,6 +512,8 @@
   "operation.ok": "OK",
   "operation.openInNewTab": "Open in new tab",
   "operation.params": "Params",
+  "operation.pause": "Pause",
+  "operation.play": "Play",
   "operation.refresh": "Restart",
   "operation.regenerate": "Regenerate",
   "operation.reload": "Reload",
@@ -518,6 +521,7 @@
   "operation.rename": "Rename",
   "operation.reset": "Reset",
   "operation.resetKeywords": "Reset keywords",
+  "operation.retry": "Retry",
   "operation.save": "Save",
   "operation.saveAndEnable": "Save & Enable",
   "operation.saveAndRegenerate": "Save & Regenerate Child Chunks",
@@ -532,6 +536,8 @@
   "operation.skip": "Skip",
   "operation.submit": "Submit",
   "operation.sure": "I'm sure",
+  "operation.toggleFullscreen": "Toggle fullscreen",
+  "operation.toggleMute": "Toggle mute",
   "operation.view": "View",
   "operation.viewDetails": "View Details",
   "operation.viewMore": "VIEW MORE",
@@ -676,5 +682,6 @@
   "voiceInput.converting": "Converting to text...",
   "voiceInput.notAllow": "microphone not authorized",
   "voiceInput.speaking": "Speak now...",
+  "voiceInput.start": "Voice input",
   "you": "You"
 }