diff --git a/.agents/skills/component-refactoring/SKILL.md b/.agents/skills/component-refactoring/SKILL.md
index 0c0ea28aa9..a7cae67e8f 100644
--- a/.agents/skills/component-refactoring/SKILL.md
+++ b/.agents/skills/component-refactoring/SKILL.md
@@ -63,7 +63,7 @@ pnpm analyze-component <path> --json
 
 ```typescript
 // ❌ Before: Complex state logic in component
-const Configuration: FC = () => {
+function Configuration() {
   const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
   const [datasetConfigs, setDatasetConfigs] = useState<DatasetConfigs>(...)
   const [completionParams, setCompletionParams] = useState<FormValue>({})
@@ -85,7 +85,7 @@ export const useModelConfig = (appId: string) => {
 }
 
 // Component becomes cleaner
-const Configuration: FC = () => {
+function Configuration() {
   const { modelConfig, setModelConfig } = useModelConfig(appId)
   return <div>...</div>
 }
@@ -189,7 +189,6 @@ const Template = useMemo(() => {
 
 **Dify Convention**:
 - This skill is for component decomposition, not query/mutation design.
-- When refactoring data fetching, follow `web/AGENTS.md`.
 - Do not introduce deprecated `useInvalid` / `useReset`.
 - Do not add thin passthrough `useQuery` wrappers during refactoring; only extract a custom hook when it truly orchestrates multiple queries/mutations or shared derived state.
 
diff --git a/.agents/skills/component-refactoring/references/complexity-patterns.md b/.agents/skills/component-refactoring/references/complexity-patterns.md
index 5a0a268f38..2873630d4b 100644
--- a/.agents/skills/component-refactoring/references/complexity-patterns.md
+++ b/.agents/skills/component-refactoring/references/complexity-patterns.md
@@ -60,8 +60,10 @@ const Template = useMemo(() => {
 **After** (complexity: ~3):
 
 ```typescript
+import type { ComponentType } from 'react'
+
 // Define lookup table outside component
-const TEMPLATE_MAP: Record<AppModeEnum, Record<string, FC<TemplateProps>>> = {
+const TEMPLATE_MAP: Record<AppModeEnum, Record<string, ComponentType<TemplateProps>>> = {
   [AppModeEnum.CHAT]: {
     [LanguagesSupported[1]]: TemplateChatZh,
     [LanguagesSupported[7]]: TemplateChatJa,
diff --git a/.agents/skills/component-refactoring/references/component-splitting.md b/.agents/skills/component-refactoring/references/component-splitting.md
index 78a3389100..81c007e005 100644
--- a/.agents/skills/component-refactoring/references/component-splitting.md
+++ b/.agents/skills/component-refactoring/references/component-splitting.md
@@ -65,10 +65,10 @@ interface ConfigurationHeaderProps {
   onPublish: () => void
 }
 
-const ConfigurationHeader: FC<ConfigurationHeaderProps> = ({
+function ConfigurationHeader({
   isAdvancedMode,
   onPublish,
-}) => {
+}: ConfigurationHeaderProps) {
   const { t } = useTranslation()
   
   return (
@@ -136,7 +136,7 @@ const AppInfo = () => {
 }
 
 // ✅ After: Separate view components
-const AppInfoExpanded: FC<AppInfoViewProps> = ({ appDetail, onAction }) => {
+function AppInfoExpanded({ appDetail, onAction }: AppInfoViewProps) {
   return (
     <div className="expanded">
       {/* Clean, focused expanded view */}
@@ -144,7 +144,7 @@ const AppInfoExpanded: FC<AppInfoViewProps> = ({ appDetail, onAction }) => {
   )
 }
 
-const AppInfoCollapsed: FC<AppInfoViewProps> = ({ appDetail, onAction }) => {
+function AppInfoCollapsed({ appDetail, onAction }: AppInfoViewProps) {
   return (
     <div className="collapsed">
       {/* Clean, focused collapsed view */}
@@ -203,12 +203,12 @@ interface AppInfoModalsProps {
   onSuccess: () => void
 }
 
-const AppInfoModals: FC<AppInfoModalsProps> = ({
+function AppInfoModals({
   appDetail,
   activeModal,
   onClose,
   onSuccess,
-}) => {
+}: AppInfoModalsProps) {
   const handleEdit = async (data) => { /* logic */ }
   const handleDuplicate = async (data) => { /* logic */ }
   const handleDelete = async () => { /* logic */ }
@@ -296,7 +296,7 @@ interface OperationItemProps {
   onAction: (id: string) => void
 }
 
-const OperationItem: FC<OperationItemProps> = ({ operation, onAction }) => {
+function OperationItem({ operation, onAction }: OperationItemProps) {
   return (
     <div className="operation-item">
       <span className="icon">{operation.icon}</span>
@@ -435,7 +435,7 @@ interface ChildProps {
   onSubmit: () => void
 }
 
-const Child: FC<ChildProps> = ({ value, onChange, onSubmit }) => {
+function Child({ value, onChange, onSubmit }: ChildProps) {
   return (
     <div>
       <input value={value} onChange={e => onChange(e.target.value)} />
diff --git a/.agents/skills/component-refactoring/references/hook-extraction.md b/.agents/skills/component-refactoring/references/hook-extraction.md
index 34d62a401f..6fad2c8885 100644
--- a/.agents/skills/component-refactoring/references/hook-extraction.md
+++ b/.agents/skills/component-refactoring/references/hook-extraction.md
@@ -112,13 +112,13 @@ export const useModelConfig = ({
 
 ```typescript
 // Before: 50+ lines of state management
-const Configuration: FC = () => {
+function Configuration() {
   const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
   // ... lots of related state and effects
 }
 
 // After: Clean component
-const Configuration: FC = () => {
+function Configuration() {
   const {
     modelConfig,
     setModelConfig,
@@ -159,7 +159,6 @@ const Configuration: FC = () => {
 
 When hook extraction touches query or mutation code, do not use this reference as the source of truth for data-layer patterns.
 
-- Follow `web/AGENTS.md` first.
 - Do not introduce deprecated `useInvalid` / `useReset`.
 - Do not extract thin passthrough `useQuery` hooks; only extract orchestration hooks.
 
diff --git a/.agents/skills/e2e-cucumber-playwright/SKILL.md b/.agents/skills/e2e-cucumber-playwright/SKILL.md
index de6b58f26d..dd7d204678 100644
--- a/.agents/skills/e2e-cucumber-playwright/SKILL.md
+++ b/.agents/skills/e2e-cucumber-playwright/SKILL.md
@@ -23,7 +23,7 @@ Use this skill for Dify's repository-level E2E suite in `e2e/`. Use [`e2e/AGENTS
    - `e2e/scripts/run-cucumber.ts` and `e2e/cucumber.config.ts` when tags or execution flow matter
 3. Read [`references/playwright-best-practices.md`](references/playwright-best-practices.md) only when locator, assertion, isolation, or waiting choices are involved.
 4. Read [`references/cucumber-best-practices.md`](references/cucumber-best-practices.md) only when scenario wording, step granularity, tags, or expression design are involved.
-5. Re-check official docs with Context7 before introducing a new Playwright or Cucumber pattern.
+5. Re-check official Playwright or Cucumber docs with the available documentation tools before introducing a new framework pattern.
 
 ## Local Rules
 
diff --git a/.agents/skills/frontend-code-review/references/performance.md b/.agents/skills/frontend-code-review/references/performance.md
index 2d60072f5c..0c33db46d0 100644
--- a/.agents/skills/frontend-code-review/references/performance.md
+++ b/.agents/skills/frontend-code-review/references/performance.md
@@ -9,18 +9,18 @@ Category: Performance
 
 When rendering React Flow, prefer `useNodes`/`useEdges` for UI consumption and rely on `useStoreApi` inside callbacks that mutate or read node/edge state. Avoid manually pulling Flow data outside of these hooks.
 
-## Complex prop memoization
+## Complex prop stability
 
-IsUrgent: True
+IsUrgent: False
 Category: Performance
 
 ### Description
 
-Wrap complex prop values (objects, arrays, maps) in `useMemo` prior to passing them into child components to guarantee stable references and prevent unnecessary renders.
+Only require stable object, array, or map props when there is a clear reason: the child is memoized, the value participates in effect/query dependencies, the value is part of a stable-reference API contract, or profiling/local behavior shows avoidable re-renders. Do not request `useMemo` for every inline object by default; `how-to-write-component` treats memoization as a targeted optimization.
 
 Update this file when adding, editing, or removing Performance rules so the catalog remains accurate.
 
-Wrong:
+Risky:
 
 ```tsx
 <HeavyComp
@@ -31,7 +31,7 @@ Wrong:
 />
 ```
 
-Right:
+Better when stable identity matters:
 
 ```tsx
 const config = useMemo(() => ({
diff --git a/.agents/skills/frontend-testing/SKILL.md b/.agents/skills/frontend-testing/SKILL.md
index 105c979c58..21c46d75bc 100644
--- a/.agents/skills/frontend-testing/SKILL.md
+++ b/.agents/skills/frontend-testing/SKILL.md
@@ -5,7 +5,7 @@ description: Generate Vitest + React Testing Library tests for Dify frontend com
 
 # Dify Frontend Testing Skill
 
-This skill enables Claude to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices.
+This skill enables Codex to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices.
 
 > **⚠️ Authoritative Source**: This skill is derived from `web/docs/test.md`. Use Vitest mock/timer APIs (`vi.*`).
 
@@ -24,35 +24,27 @@ Apply this skill when the user:
 **Do NOT apply** when:
 
 - User is asking about backend/API tests (Python/pytest)
-- User is asking about E2E tests (Playwright/Cypress)
+- User is asking about E2E tests (Cucumber + Playwright under `e2e/`)
 - User is only asking conceptual questions without code context
 
 ## Quick Reference
 
-### Tech Stack
-
-| Tool | Version | Purpose |
-|------|---------|---------|
-| Vitest | 4.0.16 | Test runner |
-| React Testing Library | 16.0 | Component testing |
-| jsdom | - | Test environment |
-| nock | 14.0 | HTTP mocking |
-| TypeScript | 5.x | Type safety |
-
 ### Key Commands
 
+Run these commands from `web/`. From the repository root, prefix them with `pnpm -C web`.
+
 ```bash
 # Run all tests
 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>
@@ -228,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/.agents/skills/frontend-testing/references/mocking.md b/.agents/skills/frontend-testing/references/mocking.md
index 8c2f1c0c58..7723e4df21 100644
--- a/.agents/skills/frontend-testing/references/mocking.md
+++ b/.agents/skills/frontend-testing/references/mocking.md
@@ -56,7 +56,7 @@ See [Zustand Store Testing](#zustand-store-testing) section for full details.
 
 | Location | Purpose |
 |----------|---------|
-| `web/vitest.setup.ts` | Global mocks shared by all tests (`react-i18next`, `next/image`, `zustand`) |
+| `web/vitest.setup.ts` | Global mocks shared by all tests (`react-i18next`, `zustand`, clipboard, FloatingPortal, Monaco, localStorage`) |
 | `web/__mocks__/zustand.ts` | Zustand mock implementation (auto-resets stores after each test) |
 | `web/__mocks__/` | Reusable mock factories shared across multiple test files |
 | Test file | Test-specific mocks, inline with `vi.mock()` |
@@ -216,28 +216,21 @@ describe('Component', () => {
 })
 ```
 
-### 5. HTTP Mocking with Nock
+### 5. HTTP and `fetch` Mocking
 
 ```typescript
-import nock from 'nock'
-
-const GITHUB_HOST = 'https://api.github.com'
-const GITHUB_PATH = '/repos/owner/repo'
-
-const mockGithubApi = (status: number, body: Record<string, unknown>, delayMs = 0) => {
-  return nock(GITHUB_HOST)
-    .get(GITHUB_PATH)
-    .delay(delayMs)
-    .reply(status, body)
-}
-
 describe('GithubComponent', () => {
-  afterEach(() => {
-    nock.cleanAll()
+  beforeEach(() => {
+    vi.clearAllMocks()
   })
 
   it('should display repo info', async () => {
-    mockGithubApi(200, { name: 'dify', stars: 1000 })
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce(
+      new Response(JSON.stringify({ name: 'dify', stars: 1000 }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    )
     
     render(<GithubComponent />)
     
@@ -247,7 +240,12 @@ describe('GithubComponent', () => {
   })
 
   it('should handle API error', async () => {
-    mockGithubApi(500, { message: 'Server error' })
+    vi.mocked(globalThis.fetch).mockResolvedValueOnce(
+      new Response(JSON.stringify({ message: 'Server error' }), {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    )
     
     render(<GithubComponent />)
     
@@ -258,6 +256,8 @@ describe('GithubComponent', () => {
 })
 ```
 
+Prefer mocking `@/service/*` modules or spying on `global.fetch` / `ky` clients with deterministic responses. Do not introduce an HTTP interception dependency such as `nock` or MSW unless it is already declared in the workspace or adding it is part of the task.
+
 ### 6. Context Providers
 
 ```typescript
@@ -332,7 +332,7 @@ const renderWithQueryClient = (ui: React.ReactElement) => {
 1. **Don't mock Zustand store modules** - Use real stores with `setState()`
 1. Don't mock components you can import directly
 1. Don't create overly simplified mocks that miss conditional logic
-1. Don't forget to clean up nock after each test
+1. Don't leave HTTP mocks or service mock state leaking between tests
 1. Don't use `any` types in mocks without necessity
 
 ### Mock Decision Tree
diff --git a/.agents/skills/frontend-testing/references/workflow.md b/.agents/skills/frontend-testing/references/workflow.md
index bc4ed8285a..27755d42a7 100644
--- a/.agents/skills/frontend-testing/references/workflow.md
+++ b/.agents/skills/frontend-testing/references/workflow.md
@@ -227,12 +227,12 @@ Failing tests compound:
 
 **Fix failures immediately before proceeding.**
 
-## Integration with Claude's Todo Feature
+## Integration with Codex's Todo Feature
 
-When using Claude for multi-file testing:
+When using Codex for multi-file testing:
 
-1. **Ask Claude to create a todo list** before starting
-1. **Request one file at a time** or ensure Claude processes incrementally
+1. **Create a todo list** before starting
+1. **Process one file at a time**
 1. **Verify each test passes** before asking for the next
 1. **Mark todos complete** as you progress
 
diff --git a/.agents/skills/tailwind-css-rules/SKILL.md b/.agents/skills/tailwind-css-rules/SKILL.md
index 0bbc20c21c..3528548036 100644
--- a/.agents/skills/tailwind-css-rules/SKILL.md
+++ b/.agents/skills/tailwind-css-rules/SKILL.md
@@ -45,23 +45,20 @@ description: Tailwind CSS v4.1+ rules and best practices. Use when writing, revi
 | `decoration-slice`      | `box-decoration-slice`                            |
 | `decoration-clone`      | `box-decoration-clone`                            |
 
-### Renamed Utilities (ALWAYS use the v4 name)
+### Renamed Utilities
 
-| ❌ v3              | ✅ v4              |
-| ------------------ | ------------------ |
-| `bg-gradient-*`    | `bg-linear-*`      |
-| `shadow-sm`        | `shadow-xs`        |
-| `shadow`           | `shadow-sm`        |
-| `drop-shadow-sm`   | `drop-shadow-xs`   |
-| `drop-shadow`      | `drop-shadow-sm`   |
-| `blur-sm`          | `blur-xs`          |
-| `blur`             | `blur-sm`          |
-| `backdrop-blur-sm` | `backdrop-blur-xs` |
-| `backdrop-blur`    | `backdrop-blur-sm` |
-| `rounded-sm`       | `rounded-xs`       |
-| `rounded`          | `rounded-sm`       |
-| `outline-none`     | `outline-hidden`   |
-| `ring`             | `ring-3`           |
+Use the v4 name when migrating code that still carries Tailwind v3 semantics. Do not blanket-replace existing v4 classes: classes such as `rounded-sm`, `shadow-sm`, `ring-1`, and `ring-2` are valid in this codebase when they intentionally represent the current design scale.
+
+| ❌ v3 pattern       | ✅ v4 pattern                                      |
+| ------------------- | -------------------------------------------------- |
+| `bg-gradient-*`     | `bg-linear-*`                                      |
+| old shadow scale    | verify against the current Tailwind/design scale   |
+| old blur scale      | verify against the current Tailwind/design scale   |
+| old radius scale    | use the Dify radius token mapping when applicable  |
+| `outline-none`      | `outline-hidden`                                   |
+| bare `ring` utility | use an explicit ring width such as `ring-1`/`ring-2`/`ring-3` |
+
+For Figma radius tokens, follow `packages/dify-ui/AGENTS.md`. For example, `--radius/xs` maps to `rounded-sm`; do not rewrite it to `rounded-xs`.
 
 ## Layout and Spacing Rules
 
diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml
index f59cc6be48..aefcf1b5ac 100644
--- a/.github/workflows/labeler.yml
+++ b/.github/workflows/labeler.yml
@@ -9,6 +9,6 @@ jobs:
       pull-requests: write
     runs-on: depot-ubuntu-24.04
     steps:
-      - uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+      - uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
         with:
           sync-labels: true
diff --git a/.github/workflows/translate-i18n-claude.yml b/.github/workflows/translate-i18n-claude.yml
index 7bb6fc1bbd..4e738df684 100644
--- a/.github/workflows/translate-i18n-claude.yml
+++ b/.github/workflows/translate-i18n-claude.yml
@@ -158,7 +158,7 @@ jobs:
 
       - name: Run Claude Code for Translation Sync
         if: steps.context.outputs.CHANGED_FILES != ''
-        uses: anthropics/claude-code-action@fefa07e9c665b7320f08c3b525980457f22f58aa # v1.0.111
+        uses: anthropics/claude-code-action@476e359e6203e73dad705c8b322e333fabbd7416 # v1.0.119
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/Makefile b/Makefile
index ae7589bbd6..3b5024683f 100644
--- a/Makefile
+++ b/Makefile
@@ -3,6 +3,10 @@ DOCKER_REGISTRY=langgenius
 WEB_IMAGE=$(DOCKER_REGISTRY)/dify-web
 API_IMAGE=$(DOCKER_REGISTRY)/dify-api
 VERSION=latest
+DOCKER_DIR=docker
+DOCKER_MIDDLEWARE_ENV=$(DOCKER_DIR)/middleware.env
+DOCKER_MIDDLEWARE_ENV_EXAMPLE=$(DOCKER_DIR)/envs/middleware.env.example
+DOCKER_MIDDLEWARE_PROJECT=dify-middlewares-dev
 
 # Default target - show help
 .DEFAULT_GOAL := help
@@ -17,8 +21,13 @@ dev-setup: prepare-docker prepare-web prepare-api
 # Step 1: Prepare Docker middleware
 prepare-docker:
 	@echo "🐳 Setting up Docker middleware..."
-	@cp -n docker/middleware.env.example docker/middleware.env 2>/dev/null || echo "Docker middleware.env already exists"
-	@cd docker && docker compose -f docker-compose.middleware.yaml --env-file middleware.env -p dify-middlewares-dev up -d
+	@if [ ! -f "$(DOCKER_MIDDLEWARE_ENV)" ]; then \
+		cp "$(DOCKER_MIDDLEWARE_ENV_EXAMPLE)" "$(DOCKER_MIDDLEWARE_ENV)"; \
+		echo "Docker middleware.env created"; \
+	else \
+		echo "Docker middleware.env already exists"; \
+	fi
+	@cd $(DOCKER_DIR) && docker compose -f docker-compose.middleware.yaml --env-file middleware.env -p $(DOCKER_MIDDLEWARE_PROJECT) up -d
 	@echo "✅ Docker middleware started"
 
 # Step 2: Prepare web environment
@@ -39,12 +48,18 @@ prepare-api:
 # Clean dev environment
 dev-clean:
 	@echo "⚠️  Stopping Docker containers..."
-	@cd docker && docker compose -f docker-compose.middleware.yaml --env-file middleware.env -p dify-middlewares-dev down
+	@if [ -f "$(DOCKER_MIDDLEWARE_ENV)" ]; then \
+		cd $(DOCKER_DIR) && docker compose -f docker-compose.middleware.yaml --env-file middleware.env -p $(DOCKER_MIDDLEWARE_PROJECT) down; \
+	else \
+		echo "Docker middleware.env does not exist, skipping compose down"; \
+	fi
 	@echo "🗑️  Removing volumes..."
 	@rm -rf docker/volumes/db
+	@rm -rf docker/volumes/mysql
 	@rm -rf docker/volumes/redis
 	@rm -rf docker/volumes/plugin_daemon
 	@rm -rf docker/volumes/weaviate
+	@rm -rf docker/volumes/sandbox/dependencies
 	@rm -rf api/storage
 	@echo "✅ Cleanup complete"
 
@@ -132,7 +147,7 @@ help:
 	@echo "  make prepare-docker - Set up Docker middleware"
 	@echo "  make prepare-web    - Set up web environment"
 	@echo "  make prepare-api    - Set up API environment"
-	@echo "  make dev-clean      - Stop Docker middleware containers"
+	@echo "  make dev-clean      - Stop Docker middleware containers and remove dev data"
 	@echo ""
 	@echo "Backend Code Quality:"
 	@echo "  make format         - Format code with ruff"
diff --git a/api/.env.example b/api/.env.example
index 56ba8a6c5d..ba153e4c9c 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -34,7 +34,7 @@ TRIGGER_URL=http://localhost:5001
 FILES_ACCESS_TIMEOUT=300
 
 # Collaboration mode toggle
-ENABLE_COLLABORATION_MODE=false
+ENABLE_COLLABORATION_MODE=true
 
 # Access token expiration time in minutes
 ACCESS_TOKEN_EXPIRE_MINUTES=60
diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index 52e33c1789..e9bb34fa75 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -1298,7 +1298,7 @@ class PositionConfig(BaseSettings):
 class CollaborationConfig(BaseSettings):
     ENABLE_COLLABORATION_MODE: bool = Field(
         description="Whether to enable collaboration mode features across the workspace",
-        default=False,
+        default=True,
     )
 
 
diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index a8ab5bec48..4429039d79 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -39,7 +39,7 @@ from libs.login import current_account_with_tenant, login_required
 from models import App, DatasetPermissionEnum, Workflow
 from models.model import IconType
 from services.app_dsl_service import AppDslService
-from services.app_service import AppService
+from services.app_service import AppListParams, AppService, CreateAppParams
 from services.enterprise.enterprise_service import EnterpriseService
 from services.entities.dsl_entities import ImportMode, ImportStatus
 from services.entities.knowledge_entities.knowledge_entities import (
@@ -478,11 +478,18 @@ class AppListApi(Resource):
         current_user, current_tenant_id = current_account_with_tenant()
 
         args = AppListQuery.model_validate(_normalize_app_list_query_args(request.args))
-        args_dict = args.model_dump()
+        params = AppListParams(
+            page=args.page,
+            limit=args.limit,
+            mode=args.mode,
+            name=args.name,
+            tag_ids=args.tag_ids,
+            is_created_by_me=args.is_created_by_me,
+        )
 
         # get app list
         app_service = AppService()
-        app_pagination = app_service.get_paginate_apps(current_user.id, current_tenant_id, args_dict)
+        app_pagination = app_service.get_paginate_apps(current_user.id, current_tenant_id, params)
         if not app_pagination:
             empty = AppPagination(page=args.page, limit=args.limit, total=0, has_more=False, data=[])
             return empty.model_dump(mode="json"), 200
@@ -546,9 +553,17 @@ class AppListApi(Resource):
         """Create app"""
         current_user, current_tenant_id = current_account_with_tenant()
         args = CreateAppPayload.model_validate(console_ns.payload)
+        params = CreateAppParams(
+            name=args.name,
+            description=args.description,
+            mode=args.mode,
+            icon_type=args.icon_type,
+            icon=args.icon,
+            icon_background=args.icon_background,
+        )
 
         app_service = AppService()
-        app = app_service.create_app(current_tenant_id, args.model_dump(), current_user)
+        app = app_service.create_app(current_tenant_id, params, current_user)
         app_detail = AppDetail.model_validate(app, from_attributes=True)
         return app_detail.model_dump(mode="json"), 201
 
diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py
index d001dfba64..0e91779b2c 100644
--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -606,63 +606,63 @@ class DatasetIndexingEstimateApi(Resource):
         # validate args
         DocumentService.estimate_args_validate(args)
         extract_settings = []
-        if args["info_list"]["data_source_type"] == "upload_file":
-            file_ids = args["info_list"]["file_info_list"]["file_ids"]
-            file_details = db.session.scalars(
-                select(UploadFile).where(UploadFile.tenant_id == current_tenant_id, UploadFile.id.in_(file_ids))
-            ).all()
+        match args["info_list"]["data_source_type"]:
+            case "upload_file":
+                file_ids = args["info_list"]["file_info_list"]["file_ids"]
+                file_details = db.session.scalars(
+                    select(UploadFile).where(UploadFile.tenant_id == current_tenant_id, UploadFile.id.in_(file_ids))
+                ).all()
+                if file_details is None:
+                    raise NotFound("File not found.")
 
-            if file_details is None:
-                raise NotFound("File not found.")
-
-            if file_details:
-                for file_detail in file_details:
+                if file_details:
+                    for file_detail in file_details:
+                        extract_setting = ExtractSetting(
+                            datasource_type=DatasourceType.FILE,
+                            upload_file=file_detail,
+                            document_model=args["doc_form"],
+                        )
+                        extract_settings.append(extract_setting)
+            case "notion_import":
+                notion_info_list = args["info_list"]["notion_info_list"]
+                for notion_info in notion_info_list:
+                    workspace_id = notion_info["workspace_id"]
+                    credential_id = notion_info.get("credential_id")
+                    for page in notion_info["pages"]:
+                        extract_setting = ExtractSetting(
+                            datasource_type=DatasourceType.NOTION,
+                            notion_info=NotionInfo.model_validate(
+                                {
+                                    "credential_id": credential_id,
+                                    "notion_workspace_id": workspace_id,
+                                    "notion_obj_id": page["page_id"],
+                                    "notion_page_type": page["type"],
+                                    "tenant_id": current_tenant_id,
+                                }
+                            ),
+                            document_model=args["doc_form"],
+                        )
+                        extract_settings.append(extract_setting)
+            case "website_crawl":
+                website_info_list = args["info_list"]["website_info_list"]
+                for url in website_info_list["urls"]:
                     extract_setting = ExtractSetting(
-                        datasource_type=DatasourceType.FILE,
-                        upload_file=file_detail,
-                        document_model=args["doc_form"],
-                    )
-                    extract_settings.append(extract_setting)
-        elif args["info_list"]["data_source_type"] == "notion_import":
-            notion_info_list = args["info_list"]["notion_info_list"]
-            for notion_info in notion_info_list:
-                workspace_id = notion_info["workspace_id"]
-                credential_id = notion_info.get("credential_id")
-                for page in notion_info["pages"]:
-                    extract_setting = ExtractSetting(
-                        datasource_type=DatasourceType.NOTION,
-                        notion_info=NotionInfo.model_validate(
+                        datasource_type=DatasourceType.WEBSITE,
+                        website_info=WebsiteInfo.model_validate(
                             {
-                                "credential_id": credential_id,
-                                "notion_workspace_id": workspace_id,
-                                "notion_obj_id": page["page_id"],
-                                "notion_page_type": page["type"],
+                                "provider": website_info_list["provider"],
+                                "job_id": website_info_list["job_id"],
+                                "url": url,
                                 "tenant_id": current_tenant_id,
+                                "mode": "crawl",
+                                "only_main_content": website_info_list["only_main_content"],
                             }
                         ),
                         document_model=args["doc_form"],
                     )
                     extract_settings.append(extract_setting)
-        elif args["info_list"]["data_source_type"] == "website_crawl":
-            website_info_list = args["info_list"]["website_info_list"]
-            for url in website_info_list["urls"]:
-                extract_setting = ExtractSetting(
-                    datasource_type=DatasourceType.WEBSITE,
-                    website_info=WebsiteInfo.model_validate(
-                        {
-                            "provider": website_info_list["provider"],
-                            "job_id": website_info_list["job_id"],
-                            "url": url,
-                            "tenant_id": current_tenant_id,
-                            "mode": "crawl",
-                            "only_main_content": website_info_list["only_main_content"],
-                        }
-                    ),
-                    document_model=args["doc_form"],
-                )
-                extract_settings.append(extract_setting)
-        else:
-            raise ValueError("Data source type not support")
+            case _:
+                raise ValueError("Data source type not support")
         indexing_runner = IndexingRunner()
         try:
             response = indexing_runner.indexing_estimate(
diff --git a/api/controllers/console/datasets/datasets_document.py b/api/controllers/console/datasets/datasets_document.py
index 3372a967d9..c4e13c41a5 100644
--- a/api/controllers/console/datasets/datasets_document.py
+++ b/api/controllers/console/datasets/datasets_document.py
@@ -369,28 +369,31 @@ class DatasetDocumentListApi(Resource):
         else:
             sort_logic = asc
 
-        if sort == "hit_count":
-            sub_query = (
-                sa.select(DocumentSegment.document_id, sa.func.sum(DocumentSegment.hit_count).label("total_hit_count"))
-                .where(DocumentSegment.dataset_id == str(dataset_id))
-                .group_by(DocumentSegment.document_id)
-                .subquery()
-            )
+        match sort:
+            case "hit_count":
+                sub_query = (
+                    sa.select(
+                        DocumentSegment.document_id, sa.func.sum(DocumentSegment.hit_count).label("total_hit_count")
+                    )
+                    .where(DocumentSegment.dataset_id == str(dataset_id))
+                    .group_by(DocumentSegment.document_id)
+                    .subquery()
+                )
 
-            query = query.outerjoin(sub_query, sub_query.c.document_id == Document.id).order_by(
-                sort_logic(sa.func.coalesce(sub_query.c.total_hit_count, 0)),
-                sort_logic(Document.position),
-            )
-        elif sort == "created_at":
-            query = query.order_by(
-                sort_logic(Document.created_at),
-                sort_logic(Document.position),
-            )
-        else:
-            query = query.order_by(
-                desc(Document.created_at),
-                desc(Document.position),
-            )
+                query = query.outerjoin(sub_query, sub_query.c.document_id == Document.id).order_by(
+                    sort_logic(sa.func.coalesce(sub_query.c.total_hit_count, 0)),
+                    sort_logic(Document.position),
+                )
+            case "created_at":
+                query = query.order_by(
+                    sort_logic(Document.created_at),
+                    sort_logic(Document.position),
+                )
+            case _:
+                query = query.order_by(
+                    desc(Document.created_at),
+                    desc(Document.position),
+                )
 
         paginated_documents = db.paginate(select=query, page=page, per_page=limit, max_per_page=100, error_out=False)
         documents = paginated_documents.items
diff --git a/api/core/agent/base_agent_runner.py b/api/core/agent/base_agent_runner.py
index c22102c2ba..cba4659483 100644
--- a/api/core/agent/base_agent_runner.py
+++ b/api/core/agent/base_agent_runner.py
@@ -532,7 +532,6 @@ class BaseAgentRunner(AppRunner):
         file_objs = file_factory.build_from_message_files(
             message_files=files,
             tenant_id=self.tenant_id,
-            config=file_extra_config,
             access_controller=_file_access_controller,
         )
         if not file_objs:
diff --git a/api/core/indexing_runner.py b/api/core/indexing_runner.py
index b6e33396d1..537b14388e 100644
--- a/api/core/indexing_runner.py
+++ b/api/core/indexing_runner.py
@@ -324,9 +324,10 @@ class IndexingRunner:
         # one extract_setting is one source document
         for extract_setting in extract_settings:
             # extract
-            processing_rule = DatasetProcessRule(
-                mode=tmp_processing_rule["mode"], rules=json.dumps(tmp_processing_rule["rules"])
-            )
+            processing_rule = {
+                "mode": tmp_processing_rule["mode"],
+                "rules": tmp_processing_rule.get("rules"),
+            }
             # Extract document content
             text_docs = index_processor.extract(extract_setting, process_rule_mode=tmp_processing_rule["mode"])
             # Cleaning and segmentation
@@ -334,7 +335,7 @@ class IndexingRunner:
                 text_docs,
                 current_user=None,
                 embedding_model_instance=embedding_model_instance,
-                process_rule=processing_rule.to_dict(),
+                process_rule=processing_rule,
                 tenant_id=tenant_id,
                 doc_language=doc_language,
                 preview=True,
diff --git a/api/core/memory/token_buffer_memory.py b/api/core/memory/token_buffer_memory.py
index d840ee213c..c41c175cca 100644
--- a/api/core/memory/token_buffer_memory.py
+++ b/api/core/memory/token_buffer_memory.py
@@ -86,12 +86,10 @@ class TokenBufferMemory:
 
         detail = ImagePromptMessageContent.DETAIL.HIGH
         if file_extra_config and app_record:
-            # Build files directly without filtering by belongs_to
             file_objs = [
                 file_factory.build_from_message_file(
                     message_file=message_file,
                     tenant_id=app_record.tenant_id,
-                    config=file_extra_config,
                     access_controller=_file_access_controller,
                 )
                 for message_file in message_files
diff --git a/api/core/prompt/simple_prompt_transform.py b/api/core/prompt/simple_prompt_transform.py
index 1665bdeb52..e836554ca0 100644
--- a/api/core/prompt/simple_prompt_transform.py
+++ b/api/core/prompt/simple_prompt_transform.py
@@ -123,12 +123,15 @@ class SimplePromptTransform(PromptTransform):
 
         for v in special_variable_keys:
             # support #context#, #query# and #histories#
-            if v == "#context#":
-                variables["#context#"] = context or ""
-            elif v == "#query#":
-                variables["#query#"] = query or ""
-            elif v == "#histories#":
-                variables["#histories#"] = histories or ""
+            match v:
+                case "#context#":
+                    variables["#context#"] = context or ""
+                case "#query#":
+                    variables["#query#"] = query or ""
+                case "#histories#":
+                    variables["#histories#"] = histories or ""
+                case _:
+                    pass
 
         prompt_template = prompt_template_config["prompt_template"]
         if not isinstance(prompt_template, PromptTemplateParser):
diff --git a/api/core/rag/index_processor/processor/parent_child_index_processor.py b/api/core/rag/index_processor/processor/parent_child_index_processor.py
index ba277d5018..a26a900512 100644
--- a/api/core/rag/index_processor/processor/parent_child_index_processor.py
+++ b/api/core/rag/index_processor/processor/parent_child_index_processor.py
@@ -29,6 +29,7 @@ from libs import helper
 from models import Account
 from models.dataset import ChildChunk, Dataset, DatasetProcessRule, DocumentSegment
 from models.dataset import Document as DatasetDocument
+from models.enums import ProcessRuleMode
 from services.account_service import AccountService
 from services.summary_index_service import SummaryIndexService
 
@@ -325,7 +326,7 @@ class ParentChildIndexProcessor(BaseIndexProcessor):
             # update document parent mode
             dataset_process_rule = DatasetProcessRule(
                 dataset_id=dataset.id,
-                mode="hierarchical",
+                mode=ProcessRuleMode.HIERARCHICAL,
                 rules=json.dumps(
                     {
                         "parent_mode": parent_childs.parent_mode,
diff --git a/api/core/workflow/node_runtime.py b/api/core/workflow/node_runtime.py
index c1d3a856fb..d687d9a6e0 100644
--- a/api/core/workflow/node_runtime.py
+++ b/api/core/workflow/node_runtime.py
@@ -378,6 +378,7 @@ class DifyToolNodeRuntime(ToolNodeRuntimeProtocol):
         node_id: str,
         node_data: ToolNodeData,
         variable_pool,
+        node_execution_id: str | None = None,
     ) -> ToolRuntimeHandle:
         try:
             tool_runtime = ToolManager.get_workflow_tool_runtime(
diff --git a/api/factories/file_factory/message_files.py b/api/factories/file_factory/message_files.py
index 4b3d514238..27441bdcc1 100644
--- a/api/factories/file_factory/message_files.py
+++ b/api/factories/file_factory/message_files.py
@@ -1,11 +1,18 @@
-"""Adapters from persisted message files to graph-layer file values."""
+"""Adapters from persisted message files to graph-layer file values.
+
+Replay paths only: files in conversation history were validated at upload time,
+so these helpers deliberately do not accept (or forward) a ``FileUploadConfig`` —
+re-validation here would break replays whenever workflow ``file_upload`` config
+drifts between rounds. Mirrors ``build_file_from_stored_mapping`` in
+``models/utils/file_input_compat.py``.
+"""
 
 from __future__ import annotations
 
 from collections.abc import Sequence
 
 from core.app.file_access import FileAccessControllerProtocol
-from graphon.file import File, FileBelongsTo, FileTransferMethod, FileUploadConfig
+from graphon.file import File, FileBelongsTo, FileTransferMethod
 from models import MessageFile
 
 from .builders import build_from_mapping
@@ -15,14 +22,12 @@ def build_from_message_files(
     *,
     message_files: Sequence[MessageFile],
     tenant_id: str,
-    config: FileUploadConfig | None = None,
     access_controller: FileAccessControllerProtocol,
 ) -> Sequence[File]:
     return [
         build_from_message_file(
             message_file=message_file,
             tenant_id=tenant_id,
-            config=config,
             access_controller=access_controller,
         )
         for message_file in message_files
@@ -34,7 +39,6 @@ def build_from_message_file(
     *,
     message_file: MessageFile,
     tenant_id: str,
-    config: FileUploadConfig | None,
     access_controller: FileAccessControllerProtocol,
 ) -> File:
     mapping = {
@@ -54,6 +58,5 @@ def build_from_message_file(
     return build_from_mapping(
         mapping=mapping,
         tenant_id=tenant_id,
-        config=config,
         access_controller=access_controller,
     )
diff --git a/api/factories/file_factory/validation.py b/api/factories/file_factory/validation.py
index 4c4f6150e4..8c4e7ef1d4 100644
--- a/api/factories/file_factory/validation.py
+++ b/api/factories/file_factory/validation.py
@@ -2,9 +2,25 @@
 
 from __future__ import annotations
 
+from collections.abc import Iterable
+
 from graphon.file import FileTransferMethod, FileType, FileUploadConfig
 
 
+def _normalize_extension(extension: str) -> str:
+    s = extension.strip().lower()
+    if not s:
+        return ""
+    return s if s.startswith(".") else "." + s
+
+
+def _extension_matches(extension: str, whitelist: Iterable[str]) -> bool:
+    normalized = _normalize_extension(extension)
+    if not normalized:
+        return False
+    return normalized in {_normalize_extension(e) for e in whitelist}
+
+
 def is_file_valid_with_config(
     *,
     input_file_type: str,
@@ -12,22 +28,31 @@ def is_file_valid_with_config(
     file_transfer_method: FileTransferMethod,
     config: FileUploadConfig,
 ) -> bool:
-    # FIXME(QIN2DIM): Always allow tool files (files generated by the assistant/model)
-    # These are internally generated and should bypass user upload restrictions
+    """Return whether the file is allowed by the upload config.
+
+    ``allowed_file_types`` lists the buckets a file may fall into; ``CUSTOM`` is
+    a fallback bucket gated by ``allowed_file_extensions`` (case- and
+    dot-insensitive). Tool-generated files bypass user-facing config.
+    """
     if file_transfer_method == FileTransferMethod.TOOL_FILE:
         return True
 
-    if (
-        config.allowed_file_types
-        and input_file_type not in config.allowed_file_types
-        and input_file_type != FileType.CUSTOM
-    ):
+    allowed_types = config.allowed_file_types or []
+    custom_allowed = FileType.CUSTOM in allowed_types
+    type_allowed = not allowed_types or input_file_type in allowed_types
+
+    if not type_allowed and not custom_allowed:
         return False
 
+    # When the file is in the CUSTOM bucket, the extension whitelist is authoritative.
+    # An explicitly set whitelist (including the empty list) is enforced; empty == deny —
+    # the UI never submits an empty list, so this guards against DSL/API paths that
+    # bypass the UI from accidentally widening the allowlist.
+    in_custom_bucket = input_file_type == FileType.CUSTOM or not type_allowed
     if (
-        input_file_type == FileType.CUSTOM
+        in_custom_bucket
         and config.allowed_file_extensions is not None
-        and file_extension not in config.allowed_file_extensions
+        and not _extension_matches(file_extension, config.allowed_file_extensions)
     ):
         return False
 
diff --git a/api/models/dataset.py b/api/models/dataset.py
index ed7727e0f1..f823e0aa10 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -11,7 +11,7 @@ import time
 from collections.abc import Sequence
 from datetime import datetime
 from json import JSONDecodeError
-from typing import Any, TypedDict, cast
+from typing import Any, ClassVar, TypedDict, cast
 from uuid import uuid4
 
 import sqlalchemy as sa
@@ -441,23 +441,27 @@ class Dataset(Base):
         return f"{dify_config.VECTOR_INDEX_NAME_PREFIX}_{normalized_dataset_id}_Node"
 
 
-class DatasetProcessRule(Base):  # bug
+class DatasetProcessRule(TypeBase):
     __tablename__ = "dataset_process_rules"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="dataset_process_rule_pkey"),
         sa.Index("dataset_process_rule_dataset_id_idx", "dataset_id"),
     )
 
-    id = mapped_column(StringUUID, nullable=False, default=lambda: str(uuid4()))
-    dataset_id = mapped_column(StringUUID, nullable=False)
-    mode = mapped_column(EnumText(ProcessRuleMode, length=255), nullable=False, server_default=sa.text("'automatic'"))
-    rules = mapped_column(LongText, nullable=True)
-    created_by = mapped_column(StringUUID, nullable=False)
-    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
+    id: Mapped[str] = mapped_column(StringUUID, nullable=False, default_factory=lambda: str(uuid4()), init=False)
+    dataset_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    mode: Mapped[ProcessRuleMode] = mapped_column(
+        EnumText(ProcessRuleMode, length=255), nullable=False, server_default=sa.text("'automatic'")
+    )
+    rules: Mapped[str | None] = mapped_column(LongText, nullable=True)
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime, nullable=False, server_default=func.current_timestamp(), init=False
+    )
 
     MODES = ["automatic", "custom", "hierarchical"]
     PRE_PROCESSING_RULES = ["remove_stopwords", "remove_extra_spaces", "remove_urls_emails"]
-    AUTOMATIC_RULES: AutomaticRulesConfig = {
+    AUTOMATIC_RULES: ClassVar[AutomaticRulesConfig] = {
         "pre_processing_rules": [
             {"id": "remove_extra_spaces", "enabled": True},
             {"id": "remove_urls_emails", "enabled": False},
diff --git a/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py
index f73ba01c8b..be9d64ae01 100644
--- a/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py
+++ b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/entities/langsmith_trace_entity.py
@@ -65,35 +65,18 @@ class LangSmithRunModel(LangSmithTokenUsage, LangSmithMultiModel):
         }
         file_list = values.get("file_list", [])
         if isinstance(v, str):
-            if field_name == "inputs":
-                return {
-                    "messages": {
-                        "role": "user",
-                        "content": v,
-                        "usage_metadata": usage_metadata,
-                        "file_list": file_list,
-                    },
-                }
-            elif field_name == "outputs":
-                return {
-                    "choices": {
-                        "role": "ai",
-                        "content": v,
-                        "usage_metadata": usage_metadata,
-                        "file_list": file_list,
-                    },
-                }
-        elif isinstance(v, list):
-            data = {}
-            if len(v) > 0 and isinstance(v[0], dict):
-                # rename text to content
-                v = replace_text_with_content(data=v)
-                if field_name == "inputs":
-                    data = {
-                        "messages": v,
+            match field_name:
+                case "inputs":
+                    return {
+                        "messages": {
+                            "role": "user",
+                            "content": v,
+                            "usage_metadata": usage_metadata,
+                            "file_list": file_list,
+                        },
                     }
-                elif field_name == "outputs":
-                    data = {
+                case "outputs":
+                    return {
                         "choices": {
                             "role": "ai",
                             "content": v,
@@ -101,6 +84,29 @@ class LangSmithRunModel(LangSmithTokenUsage, LangSmithMultiModel):
                             "file_list": file_list,
                         },
                     }
+                case _:
+                    pass
+        elif isinstance(v, list):
+            data = {}
+            if len(v) > 0 and isinstance(v[0], dict):
+                # rename text to content
+                v = replace_text_with_content(data=v)
+                match field_name:
+                    case "inputs":
+                        data = {
+                            "messages": v,
+                        }
+                    case "outputs":
+                        data = {
+                            "choices": {
+                                "role": "ai",
+                                "content": v,
+                                "usage_metadata": usage_metadata,
+                                "file_list": file_list,
+                            },
+                        }
+                    case _:
+                        pass
                 return data
             else:
                 return {
diff --git a/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
index 145bd70dbc..045ec44e4e 100644
--- a/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
+++ b/api/providers/trace/trace-langsmith/src/dify_trace_langsmith/langsmith_trace.py
@@ -64,7 +64,9 @@ class LangSmithDataTrace(BaseTraceInstance):
             self.generate_name_trace(trace_info)
 
     def workflow_trace(self, trace_info: WorkflowTraceInfo):
-        trace_id = trace_info.trace_id or trace_info.message_id or trace_info.workflow_run_id
+        # trace_id must equal the root run's run_id (LangSmith protocol); external trace_id
+        # cannot be used here as it would cause HTTP 400.
+        trace_id = trace_info.message_id or trace_info.workflow_run_id
         if trace_info.start_time is None:
             trace_info.start_time = datetime.now()
         message_dotted_order = (
@@ -77,6 +79,8 @@ class LangSmithDataTrace(BaseTraceInstance):
         )
         metadata = trace_info.metadata
         metadata["workflow_app_log_id"] = trace_info.workflow_app_log_id
+        if trace_info.trace_id:
+            metadata["external_trace_id"] = trace_info.trace_id
 
         if trace_info.message_id:
             message_run = LangSmithRunModel(
diff --git a/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py b/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
index ee59acb17e..edc4aafd87 100644
--- a/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
+++ b/api/providers/trace/trace-langsmith/tests/unit_tests/langsmith_trace/test_langsmith_trace.py
@@ -208,13 +208,17 @@ def test_workflow_trace(trace_instance, monkeypatch: pytest.MonkeyPatch):
 
     assert call_args[0].id == "msg-1"
     assert call_args[0].name == TraceTaskName.MESSAGE_TRACE
+    # trace_id must equal root run's id (message_id), not the external trace_id "trace-1"
+    assert call_args[0].trace_id == "msg-1"
 
     assert call_args[1].id == "run-1"
     assert call_args[1].name == TraceTaskName.WORKFLOW_TRACE
     assert call_args[1].parent_run_id == "msg-1"
+    assert call_args[1].trace_id == "msg-1"
 
     assert call_args[2].id == "node-llm"
     assert call_args[2].run_type == LangSmithRunType.llm
+    assert call_args[2].trace_id == "msg-1"
 
     assert call_args[3].id == "node-other"
     assert call_args[3].run_type == LangSmithRunType.tool
@@ -604,3 +608,83 @@ def test_get_project_url_error(trace_instance):
     trace_instance.langsmith_client.get_run_url.side_effect = Exception("error")
     with pytest.raises(ValueError, match="LangSmith get run url failed: error"):
         trace_instance.get_project_url()
+
+
+def _make_workflow_trace_info(
+    *, message_id: str | None, workflow_run_id: str, trace_id: str | None
+) -> WorkflowTraceInfo:
+    workflow_data = MagicMock()
+    workflow_data.created_at = _dt()
+    workflow_data.finished_at = _dt() + timedelta(seconds=1)
+    return WorkflowTraceInfo(
+        tenant_id="tenant-1",
+        workflow_id="wf-1",
+        workflow_run_id=workflow_run_id,
+        workflow_run_inputs={},
+        workflow_run_outputs={},
+        workflow_run_status="succeeded",
+        workflow_run_version="1.0",
+        workflow_run_elapsed_time=1.0,
+        total_tokens=0,
+        file_list=[],
+        query="q",
+        message_id=message_id,
+        conversation_id="conv-1" if message_id else None,
+        start_time=_dt(),
+        end_time=_dt() + timedelta(seconds=1),
+        trace_id=trace_id,
+        metadata={"app_id": "app-1"},
+        workflow_app_log_id=None,
+        error=None,
+        workflow_data=workflow_data,
+    )
+
+
+def _patch_workflow_trace_deps(monkeypatch, trace_instance):
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.sessionmaker", lambda bind: lambda: MagicMock())
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.db", MagicMock(engine="engine"))
+    repo = MagicMock()
+    repo.get_by_workflow_execution.return_value = []
+    factory = MagicMock()
+    factory.create_workflow_node_execution_repository.return_value = repo
+    monkeypatch.setattr("dify_trace_langsmith.langsmith_trace.DifyCoreRepositoryFactory", factory)
+    monkeypatch.setattr(trace_instance, "get_service_account_with_tenant", lambda app_id: MagicMock())
+    trace_instance.add_run = MagicMock()
+
+
+def test_workflow_trace_id_uses_message_id_not_external(trace_instance, monkeypatch):
+    """Chatflow with external trace_id: LangSmith trace_id must be message_id, not external."""
+    trace_info = _make_workflow_trace_info(
+        message_id="msg-abc",
+        workflow_run_id="run-xyz",
+        trace_id="external-999",
+    )
+    _patch_workflow_trace_deps(monkeypatch, trace_instance)
+
+    trace_instance.workflow_trace(trace_info)
+
+    calls = [c[0][0] for c in trace_instance.add_run.call_args_list]
+    # message run (root) and workflow run (child) must both use message_id as trace_id
+    assert calls[0].id == "msg-abc"
+    assert calls[0].trace_id == "msg-abc"
+    assert calls[1].id == "run-xyz"
+    assert calls[1].trace_id == "msg-abc"
+    # external_trace_id preserved in metadata
+    assert trace_info.metadata.get("external_trace_id") == "external-999"
+
+
+def test_workflow_trace_id_pure_workflow_uses_run_id(trace_instance, monkeypatch):
+    """Pure workflow (no message_id) with external trace_id: trace_id must be workflow_run_id."""
+    trace_info = _make_workflow_trace_info(
+        message_id=None,
+        workflow_run_id="run-xyz",
+        trace_id="external-999",
+    )
+    _patch_workflow_trace_deps(monkeypatch, trace_instance)
+
+    trace_instance.workflow_trace(trace_info)
+
+    calls = [c[0][0] for c in trace_instance.add_run.call_args_list]
+    # workflow run is the root; trace_id must equal its run_id
+    assert calls[0].id == "run-xyz"
+    assert calls[0].trace_id == "run-xyz"
diff --git a/api/providers/vdb/vdb-opensearch/src/dify_vdb_opensearch/opensearch_vector.py b/api/providers/vdb/vdb-opensearch/src/dify_vdb_opensearch/opensearch_vector.py
index 843c495d82..d6998f6672 100644
--- a/api/providers/vdb/vdb-opensearch/src/dify_vdb_opensearch/opensearch_vector.py
+++ b/api/providers/vdb/vdb-opensearch/src/dify_vdb_opensearch/opensearch_vector.py
@@ -81,14 +81,15 @@ class OpenSearchConfig(BaseModel):
             pool_maxsize=20,
         )
 
-        if self.auth_method == "basic":
-            logger.info("Using basic authentication for OpenSearch Vector DB")
+        match self.auth_method:
+            case AuthMethod.BASIC:
+                logger.info("Using basic authentication for OpenSearch Vector DB")
 
-            params["http_auth"] = (self.user, self.password)
-        elif self.auth_method == "aws_managed_iam":
-            logger.info("Using AWS managed IAM role for OpenSearch Vector DB")
+                params["http_auth"] = (self.user, self.password)
+            case AuthMethod.AWS_MANAGED_IAM:
+                logger.info("Using AWS managed IAM role for OpenSearch Vector DB")
 
-            params["http_auth"] = self.create_aws_managed_iam_auth()
+                params["http_auth"] = self.create_aws_managed_iam_auth()
 
         return params
 
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 6c30779f9d..604d01594e 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -6,7 +6,7 @@ requires-python = "~=3.12.0"
 dependencies = [
     # Legacy: mature and widely deployed
     "bleach>=6.3.0",
-    "boto3>=1.43.3",
+    "boto3>=1.43.6",
     "celery>=5.6.3",
     "croniter>=6.2.2",
     "flask>=3.1.3,<4.0.0",
@@ -14,8 +14,8 @@ dependencies = [
     "gevent>=26.4.0",
     "gevent-websocket>=0.10.1",
     "gmpy2>=2.3.0",
-    "google-api-python-client>=2.195.0",
-    "gunicorn>=25.3.0",
+    "google-api-python-client>=2.196.0",
+    "gunicorn>=26.0.0",
     "psycogreen>=1.0.2",
     "psycopg2-binary>=2.9.12",
     "python-socketio>=5.13.0",
@@ -31,7 +31,7 @@ dependencies = [
     "flask-migrate>=4.1.0,<5.0.0",
     "flask-orjson>=2.0.0,<3.0.0",
     "flask-restx>=1.3.2,<2.0.0",
-    "google-cloud-aiplatform>=1.149.0,<2.0.0",
+    "google-cloud-aiplatform>=1.151.0,<2.0.0",
     "httpx[socks]>=0.28.1,<1.0.0",
     "opentelemetry-distro>=0.62b1,<1.0.0",
     "opentelemetry-instrumentation-celery>=0.62b0,<1.0.0",
@@ -45,7 +45,7 @@ dependencies = [
 
     # Emerging: newer and fast-moving, use compatible pins
     "fastopenapi[flask]~=0.7.0",
-    "graphon~=0.3.0",
+    "graphon~=0.3.1",
     "httpx-sse~=0.4.0",
     "json-repair~=0.59.4",
 ]
@@ -191,7 +191,7 @@ storage = [
     "google-cloud-storage>=3.10.1",
     "opendal>=0.46.0",
     "oss2>=2.19.1",
-    "supabase>=2.29.0",
+    "supabase>=2.30.0",
     "tos>=2.9.0",
 ]
 
diff --git a/api/services/app_service.py b/api/services/app_service.py
index a046b909b3..6716833f6c 100644
--- a/api/services/app_service.py
+++ b/api/services/app_service.py
@@ -1,9 +1,10 @@
 import json
 import logging
-from typing import Any, TypedDict, cast
+from typing import Any, Literal, TypedDict, cast
 
 import sqlalchemy as sa
 from flask_sqlalchemy.pagination import Pagination
+from pydantic import BaseModel, Field
 from sqlalchemy import select
 
 from configs import dify_config
@@ -31,39 +32,59 @@ from tasks.remove_app_and_related_data_task import remove_app_and_related_data_t
 logger = logging.getLogger(__name__)
 
 
+class AppListParams(BaseModel):
+    page: int = Field(default=1, ge=1)
+    limit: int = Field(default=20, ge=1, le=100)
+    mode: Literal["completion", "chat", "advanced-chat", "workflow", "agent-chat", "channel", "all"] = "all"
+    name: str | None = None
+    tag_ids: list[str] | None = None
+    is_created_by_me: bool | None = None
+
+
+class CreateAppParams(BaseModel):
+    name: str = Field(min_length=1)
+    description: str | None = None
+    mode: Literal["chat", "agent-chat", "advanced-chat", "workflow", "completion"]
+    icon_type: str | None = None
+    icon: str | None = None
+    icon_background: str | None = None
+    api_rph: int = 0
+    api_rpm: int = 0
+    max_active_requests: int | None = None
+
+
 class AppService:
-    def get_paginate_apps(self, user_id: str, tenant_id: str, args: dict[str, Any]) -> Pagination | None:
+    def get_paginate_apps(self, user_id: str, tenant_id: str, params: AppListParams) -> Pagination | None:
         """
         Get app list with pagination
         :param user_id: user id
         :param tenant_id: tenant id
-        :param args: request args
+        :param params: query parameters
         :return:
         """
         filters = [App.tenant_id == tenant_id, App.is_universal == False]
 
-        if args["mode"] == "workflow":
+        if params.mode == "workflow":
             filters.append(App.mode == AppMode.WORKFLOW)
-        elif args["mode"] == "completion":
+        elif params.mode == "completion":
             filters.append(App.mode == AppMode.COMPLETION)
-        elif args["mode"] == "chat":
+        elif params.mode == "chat":
             filters.append(App.mode == AppMode.CHAT)
-        elif args["mode"] == "advanced-chat":
+        elif params.mode == "advanced-chat":
             filters.append(App.mode == AppMode.ADVANCED_CHAT)
-        elif args["mode"] == "agent-chat":
+        elif params.mode == "agent-chat":
             filters.append(App.mode == AppMode.AGENT_CHAT)
 
-        if args.get("is_created_by_me", False):
+        if params.is_created_by_me:
             filters.append(App.created_by == user_id)
-        if args.get("name"):
+        if params.name:
             from libs.helper import escape_like_pattern
 
-            name = args["name"][:30]
+            name = params.name[:30]
             escaped_name = escape_like_pattern(name)
             filters.append(App.name.ilike(f"%{escaped_name}%", escape="\\"))
-        # Check if tag_ids is not empty to avoid WHERE false condition
-        if args.get("tag_ids") and len(args["tag_ids"]) > 0:
-            target_ids = TagService.get_target_ids_by_tag_ids("app", tenant_id, args["tag_ids"])
+        if params.tag_ids and len(params.tag_ids) > 0:
+            target_ids = TagService.get_target_ids_by_tag_ids("app", tenant_id, params.tag_ids)
             if target_ids and len(target_ids) > 0:
                 filters.append(App.id.in_(target_ids))
             else:
@@ -71,21 +92,21 @@ class AppService:
 
         app_models = db.paginate(
             sa.select(App).where(*filters).order_by(App.created_at.desc()),
-            page=args["page"],
-            per_page=args["limit"],
+            page=params.page,
+            per_page=params.limit,
             error_out=False,
         )
 
         return app_models
 
-    def create_app(self, tenant_id: str, args: dict[str, Any], account: Account) -> App:
+    def create_app(self, tenant_id: str, params: CreateAppParams, account: Account) -> App:
         """
         Create app
         :param tenant_id: tenant id
-        :param args: request args
+        :param params: app creation parameters
         :param account: Account instance
         """
-        app_mode = AppMode.value_of(args["mode"])
+        app_mode = AppMode.value_of(params.mode)
         app_template = default_app_templates[app_mode]
 
         # get model config
@@ -143,15 +164,16 @@ class AppService:
             default_model_config["model"] = json.dumps(default_model_dict)
 
         app = App(**app_template["app"])
-        app.name = args["name"]
-        app.description = args.get("description", "")
-        app.mode = args["mode"]
-        app.icon_type = args.get("icon_type", "emoji")
-        app.icon = args["icon"]
-        app.icon_background = args["icon_background"]
+        app.name = params.name
+        app.description = params.description or ""
+        app.mode = app_mode
+        app.icon_type = IconType(params.icon_type) if params.icon_type else IconType.EMOJI
+        app.icon = params.icon
+        app.icon_background = params.icon_background
         app.tenant_id = tenant_id
-        app.api_rph = args.get("api_rph", 0)
-        app.api_rpm = args.get("api_rpm", 0)
+        app.api_rph = params.api_rph
+        app.api_rpm = params.api_rpm
+        app.max_active_requests = params.max_active_requests
         app.created_by = account.id
         app.updated_by = account.id
 
diff --git a/api/services/dataset_service.py b/api/services/dataset_service.py
index eef38f1ce2..383474f4f6 100644
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -108,7 +108,7 @@ logger = logging.getLogger(__name__)
 
 
 class ProcessRulesDict(TypedDict):
-    mode: str
+    mode: ProcessRuleMode
     rules: dict[str, Any]
 
 
@@ -204,7 +204,7 @@ class DatasetService:
             mode = dataset_process_rule.mode
             rules = dataset_process_rule.rules_dict or {}
         else:
-            mode = str(DocumentService.DEFAULT_RULES["mode"])
+            mode = ProcessRuleMode(DocumentService.DEFAULT_RULES["mode"])
             rules = dict(DocumentService.DEFAULT_RULES.get("rules") or {})
         return {"mode": mode, "rules": rules}
 
@@ -1984,7 +1984,7 @@ class DocumentService:
                         if process_rule.rules:
                             dataset_process_rule = DatasetProcessRule(
                                 dataset_id=dataset.id,
-                                mode=process_rule.mode,
+                                mode=ProcessRuleMode(process_rule.mode),
                                 rules=process_rule.rules.model_dump_json() if process_rule.rules else None,
                                 created_by=account.id,
                             )
@@ -1995,7 +1995,7 @@ class DocumentService:
                     elif process_rule.mode == ProcessRuleMode.AUTOMATIC:
                         dataset_process_rule = DatasetProcessRule(
                             dataset_id=dataset.id,
-                            mode=process_rule.mode,
+                            mode=ProcessRuleMode.AUTOMATIC,
                             rules=json.dumps(DatasetProcessRule.AUTOMATIC_RULES),
                             created_by=account.id,
                         )
@@ -2572,14 +2572,14 @@ class DocumentService:
             if process_rule.mode in {ProcessRuleMode.CUSTOM, ProcessRuleMode.HIERARCHICAL}:
                 dataset_process_rule = DatasetProcessRule(
                     dataset_id=dataset.id,
-                    mode=process_rule.mode,
+                    mode=ProcessRuleMode(process_rule.mode),
                     rules=process_rule.rules.model_dump_json() if process_rule.rules else None,
                     created_by=account.id,
                 )
             elif process_rule.mode == ProcessRuleMode.AUTOMATIC:
                 dataset_process_rule = DatasetProcessRule(
                     dataset_id=dataset.id,
-                    mode=process_rule.mode,
+                    mode=ProcessRuleMode.AUTOMATIC,
                     rules=json.dumps(DatasetProcessRule.AUTOMATIC_RULES),
                     created_by=account.id,
                 )
diff --git a/api/services/feature_service.py b/api/services/feature_service.py
index 9477c28bf3..257c4bea9a 100644
--- a/api/services/feature_service.py
+++ b/api/services/feature_service.py
@@ -166,7 +166,7 @@ class SystemFeatureModel(BaseModel):
     enable_email_code_login: bool = False
     enable_email_password_login: bool = True
     enable_social_oauth_login: bool = False
-    enable_collaboration_mode: bool = False
+    enable_collaboration_mode: bool = True
     is_allow_register: bool = False
     is_allow_create_workspace: bool = False
     is_email_setup: bool = False
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index b8c2ed5e6f..eb78e0a68b 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -1066,8 +1066,13 @@ class WorkflowService:
         )
 
         rendered_content = node.render_form_content_before_submission()
+        selected_action = next(
+            (user_action for user_action in node_data.user_actions if user_action.id == action),
+            None,
+        )
         outputs: dict[str, Any] = dict(form_inputs)
         outputs["__action_id"] = action
+        outputs["__action_value"] = selected_action.title if selected_action else ""
         outputs["__rendered_content"] = node.render_form_content_with_outputs(
             rendered_content, outputs, node_data.outputs_field_names()
         )
diff --git a/api/tests/integration_tests/workflow/nodes/test_llm.py b/api/tests/integration_tests/workflow/nodes/test_llm.py
index 92f3a1926c..5b7790f6f4 100644
--- a/api/tests/integration_tests/workflow/nodes/test_llm.py
+++ b/api/tests/integration_tests/workflow/nodes/test_llm.py
@@ -91,7 +91,11 @@ def init_llm_node(config: dict) -> LLMNode:
     return node
 
 
-def test_execute_llm():
+def _mock_db_session_close(monkeypatch) -> None:
+    monkeypatch.setattr(db.session, "close", MagicMock())
+
+
+def test_execute_llm(monkeypatch):
     node = init_llm_node(
         config={
             "id": "llm",
@@ -118,7 +122,7 @@ def test_execute_llm():
         },
     )
 
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     def build_mock_model_instance() -> MagicMock:
         from decimal import Decimal
@@ -195,7 +199,7 @@ def test_execute_llm():
                 assert item.node_run_result.outputs.get("usage", {})["total_tokens"] > 0
 
 
-def test_execute_llm_with_jinja2():
+def test_execute_llm_with_jinja2(monkeypatch):
     """
     Test execute LLM node with jinja2
     """
@@ -233,8 +237,7 @@ def test_execute_llm_with_jinja2():
         },
     )
 
-    # Mock db.session.close()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     def build_mock_model_instance() -> MagicMock:
         from decimal import Decimal
diff --git a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
index f11188323a..fc230a2a68 100644
--- a/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
+++ b/api/tests/integration_tests/workflow/nodes/test_parameter_extractor.py
@@ -83,7 +83,11 @@ def init_parameter_extractor_node(config: dict, memory=None):
     return node
 
 
-def test_function_calling_parameter_extractor(setup_model_mock):
+def _mock_db_session_close(monkeypatch) -> None:
+    monkeypatch.setattr(db.session, "close", MagicMock())
+
+
+def test_function_calling_parameter_extractor(setup_model_mock, monkeypatch):
     """
     Test function calling for parameter extractor.
     """
@@ -114,7 +118,7 @@ def test_function_calling_parameter_extractor(setup_model_mock):
         mode="chat",
         credentials={"openai_api_key": os.environ.get("OPENAI_API_KEY")},
     )()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     result = node._run()
 
@@ -124,7 +128,7 @@ def test_function_calling_parameter_extractor(setup_model_mock):
     assert result.outputs.get("__reason") == None
 
 
-def test_instructions(setup_model_mock):
+def test_instructions(setup_model_mock, monkeypatch):
     """
     Test chat parameter extractor.
     """
@@ -155,7 +159,7 @@ def test_instructions(setup_model_mock):
         mode="chat",
         credentials={"openai_api_key": os.environ.get("OPENAI_API_KEY")},
     )()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     result = node._run()
 
@@ -174,7 +178,7 @@ def test_instructions(setup_model_mock):
             assert "what's the weather in SF" in prompt.get("text")
 
 
-def test_chat_parameter_extractor(setup_model_mock):
+def test_chat_parameter_extractor(setup_model_mock, monkeypatch):
     """
     Test chat parameter extractor.
     """
@@ -205,7 +209,7 @@ def test_chat_parameter_extractor(setup_model_mock):
         mode="chat",
         credentials={"openai_api_key": os.environ.get("OPENAI_API_KEY")},
     )()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     result = node._run()
 
@@ -225,7 +229,7 @@ def test_chat_parameter_extractor(setup_model_mock):
                 assert '<structure>\n{"type": "object"' in prompt.get("text")
 
 
-def test_completion_parameter_extractor(setup_model_mock):
+def test_completion_parameter_extractor(setup_model_mock, monkeypatch):
     """
     Test completion parameter extractor.
     """
@@ -256,7 +260,7 @@ def test_completion_parameter_extractor(setup_model_mock):
         mode="completion",
         credentials={"openai_api_key": os.environ.get("OPENAI_API_KEY")},
     )()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     result = node._run()
 
@@ -350,7 +354,7 @@ def test_extract_json_from_tool_call():
     assert result["location"] == "kawaii"
 
 
-def test_chat_parameter_extractor_with_memory(setup_model_mock):
+def test_chat_parameter_extractor_with_memory(setup_model_mock, monkeypatch):
     """
     Test chat parameter extractor with memory.
     """
@@ -382,7 +386,7 @@ def test_chat_parameter_extractor_with_memory(setup_model_mock):
         mode="chat",
         credentials={"openai_api_key": os.environ.get("OPENAI_API_KEY")},
     )()
-    db.session.close = MagicMock()
+    _mock_db_session_close(monkeypatch)
 
     result = node._run()
 
diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_workflow_draft_variable.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_workflow_draft_variable.py
index 290be87697..a071d22ee9 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/app/test_workflow_draft_variable.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_workflow_draft_variable.py
@@ -168,6 +168,7 @@ def test_node_variable_collection_get_success(
     account, tenant = create_console_account_and_tenant(db_session_with_containers)
     app = create_console_app(db_session_with_containers, tenant.id, account.id, AppMode.WORKFLOW)
     node_variable = _create_node_variable(db_session_with_containers, app.id, account.id, node_id="node_123")
+    node_variable_id = node_variable.id
     _create_node_variable(db_session_with_containers, app.id, account.id, node_id="node_456", name="other")
 
     response = test_client_with_containers.get(
@@ -178,7 +179,7 @@ def test_node_variable_collection_get_success(
     assert response.status_code == 200
     payload = response.get_json()
     assert payload is not None
-    assert [item["id"] for item in payload["items"]] == [node_variable.id]
+    assert [item["id"] for item in payload["items"]] == [node_variable_id]
 
 
 def test_node_variable_collection_get_invalid_node_id(
@@ -377,6 +378,7 @@ def test_system_variable_collection_get(
     account, tenant = create_console_account_and_tenant(db_session_with_containers)
     app = create_console_app(db_session_with_containers, tenant.id, account.id, AppMode.WORKFLOW)
     variable = _create_system_variable(db_session_with_containers, app.id, account.id)
+    variable_id = variable.id
 
     response = test_client_with_containers.get(
         f"/console/api/apps/{app.id}/workflows/draft/system-variables",
@@ -386,7 +388,7 @@ def test_system_variable_collection_get(
     assert response.status_code == 200
     payload = response.get_json()
     assert payload is not None
-    assert [item["id"] for item in payload["items"]] == [variable.id]
+    assert [item["id"] for item in payload["items"]] == [variable_id]
 
 
 def test_environment_variable_collection_get(
diff --git a/api/tests/test_containers_integration_tests/controllers/console/auth/test_data_source_oauth.py b/api/tests/test_containers_integration_tests/controllers/console/auth/test_data_source_oauth.py
index 81b5423261..f2c45f76da 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/auth/test_data_source_oauth.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/auth/test_data_source_oauth.py
@@ -17,6 +17,8 @@ def test_get_oauth_url_successful(
     test_client_with_containers: FlaskClient,
 ) -> None:
     account, tenant = create_console_account_and_tenant(db_session_with_containers)
+    tenant_id = tenant.id
+    current_tenant_id = account.current_tenant_id
     provider = MagicMock()
     provider.get_authorization_url.return_value = "http://oauth.provider/auth"
 
@@ -29,7 +31,7 @@ def test_get_oauth_url_successful(
             headers=authenticate_console_client(test_client_with_containers, account),
         )
 
-    assert tenant.id == account.current_tenant_id
+    assert tenant_id == current_tenant_id
     assert response.status_code == 200
     assert response.get_json() == {"data": "http://oauth.provider/auth"}
     provider.get_authorization_url.assert_called_once()
diff --git a/api/tests/test_containers_integration_tests/controllers/console/auth/test_password_reset.py b/api/tests/test_containers_integration_tests/controllers/console/auth/test_password_reset.py
index d017e8f2bd..5fc3b3084a 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/auth/test_password_reset.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/auth/test_password_reset.py
@@ -6,6 +6,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from flask import Flask
+from sqlalchemy.orm import Session
 
 from controllers.console.auth.error import (
     EmailCodeError,
@@ -20,13 +21,15 @@ from controllers.console.auth.forgot_password import (
     ForgotPasswordSendEmailApi,
 )
 from controllers.console.error import AccountNotFound, EmailSendIpLimitError
+from tests.test_containers_integration_tests.controllers.console.helpers import ensure_dify_setup
 
 
 class TestForgotPasswordSendEmailApi:
     """Test cases for sending password reset emails."""
 
     @pytest.fixture
-    def app(self, flask_app_with_containers: Flask):
+    def app(self, flask_app_with_containers: Flask, db_session_with_containers: Session):
+        ensure_dify_setup(db_session_with_containers)
         return flask_app_with_containers
 
     @pytest.fixture
@@ -139,7 +142,8 @@ class TestForgotPasswordCheckApi:
     """Test cases for verifying password reset codes."""
 
     @pytest.fixture
-    def app(self, flask_app_with_containers: Flask):
+    def app(self, flask_app_with_containers: Flask, db_session_with_containers: Session):
+        ensure_dify_setup(db_session_with_containers)
         return flask_app_with_containers
 
     @patch("controllers.console.auth.forgot_password.AccountService.is_forgot_password_error_rate_limit")
@@ -322,7 +326,8 @@ class TestForgotPasswordResetApi:
     """Test cases for resetting password with verified token."""
 
     @pytest.fixture
-    def app(self, flask_app_with_containers: Flask):
+    def app(self, flask_app_with_containers: Flask, db_session_with_containers: Session):
+        ensure_dify_setup(db_session_with_containers)
         return flask_app_with_containers
 
     @pytest.fixture
diff --git a/api/tests/test_containers_integration_tests/services/test_agent_service.py b/api/tests/test_containers_integration_tests/services/test_agent_service.py
index cbd939c7a4..670b4d00da 100644
--- a/api/tests/test_containers_integration_tests/services/test_agent_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_agent_service.py
@@ -11,7 +11,7 @@ from models.enums import ConversationFromSource, MessageFileBelongsTo
 from models.model import AppModelConfig, Conversation, EndUser, Message, MessageAgentThought
 from services.account_service import AccountService, TenantService
 from services.agent_service import AgentService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
 
@@ -119,16 +119,16 @@ class TestAgentService:
         tenant = account.current_tenant
 
         # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "agent-chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="agent-chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/services/test_annotation_service.py b/api/tests/test_containers_integration_tests/services/test_annotation_service.py
index 95fc73f45a..bc75562d15 100644
--- a/api/tests/test_containers_integration_tests/services/test_annotation_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_annotation_service.py
@@ -9,7 +9,7 @@ from models import Account
 from models.enums import ConversationFromSource, InvokeFrom
 from models.model import MessageAnnotation
 from services.annotation_service import AppAnnotationService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
 
@@ -86,16 +86,16 @@ class TestAnnotationService:
         tenant = account.current_tenant
 
         # Setup app creation arguments
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         # Create app
         app_service = AppService()
diff --git a/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py b/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
index a5ec06dc13..c77bbd3e44 100644
--- a/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_app_dsl_service.py
@@ -37,7 +37,7 @@ from services.app_dsl_service import (
     PendingData,
     _check_version_compatibility,
 )
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
 _DEFAULT_TENANT_ID = "00000000-0000-0000-0000-000000000001"
@@ -147,16 +147,16 @@ class TestAppDslService:
             )
             TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
             tenant = account.current_tenant
-            app_args = {
-                "name": fake.company(),
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-                "api_rph": 100,
-                "api_rpm": 10,
-            }
+            app_args = CreateAppParams(
+                name=fake.company(),
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+                api_rph=100,
+                api_rpm=10,
+            )
             app_service = AppService()
             app = app_service.create_app(tenant.id, app_args, account)
             return app, account
diff --git a/api/tests/test_containers_integration_tests/services/test_app_generate_service.py b/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
index e2fe6c8476..8be4c040b7 100644
--- a/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_app_generate_service.py
@@ -1,4 +1,5 @@
 import uuid
+from typing import Literal
 from unittest.mock import ANY, MagicMock, patch
 
 import pytest
@@ -133,7 +134,10 @@ class TestAppGenerateService:
             }
 
     def _create_test_app_and_account(
-        self, db_session_with_containers: Session, mock_external_service_dependencies, mode="chat"
+        self,
+        db_session_with_containers: Session,
+        mock_external_service_dependencies,
+        mode: Literal["chat", "agent-chat", "advanced-chat", "workflow", "completion"] = "chat",
     ):
         """
         Helper method to create a test app and account for testing.
@@ -165,20 +169,20 @@ class TestAppGenerateService:
         TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
         tenant = account.current_tenant
 
-        # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": mode,
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-            "max_active_requests": 5,
-        }
+        from services.app_service import AppService, CreateAppParams
 
-        from services.app_service import AppService
+        # Create app with realistic data
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode=mode,
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+            max_active_requests=5,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/services/test_app_service.py b/api/tests/test_containers_integration_tests/services/test_app_service.py
index 837b63d1ea..c37fce296f 100644
--- a/api/tests/test_containers_integration_tests/services/test_app_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_app_service.py
@@ -2,6 +2,7 @@ from unittest.mock import create_autospec, patch
 
 import pytest
 from faker import Faker
+from pydantic import ValidationError
 from sqlalchemy.orm import Session
 
 from constants.model_template import default_app_templates
@@ -12,7 +13,7 @@ from services.account_service import AccountService, TenantService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
 # Delay import of AppService to avoid circular dependency
-# from services.app_service import AppService
+# from services.app_service import AppService, AppListParams, CreateAppParams
 
 
 class TestAppService:
@@ -64,34 +65,34 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Setup app creation arguments
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        # Import here to avoid circular dependency
+        from services.app_service import AppService, CreateAppParams
+
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         # Create app
-        # Import here to avoid circular dependency
-        from services.app_service import AppService
-
         app_service = AppService()
-        app = app_service.create_app(tenant.id, app_args, account)
+        app = app_service.create_app(tenant.id, app_params, account)
 
         # Verify app was created correctly
-        assert app.name == app_args["name"]
-        assert app.description == app_args["description"]
-        assert app.mode == app_args["mode"]
-        assert app.icon_type == app_args["icon_type"]
-        assert app.icon == app_args["icon"]
-        assert app.icon_background == app_args["icon_background"]
+        assert app.name == app_params.name
+        assert app.description == app_params.description
+        assert app.mode == app_params.mode
+        assert app.icon_type == app_params.icon_type
+        assert app.icon == app_params.icon
+        assert app.icon_background == app_params.icon_background
         assert app.tenant_id == tenant.id
-        assert app.api_rph == app_args["api_rph"]
-        assert app.api_rpm == app_args["api_rpm"]
+        assert app.api_rph == app_params.api_rph
+        assert app.api_rpm == app_params.api_rpm
         assert app.created_by == account.id
         assert app.updated_by == account.id
         assert app.status == "normal"
@@ -120,7 +121,7 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
         app_service = AppService()
 
@@ -129,20 +130,20 @@ class TestAppService:
         app_modes = [v.value for v in default_app_templates]
 
         for mode in app_modes:
-            app_args = {
-                "name": f"{fake.company()} {mode}",
-                "description": f"Test app for {mode} mode",
-                "mode": mode,
-                "icon_type": "emoji",
-                "icon": "🚀",
-                "icon_background": "#4ECDC4",
-            }
+            app_params = CreateAppParams(
+                name=f"{fake.company()} {mode}",
+                description=f"Test app for {mode} mode",
+                mode=mode,
+                icon_type="emoji",
+                icon="🚀",
+                icon_background="#4ECDC4",
+            )
 
-            app = app_service.create_app(tenant.id, app_args, account)
+            app = app_service.create_app(tenant.id, app_params, account)
 
             # Verify app mode was set correctly
             assert app.mode == mode
-            assert app.name == app_args["name"]
+            assert app.name == app_params.name
             assert app.tenant_id == tenant.id
             assert app.created_by == account.id
 
@@ -163,20 +164,20 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🎯",
-            "icon_background": "#45B7D1",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🎯",
+            icon_background="#45B7D1",
+        )
 
         app_service = AppService()
-        created_app = app_service.create_app(tenant.id, app_args, account)
+        created_app = app_service.create_app(tenant.id, app_params, account)
 
         # Get app using the service - needs current_user mock
         mock_current_user = create_autospec(Account, instance=True)
@@ -211,31 +212,27 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppListParams, AppService, CreateAppParams
 
         app_service = AppService()
 
         # Create multiple apps
         app_names = [fake.company() for _ in range(5)]
         for name in app_names:
-            app_args = {
-                "name": name,
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "📱",
-                "icon_background": "#96CEB4",
-            }
-            app_service.create_app(tenant.id, app_args, account)
+            app_params = CreateAppParams(
+                name=name,
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="📱",
+                icon_background="#96CEB4",
+            )
+            app_service.create_app(tenant.id, app_params, account)
 
         # Get paginated apps
-        args = {
-            "page": 1,
-            "limit": 10,
-            "mode": "chat",
-        }
+        params = AppListParams(page=1, limit=10, mode="chat")
 
-        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, params)
 
         # Verify pagination results
         assert paginated_apps is not None
@@ -267,60 +264,47 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppListParams, AppService, CreateAppParams
 
         app_service = AppService()
 
         # Create apps with different modes
-        chat_app_args = {
-            "name": "Chat App",
-            "description": "A chat application",
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "💬",
-            "icon_background": "#FF6B6B",
-        }
-        completion_app_args = {
-            "name": "Completion App",
-            "description": "A completion application",
-            "mode": "completion",
-            "icon_type": "emoji",
-            "icon": "✍️",
-            "icon_background": "#4ECDC4",
-        }
+        chat_app_params = CreateAppParams(
+            name="Chat App",
+            description="A chat application",
+            mode="chat",
+            icon_type="emoji",
+            icon="💬",
+            icon_background="#FF6B6B",
+        )
+        completion_app_params = CreateAppParams(
+            name="Completion App",
+            description="A completion application",
+            mode="completion",
+            icon_type="emoji",
+            icon="✍️",
+            icon_background="#4ECDC4",
+        )
 
-        chat_app = app_service.create_app(tenant.id, chat_app_args, account)
-        completion_app = app_service.create_app(tenant.id, completion_app_args, account)
+        chat_app = app_service.create_app(tenant.id, chat_app_params, account)
+        completion_app = app_service.create_app(tenant.id, completion_app_params, account)
 
         # Test filter by mode
-        chat_args = {
-            "page": 1,
-            "limit": 10,
-            "mode": "chat",
-        }
-        chat_apps = app_service.get_paginate_apps(account.id, tenant.id, chat_args)
+        chat_apps = app_service.get_paginate_apps(account.id, tenant.id, AppListParams(page=1, limit=10, mode="chat"))
         assert len(chat_apps.items) == 1
         assert chat_apps.items[0].mode == "chat"
 
         # Test filter by name
-        name_args = {
-            "page": 1,
-            "limit": 10,
-            "mode": "chat",
-            "name": "Chat",
-        }
-        filtered_apps = app_service.get_paginate_apps(account.id, tenant.id, name_args)
+        filtered_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(page=1, limit=10, mode="chat", name="Chat")
+        )
         assert len(filtered_apps.items) == 1
         assert "Chat" in filtered_apps.items[0].name
 
         # Test filter by created_by_me
-        created_by_me_args = {
-            "page": 1,
-            "limit": 10,
-            "mode": "completion",
-            "is_created_by_me": True,
-        }
-        my_apps = app_service.get_paginate_apps(account.id, tenant.id, created_by_me_args)
+        my_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(page=1, limit=10, mode="completion", is_created_by_me=True)
+        )
         assert len(my_apps.items) == 1
 
     def test_get_paginate_apps_with_tag_filters(
@@ -342,34 +326,29 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppListParams, AppService, CreateAppParams
 
         app_service = AppService()
 
         # Create an app
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🏷️",
-            "icon_background": "#FFEAA7",
-        }
-        app = app_service.create_app(tenant.id, app_args, account)
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🏷️",
+            icon_background="#FFEAA7",
+        )
+        app = app_service.create_app(tenant.id, app_params, account)
 
         # Mock TagService to return the app ID for tag filtering
         with patch("services.app_service.TagService.get_target_ids_by_tag_ids") as mock_tag_service:
             mock_tag_service.return_value = [app.id]
 
             # Test with tag filter
-            args = {
-                "page": 1,
-                "limit": 10,
-                "mode": "chat",
-                "tag_ids": ["tag1", "tag2"],
-            }
+            params = AppListParams(page=1, limit=10, mode="chat", tag_ids=["tag1", "tag2"])
 
-            paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+            paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, params)
 
             # Verify tag service was called
             mock_tag_service.assert_called_once_with("app", tenant.id, ["tag1", "tag2"])
@@ -383,14 +362,9 @@ class TestAppService:
         with patch("services.app_service.TagService.get_target_ids_by_tag_ids") as mock_tag_service:
             mock_tag_service.return_value = []
 
-            args = {
-                "page": 1,
-                "limit": 10,
-                "mode": "chat",
-                "tag_ids": ["nonexistent_tag"],
-            }
+            params = AppListParams(page=1, limit=10, mode="chat", tag_ids=["nonexistent_tag"])
 
-            paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+            paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, params)
 
             # Should return None when no apps match tag filter
             assert paginated_apps is None
@@ -412,20 +386,20 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🎯",
-            "icon_background": "#45B7D1",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🎯",
+            icon_background="#45B7D1",
+        )
 
         app_service = AppService()
-        app = app_service.create_app(tenant.id, app_args, account)
+        app = app_service.create_app(tenant.id, app_params, account)
 
         # Store original values
         original_name = app.name
@@ -481,19 +455,19 @@ class TestAppService:
         TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
         tenant = account.current_tenant
 
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
         app_service = AppService()
         app = app_service.create_app(
             tenant.id,
-            {
-                "name": fake.company(),
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🎯",
-                "icon_background": "#45B7D1",
-            },
+            CreateAppParams(
+                name=fake.company(),
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🎯",
+                icon_background="#45B7D1",
+            ),
             account,
         )
 
@@ -533,19 +507,19 @@ class TestAppService:
         TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
         tenant = account.current_tenant
 
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
         app_service = AppService()
         app = app_service.create_app(
             tenant.id,
-            {
-                "name": fake.company(),
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🎯",
-                "icon_background": "#45B7D1",
-            },
+            CreateAppParams(
+                name=fake.company(),
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🎯",
+                icon_background="#45B7D1",
+            ),
             account,
         )
 
@@ -584,20 +558,20 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🎯",
-            "icon_background": "#45B7D1",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🎯",
+            icon_background="#45B7D1",
+        )
 
         app_service = AppService()
-        app = app_service.create_app(tenant.id, app_args, account)
+        app = app_service.create_app(tenant.id, app_params, account)
 
         # Store original name
         original_name = app.name
@@ -637,20 +611,20 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🎯",
-            "icon_background": "#45B7D1",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        app_params = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🎯",
+            icon_background="#45B7D1",
+        )
 
         app_service = AppService()
-        app = app_service.create_app(tenant.id, app_args, account)
+        app = app_service.create_app(tenant.id, app_params, account)
 
         # Store original values
         original_icon = app.icon
@@ -698,18 +672,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🌐",
-            "icon_background": "#74B9FF",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🌐",
+            icon_background="#74B9FF",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -758,18 +731,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🔌",
-            "icon_background": "#A29BFE",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🔌",
+            icon_background="#A29BFE",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -818,18 +790,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🔄",
-            "icon_background": "#FD79A8",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🔄",
+            icon_background="#FD79A8",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -869,18 +840,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🗑️",
-            "icon_background": "#E17055",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🗑️",
+            icon_background="#E17055",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -921,18 +891,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🧹",
-            "icon_background": "#00B894",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🧹",
+            icon_background="#00B894",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -981,18 +950,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "📊",
-            "icon_background": "#6C5CE7",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="📊",
+            icon_background="#6C5CE7",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -1020,18 +988,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🔗",
-            "icon_background": "#FDCB6E",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🔗",
+            icon_background="#FDCB6E",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -1060,18 +1027,17 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Create app first
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🆔",
-            "icon_background": "#E84393",
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
 
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🆔",
+            icon_background="#E84393",
+        )
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
 
@@ -1107,26 +1073,20 @@ class TestAppService:
             password=generate_valid_password(fake),
         )
         TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
-        tenant = account.current_tenant
-
-        # Setup app creation arguments with invalid mode
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "invalid_mode",  # Invalid mode
-            "icon_type": "emoji",
-            "icon": "❌",
-            "icon_background": "#D63031",
-        }
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import CreateAppParams
 
-        app_service = AppService()
-
-        # Attempt to create app with invalid mode
-        with pytest.raises(ValueError, match="invalid mode value"):
-            app_service.create_app(tenant.id, app_args, account)
+        # Attempt to create app with invalid mode - Pydantic will reject invalid literal
+        with pytest.raises(ValidationError):
+            CreateAppParams(
+                name=fake.company(),
+                description=fake.text(max_nb_chars=100),
+                mode="invalid_mode",  # type: ignore[arg-type]
+                icon_type="emoji",
+                icon="❌",
+                icon_background="#D63031",
+            )
 
     def test_get_apps_with_special_characters_in_name(
         self, db_session_with_containers: Session, mock_external_service_dependencies
@@ -1152,99 +1112,103 @@ class TestAppService:
         tenant = account.current_tenant
 
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppListParams, AppService, CreateAppParams
 
         app_service = AppService()
 
         # Create apps with special characters in names
         app_with_percent = app_service.create_app(
             tenant.id,
-            {
-                "name": "App with 50% discount",
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-                "api_rph": 100,
-                "api_rpm": 10,
-            },
+            CreateAppParams(
+                name="App with 50% discount",
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+                api_rph=100,
+                api_rpm=10,
+            ),
             account,
         )
 
         app_with_underscore = app_service.create_app(
             tenant.id,
-            {
-                "name": "test_data_app",
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-                "api_rph": 100,
-                "api_rpm": 10,
-            },
+            CreateAppParams(
+                name="test_data_app",
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+                api_rph=100,
+                api_rpm=10,
+            ),
             account,
         )
 
         app_with_backslash = app_service.create_app(
             tenant.id,
-            {
-                "name": "path\\to\\app",
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-                "api_rph": 100,
-                "api_rpm": 10,
-            },
+            CreateAppParams(
+                name="path\\to\\app",
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+                api_rph=100,
+                api_rpm=10,
+            ),
             account,
         )
 
         # Create app that should NOT match
         app_no_match = app_service.create_app(
             tenant.id,
-            {
-                "name": "100% different",
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-                "api_rph": 100,
-                "api_rpm": 10,
-            },
+            CreateAppParams(
+                name="100% different",
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+                api_rph=100,
+                api_rpm=10,
+            ),
             account,
         )
 
         # Test 1: Search with % character
-        args = {"name": "50%", "mode": "chat", "page": 1, "limit": 10}
-        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+        paginated_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(name="50%", mode="chat", page=1, limit=10)
+        )
         assert paginated_apps is not None
         assert paginated_apps.total == 1
         assert len(paginated_apps.items) == 1
         assert paginated_apps.items[0].name == "App with 50% discount"
 
         # Test 2: Search with _ character
-        args = {"name": "test_data", "mode": "chat", "page": 1, "limit": 10}
-        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+        paginated_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(name="test_data", mode="chat", page=1, limit=10)
+        )
         assert paginated_apps is not None
         assert paginated_apps.total == 1
         assert len(paginated_apps.items) == 1
         assert paginated_apps.items[0].name == "test_data_app"
 
         # Test 3: Search with \ character
-        args = {"name": "path\\to\\app", "mode": "chat", "page": 1, "limit": 10}
-        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+        paginated_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(name="path\\to\\app", mode="chat", page=1, limit=10)
+        )
         assert paginated_apps is not None
         assert paginated_apps.total == 1
         assert len(paginated_apps.items) == 1
         assert paginated_apps.items[0].name == "path\\to\\app"
 
         # Test 4: Search with % should NOT match 100% (verifies escaping works)
-        args = {"name": "50%", "mode": "chat", "page": 1, "limit": 10}
-        paginated_apps = app_service.get_paginate_apps(account.id, tenant.id, args)
+        paginated_apps = app_service.get_paginate_apps(
+            account.id, tenant.id, AppListParams(name="50%", mode="chat", page=1, limit=10)
+        )
         assert paginated_apps is not None
         assert paginated_apps.total == 1
         assert all("50%" in app.name for app in paginated_apps.items)
diff --git a/api/tests/test_containers_integration_tests/services/test_dataset_service_retrieval.py b/api/tests/test_containers_integration_tests/services/test_dataset_service_retrieval.py
index 2f90d16176..0c610311bb 100644
--- a/api/tests/test_containers_integration_tests/services/test_dataset_service_retrieval.py
+++ b/api/tests/test_containers_integration_tests/services/test_dataset_service_retrieval.py
@@ -16,6 +16,7 @@ from uuid import uuid4
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
+from models import AccountStatus, CreatorUserRole, TenantStatus
 from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
 from models.dataset import (
     AppDatasetJoin,
@@ -25,7 +26,7 @@ from models.dataset import (
     DatasetProcessRule,
     DatasetQuery,
 )
-from models.enums import DatasetQuerySource, DataSourceType, ProcessRuleMode
+from models.enums import DatasetQuerySource, DataSourceType, ProcessRuleMode, TagType
 from models.model import Tag, TagBinding
 from services.dataset_service import DatasetService, DocumentService
 
@@ -42,11 +43,11 @@ class DatasetRetrievalTestDataFactory:
             email=f"{uuid4()}@example.com",
             name=f"user-{uuid4()}",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         tenant = Tenant(
             name=f"tenant-{uuid4()}",
-            status="normal",
+            status=TenantStatus.NORMAL,
         )
         db_session_with_containers.add_all([account, tenant])
         db_session_with_containers.flush()
@@ -72,7 +73,7 @@ class DatasetRetrievalTestDataFactory:
             email=f"{uuid4()}@example.com",
             name=f"user-{uuid4()}",
             interface_language="en-US",
-            status="active",
+            status=AccountStatus.ACTIVE,
         )
         db_session_with_containers.add(account)
         db_session_with_containers.flush()
@@ -130,7 +131,7 @@ class DatasetRetrievalTestDataFactory:
 
     @staticmethod
     def create_process_rule(
-        db_session_with_containers: Session, dataset_id: str, created_by: str, mode: str, rules: dict
+        db_session_with_containers: Session, dataset_id: str, created_by: str, mode: ProcessRuleMode, rules: dict
     ) -> DatasetProcessRule:
         """Create a dataset process rule."""
         process_rule = DatasetProcessRule(
@@ -153,7 +154,7 @@ class DatasetRetrievalTestDataFactory:
             content=content,
             source=DatasetQuerySource.APP,
             source_app_id=None,
-            created_by_role="account",
+            created_by_role=CreatorUserRole.ACCOUNT,
             created_by=created_by,
         )
         db_session_with_containers.add(dataset_query)
@@ -176,7 +177,7 @@ class DatasetRetrievalTestDataFactory:
         """Create a knowledge tag and bind it to the target dataset."""
         tag = Tag(
             tenant_id=tenant_id,
-            type="knowledge",
+            type=TagType.KNOWLEDGE,
             name=f"tag-{uuid4()}",
             created_by=created_by,
         )
diff --git a/api/tests/test_containers_integration_tests/services/test_message_service.py b/api/tests/test_containers_integration_tests/services/test_message_service.py
index bdf6d9b951..6d0d281c6b 100644
--- a/api/tests/test_containers_integration_tests/services/test_message_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_message_service.py
@@ -6,7 +6,7 @@ from sqlalchemy.orm import Session
 
 from models.enums import ConversationFromSource, FeedbackRating, InvokeFrom
 from models.model import MessageFeedback
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.errors.message import (
     FirstMessageNotExistsError,
     LastMessageNotExistsError,
@@ -103,16 +103,16 @@ class TestMessageService:
         tenant = account.current_tenant
 
         # Setup app creation arguments
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "advanced-chat",  # Use advanced-chat mode to use mocked workflow
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="advanced-chat",  # Use advanced-chat mode to use mocked workflow,
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         # Create app
         app_service = AppService()
diff --git a/api/tests/test_containers_integration_tests/services/test_ops_service.py b/api/tests/test_containers_integration_tests/services/test_ops_service.py
index e2e1a228b2..ff76bce416 100644
--- a/api/tests/test_containers_integration_tests/services/test_ops_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_ops_service.py
@@ -11,7 +11,7 @@ from sqlalchemy.orm import Session
 from core.ops.entities.config_entity import TracingProviderEnum
 from models.model import TraceAppConfig
 from services.account_service import AccountService, TenantService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.ops_service import OpsService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -57,14 +57,14 @@ class TestOpsService:
         app_service = AppService()
         app = app_service.create_app(
             tenant.id,
-            {
-                "name": fake.company(),
-                "description": fake.text(max_nb_chars=100),
-                "mode": "chat",
-                "icon_type": "emoji",
-                "icon": "🤖",
-                "icon_background": "#FF6B6B",
-            },
+            CreateAppParams(
+                name=fake.company(),
+                description=fake.text(max_nb_chars=100),
+                mode="chat",
+                icon_type="emoji",
+                icon="🤖",
+                icon_background="#FF6B6B",
+            ),
             account,
         )
         return app, account
diff --git a/api/tests/test_containers_integration_tests/services/test_saved_message_service.py b/api/tests/test_containers_integration_tests/services/test_saved_message_service.py
index 7b9e9924cd..7368ad4249 100644
--- a/api/tests/test_containers_integration_tests/services/test_saved_message_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_saved_message_service.py
@@ -8,7 +8,7 @@ from models import App, CreatorUserRole
 from models.enums import ConversationFromSource
 from models.model import EndUser, Message
 from models.web import SavedMessage
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.saved_message_service import SavedMessageService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -73,16 +73,16 @@ class TestSavedMessageService:
         tenant = account.current_tenant
 
         # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/services/test_web_conversation_service.py b/api/tests/test_containers_integration_tests/services/test_web_conversation_service.py
index 797731d04b..8e53a2d6cd 100644
--- a/api/tests/test_containers_integration_tests/services/test_web_conversation_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_web_conversation_service.py
@@ -11,7 +11,7 @@ from models.enums import ConversationFromSource
 from models.model import Conversation, EndUser
 from models.web import PinnedConversation
 from services.account_service import AccountService, TenantService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.web_conversation_service import WebConversationService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -77,16 +77,16 @@ class TestWebConversationService:
         tenant = account.current_tenant
 
         # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py b/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
index a2cdddad61..07a49130d0 100644
--- a/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_workflow_app_service.py
@@ -17,7 +17,7 @@ from models.workflow import WorkflowAppLogCreatedFrom
 from services.account_service import AccountService, TenantService
 
 # Delay import of AppService to avoid circular dependency
-# from services.app_service import AppService
+# from services.app_service import AppService, CreateAppParams
 from services.workflow_app_service import LogView, WorkflowAppService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -82,20 +82,20 @@ class TestWorkflowAppService:
         TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
         tenant = account.current_tenant
 
-        # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "workflow",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        # Create app with realistic data
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="workflow",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
@@ -146,20 +146,20 @@ class TestWorkflowAppService:
         """
         fake = Faker()
 
-        # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "workflow",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
-
         # Import here to avoid circular dependency
-        from services.app_service import AppService
+        from services.app_service import AppService, CreateAppParams
+
+        # Create app with realistic data
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="workflow",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/services/test_workflow_run_service.py b/api/tests/test_containers_integration_tests/services/test_workflow_run_service.py
index d02a078281..09fe1570bc 100644
--- a/api/tests/test_containers_integration_tests/services/test_workflow_run_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_workflow_run_service.py
@@ -13,7 +13,7 @@ from models.model import (
 )
 from models.workflow import WorkflowRun
 from services.account_service import AccountService, TenantService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.workflow_run_service import WorkflowRunService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -79,16 +79,16 @@ class TestWorkflowRunService:
         tenant = account.current_tenant
 
         # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="chat",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
@@ -535,13 +535,13 @@ class TestWorkflowRunService:
         tenant = account.current_tenant
 
         # Create app
-        app_args = {
-            "name": "Test App",
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🚀",
-            "icon_background": "#4ECDC4",
-        }
+        app_args = CreateAppParams(
+            name="Test App",
+            mode="chat",
+            icon_type="emoji",
+            icon="🚀",
+            icon_background="#4ECDC4",
+        )
         app = app_service.create_app(tenant.id, app_args, account)
 
         # Create workflow run without node executions
@@ -586,13 +586,13 @@ class TestWorkflowRunService:
         tenant = account.current_tenant
 
         # Create app
-        app_args = {
-            "name": "Test App",
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🚀",
-            "icon_background": "#4ECDC4",
-        }
+        app_args = CreateAppParams(
+            name="Test App",
+            mode="chat",
+            icon_type="emoji",
+            icon="🚀",
+            icon_background="#4ECDC4",
+        )
         app = app_service.create_app(tenant.id, app_args, account)
 
         # Use invalid workflow run ID
@@ -637,13 +637,13 @@ class TestWorkflowRunService:
         tenant = account.current_tenant
 
         # Create app
-        app_args = {
-            "name": "Test App",
-            "mode": "chat",
-            "icon_type": "emoji",
-            "icon": "🚀",
-            "icon_background": "#4ECDC4",
-        }
+        app_args = CreateAppParams(
+            name="Test App",
+            mode="chat",
+            icon_type="emoji",
+            icon="🚀",
+            icon_background="#4ECDC4",
+        )
         app = app_service.create_app(tenant.id, app_args, account)
 
         # Create workflow run
diff --git a/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py b/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
index 21a1975879..9b574fe2df 100644
--- a/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
+++ b/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
@@ -11,7 +11,7 @@ from core.tools.errors import WorkflowToolHumanInputNotSupportedError
 from models.tools import WorkflowToolProvider
 from models.workflow import Workflow as WorkflowModel
 from services.account_service import AccountService, TenantService
-from services.app_service import AppService
+from services.app_service import AppService, CreateAppParams
 from services.tools.workflow_tools_manage_service import WorkflowToolManageService
 from tests.test_containers_integration_tests.helpers import generate_valid_password
 
@@ -94,16 +94,16 @@ class TestWorkflowToolManageService:
         tenant = account.current_tenant
 
         # Create app with realistic data
-        app_args = {
-            "name": fake.company(),
-            "description": fake.text(max_nb_chars=100),
-            "mode": "workflow",
-            "icon_type": "emoji",
-            "icon": "🤖",
-            "icon_background": "#FF6B6B",
-            "api_rph": 100,
-            "api_rpm": 10,
-        }
+        app_args = CreateAppParams(
+            name=fake.company(),
+            description=fake.text(max_nb_chars=100),
+            mode="workflow",
+            icon_type="emoji",
+            icon="🤖",
+            icon_background="#FF6B6B",
+            api_rph=100,
+            api_rpm=10,
+        )
 
         app_service = AppService()
         app = app_service.create_app(tenant.id, app_args, account)
diff --git a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
index 6bfb1e1f1e..6a95bfc425 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
@@ -7,6 +7,7 @@ The task is responsible for removing document segments from the search index whe
 """
 
 from unittest.mock import MagicMock, patch
+from uuid import uuid4
 
 from faker import Faker
 from sqlalchemy import select
@@ -82,7 +83,7 @@ class TestDisableSegmentsFromIndexTask:
 
         return account
 
-    def _create_test_dataset(self, db_session_with_containers: Session, account, fake: Faker | None = None):
+    def _create_test_dataset(self, db_session_with_containers: Session, account: Account, fake: Faker | None = None):
         """
         Helper method to create a test dataset with realistic data.
 
@@ -117,7 +118,7 @@ class TestDisableSegmentsFromIndexTask:
         return dataset
 
     def _create_test_document(
-        self, db_session_with_containers: Session, dataset, account: Account, fake: Faker | None = None
+        self, db_session_with_containers: Session, dataset: Dataset, account: Account, fake: Faker | None = None
     ):
         """
         Helper method to create a test document with realistic data.
@@ -164,7 +165,7 @@ class TestDisableSegmentsFromIndexTask:
         return document
 
     def _create_test_segments(
-        self, db_session_with_containers: Session, document, dataset, account, count=3, fake=None
+        self, db_session_with_containers: Session, document, dataset: Dataset, account: Account, count=3, fake=None
     ):
         """
         Helper method to create test document segments with realistic data.
@@ -217,7 +218,9 @@ class TestDisableSegmentsFromIndexTask:
 
         return segments
 
-    def _create_dataset_process_rule(self, db_session_with_containers: Session, dataset, fake: Faker | None = None):
+    def _create_dataset_process_rule(
+        self, db_session_with_containers: Session, dataset: Dataset, fake: Faker | None = None
+    ):
         """
         Helper method to create a dataset process rule.
 
@@ -230,21 +233,19 @@ class TestDisableSegmentsFromIndexTask:
             DatasetProcessRule: Created process rule instance
         """
         fake = fake or Faker()
-        process_rule = DatasetProcessRule()
-        process_rule.id = fake.uuid4()
-        process_rule.tenant_id = dataset.tenant_id
-        process_rule.dataset_id = dataset.id
-        process_rule.mode = ProcessRuleMode.AUTOMATIC
-        process_rule.rules = (
-            "{"
-            '"mode": "automatic", '
-            '"rules": {'
-            '"pre_processing_rules": [], "segmentation": '
-            '{"separator": "\\n\\n", "max_tokens": 1000, "chunk_overlap": 50}}'
-            "}"
+        process_rule = DatasetProcessRule(
+            dataset_id=dataset.id,
+            mode=ProcessRuleMode.AUTOMATIC,
+            rules=(
+                "{"
+                '"mode": "automatic", '
+                '"rules": {'
+                '"pre_processing_rules": [], "segmentation": '
+                '{"separator": "\\n\\n", "max_tokens": 1000, "chunk_overlap": 50}}'
+                "}"
+            ),
+            created_by=str(uuid4()),
         )
-        process_rule.created_by = dataset.created_by
-        process_rule.updated_by = dataset.updated_by
 
         db_session_with_containers.add(process_rule)
         db_session_with_containers.commit()
diff --git a/api/tests/unit_tests/core/memory/test_token_buffer_memory.py b/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
index f459250b8e..72c24bda96 100644
--- a/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
+++ b/api/tests/unit_tests/core/memory/test_token_buffer_memory.py
@@ -198,6 +198,48 @@ class TestBuildPromptMessageWithFiles:
         assert isinstance(result.content[-1], TextPromptMessageContent)
         assert result.content[-1].data == "user text"
 
+    def test_replay_does_not_pass_config_to_file_factory(self):
+        """Replay contract: history files were validated on upload, so this
+        path must not forward a FileUploadConfig. The factory's signature
+        no longer accepts ``config``; this test guards against a future
+        regression that re-introduces it."""
+        conv = _make_conversation(AppMode.CHAT)
+        mem = TokenBufferMemory(conversation=conv, model_instance=_make_model_instance())
+
+        mock_file_extra_config = MagicMock()
+        mock_file_extra_config.image_config = None
+
+        real_image_content = ImagePromptMessageContent(
+            url="http://example.com/img.png", format="png", mime_type="image/png"
+        )
+        mock_app_record = MagicMock()
+        mock_app_record.tenant_id = "tenant-1"
+
+        with (
+            patch(
+                "core.memory.token_buffer_memory.FileUploadConfigManager.convert",
+                return_value=mock_file_extra_config,
+            ),
+            patch(
+                "core.memory.token_buffer_memory.file_factory.build_from_message_file",
+                return_value=MagicMock(),
+            ) as mock_build,
+            patch(
+                "core.memory.token_buffer_memory.file_manager.to_prompt_message_content",
+                return_value=real_image_content,
+            ),
+        ):
+            mem._build_prompt_message_with_files(
+                message_files=[MagicMock()],
+                text_content="user text",
+                message=_make_message(),
+                app_record=mock_app_record,
+                is_user_message=True,
+            )
+
+        mock_build.assert_called_once()
+        assert "config" not in mock_build.call_args.kwargs
+
     @pytest.mark.parametrize("mode", [AppMode.CHAT, AppMode.AGENT_CHAT, AppMode.COMPLETION])
     def test_chat_mode_with_files_assistant_message(self, mode):
         """When files are present, returns AssistantPromptMessage with list content."""
diff --git a/api/tests/unit_tests/core/variables/test_segment_type.py b/api/tests/unit_tests/core/variables/test_segment_type.py
index baa2ac2dc7..009899a92d 100644
--- a/api/tests/unit_tests/core/variables/test_segment_type.py
+++ b/api/tests/unit_tests/core/variables/test_segment_type.py
@@ -233,8 +233,6 @@ class TestSegmentTypeAdditionalMethods:
         assert SegmentType.GROUP.is_valid([StringSegment(value="b")]) is True
         assert SegmentType.GROUP.is_valid(["not-segment"]) is False
 
-    def test_unreachable_assertion_branch(self, monkeypatch: pytest.MonkeyPatch):
-        monkeypatch.setattr(SegmentType, "is_array_type", lambda self: False)
-
-        with pytest.raises(AssertionError, match="unreachable"):
-            SegmentType.ARRAY_STRING.is_valid(["a"])
+    def test_unreachable_assertion_branch(self):
+        with pytest.raises(AssertionError, match="Expected code to be unreachable"):
+            SegmentType.is_valid("not-a-segment-type", None)  # type: ignore[arg-type]
diff --git a/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py b/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
index 212ad07bd3..6a2fc81fef 100644
--- a/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
+++ b/api/tests/unit_tests/core/workflow/nodes/llm/test_llm_utils.py
@@ -613,7 +613,7 @@ def test_combine_message_content_with_role_handles_all_supported_roles():
         SystemPromptMessage(content=contents)
     )
 
-    with pytest.raises(NotImplementedError, match="Role custom is not supported"):
+    with pytest.raises(AssertionError, match="Expected code to be unreachable"):
         llm_utils.combine_message_content_with_role(contents=contents, role="custom")  # type: ignore[arg-type]
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py b/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
index 4aa5803ac7..f17c95fc13 100644
--- a/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/tool/test_tool_node.py
@@ -24,7 +24,14 @@ if TYPE_CHECKING:  # pragma: no cover - imported for type checking only
 
 
 class _StubToolRuntime:
-    def get_runtime(self, *, node_id: str, node_data: Any, variable_pool: Any) -> ToolRuntimeHandle:
+    def get_runtime(
+        self,
+        *,
+        node_id: str,
+        node_data: Any,
+        variable_pool: Any,
+        node_execution_id: str | None = None,
+    ) -> ToolRuntimeHandle:
         raise NotImplementedError
 
     def get_runtime_parameters(self, *, tool_runtime: ToolRuntimeHandle) -> list[Any]:
diff --git a/api/tests/unit_tests/core/workflow/test_node_mapping_bootstrap.py b/api/tests/unit_tests/core/workflow/test_node_mapping_bootstrap.py
index d18fc262ef..2dd3953d9a 100644
--- a/api/tests/unit_tests/core/workflow/test_node_mapping_bootstrap.py
+++ b/api/tests/unit_tests/core/workflow/test_node_mapping_bootstrap.py
@@ -7,6 +7,17 @@ from pathlib import Path
 
 def test_moved_core_nodes_resolve_after_importing_production_entrypoints():
     api_root = Path(__file__).resolve().parents[4]
+
+    # `PYTHONSAFEPATH=1` enables Python's safe-path mode, which suppresses the
+    # usual implicit insertion of the working directory into `sys.path`.
+    # Set `PYTHONPATH` explicitly so this subprocess test stays deterministic in
+    # both CI and local shells that may export `PYTHONSAFEPATH`.
+    env = os.environ.copy()
+    existing_pythonpath = env.get("PYTHONPATH")
+    env["PYTHONPATH"] = (
+        str(api_root) if not existing_pythonpath else os.pathsep.join([str(api_root), existing_pythonpath])
+    )
+    env["PYTHONSAFEPATH"] = "1"
     script = textwrap.dedent(
         """
         from core.app.apps import workflow_app_runner
@@ -34,7 +45,7 @@ def test_moved_core_nodes_resolve_after_importing_production_entrypoints():
     completed = subprocess.run(
         [sys.executable, "-c", script],
         cwd=api_root,
-        env=os.environ.copy(),
+        env=env,
         capture_output=True,
         text=True,
         check=False,
diff --git a/api/tests/unit_tests/factories/test_file_validation.py b/api/tests/unit_tests/factories/test_file_validation.py
new file mode 100644
index 0000000000..61337fcf10
--- /dev/null
+++ b/api/tests/unit_tests/factories/test_file_validation.py
@@ -0,0 +1,159 @@
+"""Unit tests for is_file_valid_with_config."""
+
+from __future__ import annotations
+
+import pytest
+
+from factories.file_factory.validation import is_file_valid_with_config
+from graphon.file import FileTransferMethod, FileType, FileUploadConfig
+
+
+def _validate(
+    *,
+    input_file_type: str,
+    file_extension: str = ".png",
+    file_transfer_method: FileTransferMethod = FileTransferMethod.LOCAL_FILE,
+    config: FileUploadConfig,
+) -> bool:
+    return is_file_valid_with_config(
+        input_file_type=input_file_type,
+        file_extension=file_extension,
+        file_transfer_method=file_transfer_method,
+        config=config,
+    )
+
+
+@pytest.mark.parametrize(
+    ("input_file_type", "file_extension", "allowed_file_types", "allowed_file_extensions", "expected"),
+    [
+        # round-1 happy path: literal "custom" mapping, ext whitelisted
+        ("custom", ".png", [FileType.CUSTOM], [".png"], True),
+        # round-2 replay: MessageFile.type is the resolved type, but config still allows CUSTOM
+        ("image", ".png", [FileType.CUSTOM], [".png"], True),
+        ("document", ".pdf", [FileType.CUSTOM], [".pdf"], True),
+        # mixed bucket [IMAGE, CUSTOM]: document falls into CUSTOM bucket via extension
+        ("document", ".pdf", [FileType.IMAGE, FileType.CUSTOM], [".pdf"], True),
+        ("document", ".exe", [FileType.IMAGE, FileType.CUSTOM], [".pdf"], False),
+        ("image", ".jpg", [FileType.IMAGE], [], True),
+        ("video", ".mp4", [FileType.IMAGE, FileType.DOCUMENT], [], False),
+        ("custom", ".exe", [FileType.CUSTOM], [".png"], False),
+        # empty allowed_file_types == no type restriction
+        ("video", ".mp4", [], [], True),
+    ],
+)
+def test_bucket_semantics(input_file_type, file_extension, allowed_file_types, allowed_file_extensions, expected):
+    config = FileUploadConfig(
+        allowed_file_types=allowed_file_types,
+        allowed_file_extensions=allowed_file_extensions,
+    )
+    assert _validate(input_file_type=input_file_type, file_extension=file_extension, config=config) is expected
+
+
+@pytest.mark.parametrize("whitelist_entry", [".png", ".PNG", "png", "PNG", " .Png ", "PnG"])
+def test_extension_match_is_case_and_dot_insensitive(whitelist_entry):
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[whitelist_entry],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+
+
+def test_extension_mismatch_still_rejected_after_normalization():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".png", ".jpg"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".pdf", config=config) is False
+
+
+def test_mixed_case_whitelist_replicating_real_user_config():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".PNG", "png", "JPG", ".WEBP", "SVG", "GIF"],
+    )
+    for ext in (".png", ".jpg", ".webp", ".svg", ".gif"):
+        assert _validate(input_file_type="custom", file_extension=ext, config=config) is True
+
+
+def test_tool_file_always_passes():
+    config = FileUploadConfig(allowed_file_types=[FileType.CUSTOM], allowed_file_extensions=[".pdf"])
+    assert (
+        _validate(
+            input_file_type="image",
+            file_extension=".png",
+            file_transfer_method=FileTransferMethod.TOOL_FILE,
+            config=config,
+        )
+        is True
+    )
+
+
+def test_transfer_method_gate_for_non_image():
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.DOCUMENT],
+        allowed_file_upload_methods=[FileTransferMethod.LOCAL_FILE],
+    )
+    assert (
+        _validate(
+            input_file_type="document",
+            file_extension=".pdf",
+            file_transfer_method=FileTransferMethod.LOCAL_FILE,
+            config=config,
+        )
+        is True
+    )
+    assert (
+        _validate(
+            input_file_type="document",
+            file_extension=".pdf",
+            file_transfer_method=FileTransferMethod.REMOTE_URL,
+            config=config,
+        )
+        is False
+    )
+
+
+def test_history_replay_matches_round_1_outcome_under_unchanged_config():
+    """A file that passes round 1 must pass history replay when config is unchanged."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[".png"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+    assert _validate(input_file_type="image", file_extension=".png", config=config) is True
+
+
+def test_empty_whitelist_in_custom_bucket_denies_by_default():
+    """Defensive: when a file lands in the CUSTOM bucket, an empty
+    allowed_file_extensions list rejects. The UI never submits empty;
+    this guards DSL / API paths that bypass the UI from accidentally
+    widening what's accepted."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=[],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is False
+    assert _validate(input_file_type="image", file_extension=".png", config=config) is False
+
+
+def test_normalize_handles_whitespace_and_empty_consistently():
+    """Whitespace-only or empty entries in the whitelist must not match real
+    extensions (regression guard for _normalize_extension edge cases)."""
+    for noisy_entry in ("", "   ", "\t"):
+        config = FileUploadConfig(
+            allowed_file_types=[FileType.CUSTOM],
+            allowed_file_extensions=[noisy_entry],
+        )
+        assert _validate(input_file_type="custom", file_extension=".png", config=config) is False
+
+
+def test_empty_extension_does_not_spuriously_match_empty_whitelist_entry():
+    """Defensive: even if the whitelist contains an empty / whitespace entry
+    (e.g., a stray comma in DSL), an extensionless file must not pass via
+    a both-sides-empty match. Real entries in the same whitelist still match."""
+    config = FileUploadConfig(
+        allowed_file_types=[FileType.CUSTOM],
+        allowed_file_extensions=["", ".png"],
+    )
+    assert _validate(input_file_type="custom", file_extension=".png", config=config) is True
+    assert _validate(input_file_type="custom", file_extension="", config=config) is False
diff --git a/api/tests/unit_tests/models/test_dataset_models.py b/api/tests/unit_tests/models/test_dataset_models.py
index 3f14ebe8bf..f4ccfb4191 100644
--- a/api/tests/unit_tests/models/test_dataset_models.py
+++ b/api/tests/unit_tests/models/test_dataset_models.py
@@ -847,9 +847,7 @@ class TestDatasetProcessRule:
 
         # Act
         process_rule = DatasetProcessRule(
-            dataset_id=dataset_id,
-            mode=ProcessRuleMode.AUTOMATIC,
-            created_by=created_by,
+            dataset_id=dataset_id, mode=ProcessRuleMode.AUTOMATIC, created_by=created_by, rules=None
         )
 
         # Assert
diff --git a/api/tests/unit_tests/services/test_workflow_service.py b/api/tests/unit_tests/services/test_workflow_service.py
index 1711e66b23..e152ab923c 100644
--- a/api/tests/unit_tests/services/test_workflow_service.py
+++ b/api/tests/unit_tests/services/test_workflow_service.py
@@ -11,6 +11,7 @@ This test suite covers:
 
 import json
 import uuid
+from types import SimpleNamespace
 from typing import Any, cast
 from unittest.mock import ANY, MagicMock, Mock, patch, sentinel
 
@@ -2649,7 +2650,12 @@ class TestWorkflowServiceHumanInputOperations:
 
         mock_node = MagicMock()
         mock_node.node_data = MagicMock()
+        mock_node.node_data.user_actions = [
+            SimpleNamespace(id="submit", title="card_visa_enterprise_001"),
+        ]
         mock_node.node_data.outputs_field_names.return_value = ["field1"]
+        mock_node.render_form_content_before_submission.return_value = "Ticket: {{#$output.field1#}}"
+        mock_node.render_form_content_with_outputs.return_value = "Ticket: val1"
 
         with (
             patch("services.workflow_service.db"),
@@ -2665,6 +2671,8 @@ class TestWorkflowServiceHumanInputOperations:
                 app_model=app_model, account=account, node_id="node-1", form_inputs={"field1": "val1"}, action="submit"
             )
             assert result["__action_id"] == "submit"
+            assert result["__action_value"] == "card_visa_enterprise_001"
+            assert result["__rendered_content"] == "Ticket: val1"
             mock_saver_cls.return_value.save.assert_called_once()
 
     def test_test_human_input_delivery_success(self, service: WorkflowService) -> None:
diff --git a/api/uv.lock b/api/uv.lock
index ad9ce2c4a4..747bb7d647 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -607,16 +607,16 @@ wheels = [
 
 [[package]]
 name = "boto3"
-version = "1.43.3"
+version = "1.43.6"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "botocore" },
     { name = "jmespath" },
     { name = "s3transfer" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/f2/50/ea184e159c4ac64fef816a72094fb8656eb071361a39ed22c0e3b15a35b4/boto3-1.43.3.tar.gz", hash = "sha256:7c7777862ffc898f05efa566032bbabfe226dbb810e35ec11125817f128bc5c5", size = 113111, upload-time = "2026-05-04T19:34:09.731Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/0a/37/78c630d1308964aa9abf44951d9c4df776546ff37251ec2434944e205c4e/boto3-1.43.6.tar.gz", hash = "sha256:e6315effaf12b890b99956e6f8e2c3000a3f64e4ee91943cec3895ce9a836afb", size = 113153, upload-time = "2026-05-07T20:49:59.694Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/c8/ad/8a6946a329f0127322108e537dc1c0d9f8eea4f1d1231702c073d2e85f46/boto3-1.43.3-py3-none-any.whl", hash = "sha256:fb9fe51849ef2a78198d582756fc06f14f7de27f73e0fa90275d6aa4171eb4d0", size = 140501, upload-time = "2026-05-04T19:34:07.991Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/e2/3c2eef44f55eafab256836d1d9479bd6a74f70c26cbfdc0639a0e23e4327/boto3-1.43.6-py3-none-any.whl", hash = "sha256:179601ec2992726a718053bf41e43c223ceba397d31ceab11f64d9c910d9fc3a", size = 140502, upload-time = "2026-05-07T20:49:57.8Z" },
 ]
 
 [[package]]
@@ -639,16 +639,16 @@ bedrock-runtime = [
 
 [[package]]
 name = "botocore"
-version = "1.43.3"
+version = "1.43.6"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "jmespath" },
     { name = "python-dateutil" },
     { name = "urllib3" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/74/ac/cd55f886e17b6b952dbc95b792d3645a73d58586a1400ababe54406073bd/botocore-1.43.3.tar.gz", hash = "sha256:eac6da0fffccf87888ebf4d89f0b2378218a707efa748cd955b838995e944695", size = 15308705, upload-time = "2026-05-04T19:33:56.28Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/79/a7/23d0f5028011455096a1eeac0ddf3cbe147b3e855e127342f8202552194d/botocore-1.43.6.tar.gz", hash = "sha256:b1e395b347356860398da42e61c808cf1e34b6fa7180cf2b9d87d986e1a06ba0", size = 15336070, upload-time = "2026-05-07T20:49:48.14Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/be/99/1d9e296edf244f47e0508032f20999f8fd40704dd3c5b601fed099424eb6/botocore-1.43.3-py3-none-any.whl", hash = "sha256:ec0769eb0f7c5034856bb406a92698dbc02a3d4be0f78a384747106b161d8ea3", size = 14989027, upload-time = "2026-05-04T19:33:50.81Z" },
+    { url = "https://files.pythonhosted.org/packages/e5/c8/6f47223840e8d8cfa8c9f7c0ec1b77970417f257fc885169ff4f6326ce09/botocore-1.43.6-py3-none-any.whl", hash = "sha256:b6d1fdbc6f65a5fe0b7e947823aa37535d3f39f3ba4d21110fab1f55bbbcc04b", size = 15017094, upload-time = "2026-05-07T20:49:44.964Z" },
 ]
 
 [[package]]
@@ -1581,7 +1581,7 @@ requires-dist = [
     { name = "aliyun-log-python-sdk", specifier = ">=0.9.44,<1.0.0" },
     { name = "azure-identity", specifier = ">=1.25.3,<2.0.0" },
     { name = "bleach", specifier = ">=6.3.0" },
-    { name = "boto3", specifier = ">=1.43.3" },
+    { name = "boto3", specifier = ">=1.43.6" },
     { name = "celery", specifier = ">=5.6.3" },
     { name = "croniter", specifier = ">=6.2.2" },
     { name = "fastopenapi", extras = ["flask"], specifier = "~=0.7.0" },
@@ -1595,10 +1595,10 @@ requires-dist = [
     { name = "gevent", specifier = ">=26.4.0" },
     { name = "gevent-websocket", specifier = ">=0.10.1" },
     { name = "gmpy2", specifier = ">=2.3.0" },
-    { name = "google-api-python-client", specifier = ">=2.195.0" },
-    { name = "google-cloud-aiplatform", specifier = ">=1.149.0,<2.0.0" },
-    { name = "graphon", specifier = "~=0.3.0" },
-    { name = "gunicorn", specifier = ">=25.3.0" },
+    { name = "google-api-python-client", specifier = ">=2.196.0" },
+    { name = "google-cloud-aiplatform", specifier = ">=1.151.0,<2.0.0" },
+    { name = "graphon", specifier = "~=0.3.1" },
+    { name = "gunicorn", specifier = ">=26.0.0" },
     { name = "httpx", extras = ["socks"], specifier = ">=0.28.1,<1.0.0" },
     { name = "httpx-sse", specifier = "~=0.4.0" },
     { name = "json-repair", specifier = "~=0.59.4" },
@@ -1692,7 +1692,7 @@ storage = [
     { name = "google-cloud-storage", specifier = ">=3.10.1" },
     { name = "opendal", specifier = ">=0.46.0" },
     { name = "oss2", specifier = ">=2.19.1" },
-    { name = "supabase", specifier = ">=2.29.0" },
+    { name = "supabase", specifier = ">=2.30.0" },
     { name = "tos", specifier = ">=2.9.0" },
 ]
 tools = [
@@ -2722,7 +2722,7 @@ grpc = [
 
 [[package]]
 name = "google-api-python-client"
-version = "2.195.0"
+version = "2.196.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "google-api-core" },
@@ -2731,9 +2731,9 @@ dependencies = [
     { name = "httplib2" },
     { name = "uritemplate" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/69/07/08d759b9cb10f48af14b25262dd0d6685ca8cda6c1f9e8a8109f57457205/google_api_python_client-2.195.0.tar.gz", hash = "sha256:c72cf2661c3addf01c880ce60541e83e1df354644b874f7f9d8d5ed2070446ae", size = 14584819, upload-time = "2026-04-30T21:51:50.638Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/6d/f3/34ef8aca7909675fe327f96c1ed927f0520e7acf68af19157e96acc05e76/google_api_python_client-2.196.0.tar.gz", hash = "sha256:9f335d38f6caaa2747bcf64335ed1a9a19047d53e86538eda6a1b17d37f1743d", size = 14628129, upload-time = "2026-05-06T23:47:35.655Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/21/b9/2c71095e31fff57668fec7c07ac897df065f15521d070e63229e13689590/google_api_python_client-2.195.0-py3-none-any.whl", hash = "sha256:753e62057f23049a89534bea0162b60fe391b85fb86d80bcdf884d05ec91c5bf", size = 15162418, upload-time = "2026-04-30T21:51:47.444Z" },
+    { url = "https://files.pythonhosted.org/packages/99/c7/1817b4edf966d5afcac1c0781ca36d621bc0cb58104c4e7c2a475ab185f7/google_api_python_client-2.196.0-py3-none-any.whl", hash = "sha256:2591e9b47dcb17e4e62a09370aaee3bcf323af8f28ccecdabcd0a42a23ca4db5", size = 15206663, upload-time = "2026-05-06T23:47:32.886Z" },
 ]
 
 [[package]]
@@ -2769,7 +2769,7 @@ wheels = [
 
 [[package]]
 name = "google-cloud-aiplatform"
-version = "1.149.0"
+version = "1.151.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "docstring-parser" },
@@ -2785,9 +2785,9 @@ dependencies = [
     { name = "pydantic" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/42/2c/fba4adc56f74c0ee0fbd91a39d414ca2c3588dd8b71f9be8a507015ca886/google_cloud_aiplatform-1.149.0.tar.gz", hash = "sha256:a4d73485bf1d727a9e1bbbd13d08d7031490686bbf7d125eb905c1a6c1559a35", size = 10451466, upload-time = "2026-04-27T23:11:54.513Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/ec/f6/e2fbe175a011f5080da8c1f7d9169a6875a00ea2c7bee4193d952b097400/google_cloud_aiplatform-1.151.0.tar.gz", hash = "sha256:2f29b1853f790a7371a746c747bf1f664380b534254682441acd4b5ee26fafd2", size = 10617421, upload-time = "2026-05-07T21:56:52.91Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/bf/a0/27719ba23967ef62e52a1d54e013e0fc174bdab8dd84fb300bab9bf0d4a3/google_cloud_aiplatform-1.149.0-py2.py3-none-any.whl", hash = "sha256:e6b5299fa5d303e971cb29a19f03fdbb7b1e3b9d2faa3a788ca933341fba2f2e", size = 8570410, upload-time = "2026-04-27T23:11:50.495Z" },
+    { url = "https://files.pythonhosted.org/packages/f6/4a/cd35f8ba622d563b1335222284d2838aa789b953b40516b1b997e50fe5b6/google_cloud_aiplatform-1.151.0-py2.py3-none-any.whl", hash = "sha256:61372bb0923b14b8027f45b83393452df3a85bf4ea86fa48e08844fb5ec50049", size = 8732627, upload-time = "2026-05-07T21:56:49.014Z" },
 ]
 
 [[package]]
@@ -2940,7 +2940,7 @@ httpx = [
 
 [[package]]
 name = "graphon"
-version = "0.3.0"
+version = "0.3.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "charset-normalizer" },
@@ -2961,9 +2961,9 @@ dependencies = [
     { name = "unstructured", extra = ["docx", "epub", "md", "ppt", "pptx"] },
     { name = "webvtt-py" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/bf/62/83593d6e7a139ff124711ea05882cadca7065c11a38763aa9360d7e76804/graphon-0.3.0.tar.gz", hash = "sha256:cd38f842ae3dcfa956428b952efbe2a3ea9c1581446647142accbbdeb638b876", size = 241176, upload-time = "2026-04-21T15:18:48.291Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/5a/ef/43217842e84160acca64a95858f1689389a50e04a53fc94f2aa836b4eaf7/graphon-0.3.1.tar.gz", hash = "sha256:49971baed1eb16c8e1983f755e659902e4f117a68dc62fad19e91472950b937d", size = 242210, upload-time = "2026-05-07T06:58:21.879Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/b3/f7/81ee8f0368aa6a2d47f97fecc5d4a12865c987906798cbddd0e3b8387f33/graphon-0.3.0-py3-none-any.whl", hash = "sha256:9cca45ebab2a79fd4d04432f55b5b962e9e4f34fa037cc20fee7f18ec80eaa5d", size = 348486, upload-time = "2026-04-21T15:18:46.737Z" },
+    { url = "https://files.pythonhosted.org/packages/62/37/bef16ed3d6da7446b36769fa388f4dc79f95337ffa16d6dfc3177152507e/graphon-0.3.1-py3-none-any.whl", hash = "sha256:e6422c7e3f1ce7d2185979c17e08201816ca25d46d400ebdd035c95d501c04fe", size = 349368, upload-time = "2026-05-07T06:58:20.217Z" },
 ]
 
 [[package]]
@@ -3102,14 +3102,14 @@ wheels = [
 
 [[package]]
 name = "gunicorn"
-version = "25.3.0"
+version = "26.0.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "packaging" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/c4/f4/e78fa054248fab913e2eab0332c6c2cb07421fca1ce56d8fe43b6aef57a4/gunicorn-25.3.0.tar.gz", hash = "sha256:f74e1b2f9f76f6cd1ca01198968bd2dd65830edc24b6e8e4d78de8320e2fe889", size = 634883, upload-time = "2026-03-27T00:00:26.092Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/6d/b7/a4a3f632f823e432ce6bc65f62961b7980c898c77f075a2f7118cb3846fe/gunicorn-26.0.0.tar.gz", hash = "sha256:ca9346f85e3a4aeeb64d491045c16b9a35647abd37ea15efe53080eb8b090baf", size = 727286, upload-time = "2026-05-05T06:38:25.529Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/43/c8/8aaf447698c4d59aa853fd318eed300b5c9e44459f242ab8ead6c9c09792/gunicorn-25.3.0-py3-none-any.whl", hash = "sha256:cacea387dab08cd6776501621c295a904fe8e3b7aae9a1a3cbb26f4e7ed54660", size = 208403, upload-time = "2026-03-27T00:00:27.386Z" },
+    { url = "https://files.pythonhosted.org/packages/e6/40/9c2384fc2be4ad25dd4a49decd5ad9ea5a3639814c11bd40ab77cb9f0a14/gunicorn-26.0.0-py3-none-any.whl", hash = "sha256:40233d26a5f0d1872916188c276e21641155111c2853f0c2cd55260aec0d24fc", size = 212009, upload-time = "2026-05-05T06:38:23.007Z" },
 ]
 
 [[package]]
@@ -4265,32 +4265,32 @@ wheels = [
 
 [[package]]
 name = "opentelemetry-exporter-otlp"
-version = "1.41.0"
+version = "1.41.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "opentelemetry-exporter-otlp-proto-grpc" },
     { name = "opentelemetry-exporter-otlp-proto-http" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/65/b7/845565a2ab5d22c1486bc7729a06b05cd0964c61539d766e1f107c9eea0c/opentelemetry_exporter_otlp-1.41.0.tar.gz", hash = "sha256:97ff847321f8d4c919032a67d20d3137fb7b34eac0c47f13f71112858927fc5b", size = 6152, upload-time = "2026-04-09T14:38:35.895Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/42/84/d55baf8e1a222f40282956083e67de9fa92d5fa451108df4839505fa2a24/opentelemetry_exporter_otlp-1.41.1.tar.gz", hash = "sha256:299a2f0541ca175df186f5ac58fd5db177ba1e9b72b0826049062f750d55b47f", size = 6152, upload-time = "2026-04-24T13:15:40.006Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/e0/f2/f1076fff152858773f22cda146713f9ae3661795af6bacd411a76f2151ac/opentelemetry_exporter_otlp-1.41.0-py3-none-any.whl", hash = "sha256:443b6a45c990ae4c55e147f97049a86c5f5b704f3d78b48b44a073a886ec4d6e", size = 7022, upload-time = "2026-04-09T14:38:13.934Z" },
+    { url = "https://files.pythonhosted.org/packages/6d/d5/ea4aa7dfc458fd537bd9519ea0e7226eef2a6212dfe952694984167daaba/opentelemetry_exporter_otlp-1.41.1-py3-none-any.whl", hash = "sha256:db276c5a80c02b063994e80950d00ca1bfddcf6520f608335b7dc2db0c0eb9c6", size = 7025, upload-time = "2026-04-24T13:15:17.839Z" },
 ]
 
 [[package]]
 name = "opentelemetry-exporter-otlp-proto-common"
-version = "1.41.0"
+version = "1.41.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "opentelemetry-proto" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/8c/28/e8eca94966fe9a1465f6094dc5ddc5398473682180279c94020bc23b4906/opentelemetry_exporter_otlp_proto_common-1.41.0.tar.gz", hash = "sha256:966bbce537e9edb166154779a7c4f8ab6b8654a03a28024aeaf1a3eacb07d6ee", size = 20411, upload-time = "2026-04-09T14:38:36.572Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/ae/fa/f9e3bd3c4d692b3ce9a2880a167d1f79681a1bea11f00d5bf76adc03e6ea/opentelemetry_exporter_otlp_proto_common-1.41.1.tar.gz", hash = "sha256:0e253156ea9c36b0bd3d2440c5c9ba7dd1f3fb64ba7a08fc85fbac536b56e1fb", size = 20409, upload-time = "2026-04-24T13:15:40.924Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/26/c4/78b9bf2d9c1d5e494f44932988d9d91c51a66b9a7b48adf99b62f7c65318/opentelemetry_exporter_otlp_proto_common-1.41.0-py3-none-any.whl", hash = "sha256:7a99177bf61f85f4f9ed2072f54d676364719c066f6d11f515acc6c745c7acf0", size = 18366, upload-time = "2026-04-09T14:38:15.135Z" },
+    { url = "https://files.pythonhosted.org/packages/29/48/bce76d3ea772b609757e9bc844e02ab408a6446609bf74fb562062ba6b71/opentelemetry_exporter_otlp_proto_common-1.41.1-py3-none-any.whl", hash = "sha256:10da74dad6a49344b9b7b21b6182e3060373a235fde1528616d5f01f92e66aa9", size = 18366, upload-time = "2026-04-24T13:15:18.917Z" },
 ]
 
 [[package]]
 name = "opentelemetry-exporter-otlp-proto-grpc"
-version = "1.41.0"
+version = "1.41.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "googleapis-common-protos" },
@@ -4301,14 +4301,14 @@ dependencies = [
     { name = "opentelemetry-sdk" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/42/46/d75a3f8c91915f2e58f61d0a2e4ada63891e7c7a37a20ff7949ba184a6b2/opentelemetry_exporter_otlp_proto_grpc-1.41.0.tar.gz", hash = "sha256:f704201251c6f65772b11bddea1c948000554459101bdbb0116e0a01b70592f6", size = 25754, upload-time = "2026-04-09T14:38:37.423Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/1e/9b/e4503060b8695579dbaad187dc8cef4554188de68748c88060599b77489e/opentelemetry_exporter_otlp_proto_grpc-1.41.1.tar.gz", hash = "sha256:b05df8fa1333dc9a3fda36b676b96b5095ab6016d3f0c3296d430d629ba1443b", size = 25755, upload-time = "2026-04-24T13:15:41.93Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/81/f6/b09e2e0c9f0b5750cebc6eaf31527b910821453cef40a5a0fe93550422b2/opentelemetry_exporter_otlp_proto_grpc-1.41.0-py3-none-any.whl", hash = "sha256:3a1a86bd24806ccf136ec9737dbfa4c09b069f9130ff66b0acb014f9c5255fd1", size = 20299, upload-time = "2026-04-09T14:38:17.01Z" },
+    { url = "https://files.pythonhosted.org/packages/ac/f2/c54f33c92443d087703e57e52e55f22f111373a5c4c4aa349ea60efe512e/opentelemetry_exporter_otlp_proto_grpc-1.41.1-py3-none-any.whl", hash = "sha256:537926dcef951136992479af1d9cd88f25e33d56c530e9f020ed57774dca2f94", size = 20297, upload-time = "2026-04-24T13:15:20.212Z" },
 ]
 
 [[package]]
 name = "opentelemetry-exporter-otlp-proto-http"
-version = "1.41.0"
+version = "1.41.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "googleapis-common-protos" },
@@ -4319,9 +4319,9 @@ dependencies = [
     { name = "requests" },
     { name = "typing-extensions" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/19/63/d9f43cd75f3fabb7e01148c89cfa9491fc18f6580a6764c554ff7c953c46/opentelemetry_exporter_otlp_proto_http-1.41.0.tar.gz", hash = "sha256:dcd6e0686f56277db4eecbadd5262124e8f2cc739cadbc3fae3d08a12c976cf5", size = 24139, upload-time = "2026-04-09T14:38:38.128Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/33/5b/9d3c7f70cca10136ba82a81e738dee626c8e7fc61c6887ea9a58bf34c606/opentelemetry_exporter_otlp_proto_http-1.41.1.tar.gz", hash = "sha256:4747a9604c8550ab38c6fd6180e2fcb80de3267060bef2c306bad3cb443302bc", size = 24139, upload-time = "2026-04-24T13:15:42.977Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/64/b5/a214cd907eedc17699d1c2d602288ae17cb775526df04db3a3b3585329d2/opentelemetry_exporter_otlp_proto_http-1.41.0-py3-none-any.whl", hash = "sha256:a9c4ee69cce9c3f4d7ee736ad1b44e3c9654002c0816900abbafd9f3cf289751", size = 22673, upload-time = "2026-04-09T14:38:18.349Z" },
+    { url = "https://files.pythonhosted.org/packages/ba/4d/ef07ff2fc630849f2080ae0ae73a61f67257905b7ac79066640bfa0c5739/opentelemetry_exporter_otlp_proto_http-1.41.1-py3-none-any.whl", hash = "sha256:1a21e8f49c7a946d935551e90947d6c3eb39236723c6624401da0f33d68edcb4", size = 22673, upload-time = "2026-04-24T13:15:21.313Z" },
 ]
 
 [[package]]
@@ -4479,14 +4479,14 @@ wheels = [
 
 [[package]]
 name = "opentelemetry-proto"
-version = "1.41.0"
+version = "1.41.1"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "protobuf" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/e0/d9/08e3dc6156878713e8c811682bc76151f5fe1a3cb7f3abda3966fd56e71e/opentelemetry_proto-1.41.0.tar.gz", hash = "sha256:95d2e576f9fb1800473a3e4cfcca054295d06bdb869fda4dc9f4f779dc68f7b6", size = 45669, upload-time = "2026-04-09T14:38:45.978Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/99/e8/633c6d8a9c8840338b105907e55c32d3da1983abab5e52f899f72a82c3d1/opentelemetry_proto-1.41.1.tar.gz", hash = "sha256:4b9d2eb631237ea43b80e16c073af438554e32bc7e9e3f8ca4a9582f900020e5", size = 45670, upload-time = "2026-04-24T13:15:49.768Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/49/8c/65ef7a9383a363864772022e822b5d5c6988e6f9dabeebb9278f5b86ebc3/opentelemetry_proto-1.41.0-py3-none-any.whl", hash = "sha256:b970ab537309f9eed296be482c3e7cca05d8aca8165346e929f658dbe153b247", size = 72074, upload-time = "2026-04-09T14:38:29.38Z" },
+    { url = "https://files.pythonhosted.org/packages/e4/1e/5cd77035e3e82070e2265a63a760f715aacd3cb16dddc7efee913f297fcc/opentelemetry_proto-1.41.1-py3-none-any.whl", hash = "sha256:0496713b804d127a4147e32849fbaf5683fac8ee98550e8e7679cd706c289720", size = 72076, upload-time = "2026-04-24T13:15:32.542Z" },
 ]
 
 [[package]]
@@ -4813,7 +4813,7 @@ wheels = [
 
 [[package]]
 name = "postgrest"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "deprecation" },
@@ -4821,9 +4821,9 @@ dependencies = [
     { name = "pydantic" },
     { name = "yarl" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/52/98/f216b8b5c4d116ab6a2fb21339b5821da279ee773e163612418e1c56c012/postgrest-2.29.0.tar.gz", hash = "sha256:a87081858f627fcd57e8e7137004a1ef0adbdf0dbdfed1384e9ea1d7a9c525ec", size = 14217, upload-time = "2026-04-24T13:13:00.281Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/56/7c/54e7be05adc9fd6fd98dc572ddfc8982d45bec314a55711e37277d440698/postgrest-2.30.0.tar.gz", hash = "sha256:4f89eec56ce605ab6fbddd9b96d526a9bb44962796d44a5d85cb77640eb766c3", size = 14430, upload-time = "2026-05-06T17:35:21.559Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/2c/0b/08b670a93a90d625c557b9e64b8a5fdeec80c3542d2d0265f0b4d6b16646/postgrest-2.29.0-py3-none-any.whl", hash = "sha256:3ee48e146f726272733d20e2b12de354cdb6cb9dd9cc3a61ed97ce69047aeb96", size = 22735, upload-time = "2026-04-24T13:12:58.405Z" },
+    { url = "https://files.pythonhosted.org/packages/22/aa/ff2e09f99f95ea96fddeb373646bf907dd89a24fc00b5d38e5674ca7c9ca/postgrest-2.30.0-py3-none-any.whl", hash = "sha256:30631e7993da542419f4217cf3b60aa641084731ea15e66a18526a3a52e40a7d", size = 23108, upload-time = "2026-05-06T17:35:20.531Z" },
 ]
 
 [[package]]
@@ -5726,16 +5726,16 @@ wheels = [
 
 [[package]]
 name = "realtime"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "pydantic" },
     { name = "typing-extensions" },
     { name = "websockets" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/6e/f1/08c42a42653942fadfbef495d5b0239356140e7186cc528704956c5f06d4/realtime-2.29.0.tar.gz", hash = "sha256:8efe4a1b3a548a5fda09de701bd041fa0970c5a2fe7d13db0b9861ce11828be2", size = 18715, upload-time = "2026-04-24T13:13:02.315Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/b2/a2/0328d49d3b5fb427068e9200e7de5b0d708d021a1ad98d004bc685d2529e/realtime-2.30.0.tar.gz", hash = "sha256:7aa593da52ed5f92c34ec4e50e32043afa62f219c94f717ad64a66ab0ef9f1ba", size = 18718, upload-time = "2026-05-06T17:35:23.925Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/77/48/f6375c0a24923beb988f0c71c052604c96641cf43c2d22b91ec1df86afa0/realtime-2.29.0-py3-none-any.whl", hash = "sha256:1a4891e6c82e88ac9d96ac715e435e086f6f8c7665212a8717346de829cbb509", size = 22374, upload-time = "2026-04-24T13:13:01.103Z" },
+    { url = "https://files.pythonhosted.org/packages/b4/75/1b2cfc949595e22d8c05a2aa2cfc222921f7f94177d7e8a90542f3f73b33/realtime-2.30.0-py3-none-any.whl", hash = "sha256:7c93b63d2cf99aa1da4fa8826b03b00cd32f7b38abb27ff47b19eb5dcb5707c6", size = 22376, upload-time = "2026-05-06T17:35:22.568Z" },
 ]
 
 [[package]]
@@ -6217,7 +6217,7 @@ wheels = [
 
 [[package]]
 name = "storage3"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "deprecation" },
@@ -6226,9 +6226,9 @@ dependencies = [
     { name = "pyiceberg" },
     { name = "yarl" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/d7/be/771246434b5caf3c6187bfdc932eaede00bf5f2937b47475ab25209ede3e/storage3-2.29.0.tar.gz", hash = "sha256:b0cc2f6714655d725c998d2c5ae8c6fb4f56a513bd31e4f85770df557fe021e3", size = 20160, upload-time = "2026-04-24T13:13:04.626Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/9b/b2/6df208d64630744704d00f2c07197170390d6b4d0098617740f6a7a4fa98/storage3-2.30.0.tar.gz", hash = "sha256:b74e3cac149f2c0553dcb5f4d55d8c35d420d88183a1a2df77727d482665972b", size = 20162, upload-time = "2026-05-06T17:35:25.71Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/fc/c3/790c31866f52c13b26f108b45759bf50dafae3a0bafb4511fadc98ba7c33/storage3-2.29.0-py3-none-any.whl", hash = "sha256:043ef7ff27cc8b9da12be403cf78ee4586180edfcf62b227ff61e1bd79594b06", size = 28284, upload-time = "2026-04-24T13:13:03.338Z" },
+    { url = "https://files.pythonhosted.org/packages/91/5c/bb8c8cc448cfae671c4ffee67f3651892ea59b341f27bed54666190eb8ef/storage3-2.30.0-py3-none-any.whl", hash = "sha256:2bd23a34011c018bd9c130d8a70a09ebd060ae80d946c6204a6fc08161ad728d", size = 28284, upload-time = "2026-05-06T17:35:24.659Z" },
 ]
 
 [[package]]
@@ -6254,7 +6254,7 @@ wheels = [
 
 [[package]]
 name = "supabase"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "httpx" },
@@ -6265,37 +6265,37 @@ dependencies = [
     { name = "supabase-functions" },
     { name = "yarl" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/51/a0/2407d616fdf68e8632bbbfb063d1685c38377ac0199e8ca11deaea1f3bf0/supabase-2.29.0.tar.gz", hash = "sha256:a88c4a4eb50fbb903e2e962fbc7c27733b00589140139f9e837bc9fe30dd3615", size = 9689, upload-time = "2026-04-24T13:13:06.728Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/5c/a6/d2b17021c2db1a9d219c383e0762ac03a62b25468e61ab126b6b561c2f21/supabase-2.30.0.tar.gz", hash = "sha256:efdba41d474038ed220736ba4e64946df56043057ad785c4c3499d27e459975c", size = 9689, upload-time = "2026-05-06T17:35:27.781Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/22/52/232f6bbf5326e04ae12e2ef04a24f011a0d7cab379a8b9698652bc8ff78f/supabase-2.29.0-py3-none-any.whl", hash = "sha256:16c3ec4b7094f6b92efc5cd3bb3f96826d3b6dd5d24fe15c89c81166efce88fe", size = 16633, upload-time = "2026-04-24T13:13:05.722Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/82/d213be7d0ce0bb18018744c0ee38ba0d6648d41dbc46ac8558cffe80541f/supabase-2.30.0-py3-none-any.whl", hash = "sha256:f9b259194554f7bfd2dca6c23261f2df588016ca18b18e774f4d85bc941edb03", size = 16634, upload-time = "2026-05-06T17:35:26.696Z" },
 ]
 
 [[package]]
 name = "supabase-auth"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "httpx", extra = ["http2"] },
     { name = "pydantic" },
     { name = "pyjwt", extra = ["crypto"] },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/51/7f/7ceeb4c7a2caa188062e934897f0e08e1af0a0e47e376c7645c26b4c39d8/supabase_auth-2.29.0.tar.gz", hash = "sha256:46efc6a3455a23957b846dc974303a844ba0413718cfa899425477ac977f95b3", size = 39154, upload-time = "2026-04-24T13:13:08.509Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/8e/8a/48bbbe0b6703d0670b67e45b90d6a791fd01aace67443d286f760bf48895/supabase_auth-2.30.0.tar.gz", hash = "sha256:6138a53a306a95ed59c03d4e4975469dfc3343a0ade33cc4b37e4ef967ad83f8", size = 39135, upload-time = "2026-05-06T17:35:30.371Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/f1/ac/3c35cf52281f940b9497cf17abfc5c2050ca49f342d60cfafe22dac3482b/supabase_auth-2.29.0-py3-none-any.whl", hash = "sha256:64de6ef8cae80f97d3aa8d5ca507d5427dda5c89885c0bcfe9f8b0263b6fb9a4", size = 48379, upload-time = "2026-04-24T13:13:07.417Z" },
+    { url = "https://files.pythonhosted.org/packages/db/40/a99cb4373353bcbf302d962e51da9eac78b3b0f257eb0362c0852b1667f4/supabase_auth-2.30.0-py3-none-any.whl", hash = "sha256:e85e1f51ec0de2172c3a2a8514205f71731a9914f9a770ed199ac0cf054bc82c", size = 48352, upload-time = "2026-05-06T17:35:28.936Z" },
 ]
 
 [[package]]
 name = "supabase-functions"
-version = "2.29.0"
+version = "2.30.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "httpx", extra = ["http2"] },
     { name = "strenum" },
     { name = "yarl" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/e5/19/1a1d22749f38f2a6cbca93a6f5a35c9f816c2c3c06bfaa077fa336e90537/supabase_functions-2.29.0.tar.gz", hash = "sha256:0f8a14a2ea9f12b1c208f61dc6f55e2f4b1121f81bf01c08f9b487d22888744d", size = 4683, upload-time = "2026-04-24T13:13:10.432Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/f0/e6/5cd8559ec2bb332e6027840c1be292f9989c2fc7b47bf40800aec5586791/supabase_functions-2.30.0.tar.gz", hash = "sha256:025acfd25f1c000ba43d0f7b8e366b0d2e9dfc784b842528e21973eb33006113", size = 4683, upload-time = "2026-05-06T17:35:32.246Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/e0/10/6f8ef0b408ade76b5a439afab588ce5849e9604a23040ca73cfe0b90cb9e/supabase_functions-2.29.0-py3-none-any.whl", hash = "sha256:6f08de52eec5820eae53616868b85e849e181beffaa5d05b8ea1708ceae5e48e", size = 8799, upload-time = "2026-04-24T13:13:09.214Z" },
+    { url = "https://files.pythonhosted.org/packages/53/da/9dedab32775df04cc22ca72f194b78e895d940f195bed3e02882a65daa9b/supabase_functions-2.30.0-py3-none-any.whl", hash = "sha256:92419459f102767b954cd034856e4ded8e34c78660b32442d66c8b2899c68011", size = 8803, upload-time = "2026-05-06T17:35:31.342Z" },
 ]
 
 [[package]]
diff --git a/dev/pytest/pytest_full.sh b/dev/pytest/pytest_full.sh
index 2989a74ad8..ca09aeb729 100755
--- a/dev/pytest/pytest_full.sh
+++ b/dev/pytest/pytest_full.sh
@@ -15,7 +15,7 @@ mkdir -p "${OPENDAL_FS_ROOT}"
 
 # Prepare env files like CI
 cp -n docker/.env.example docker/.env || true
-cp -n docker/middleware.env.example docker/middleware.env || true
+cp -n docker/envs/middleware.env.example docker/middleware.env || true
 cp -n api/tests/integration_tests/.env.example api/tests/integration_tests/.env || true
 
 # Expose service ports (same as CI) without leaving the repo dirty
diff --git a/dev/setup b/dev/setup
index 4236ff7fa7..1d2501a48b 100755
--- a/dev/setup
+++ b/dev/setup
@@ -8,7 +8,7 @@ API_ENV_EXAMPLE="$ROOT/api/.env.example"
 API_ENV="$ROOT/api/.env"
 WEB_ENV_EXAMPLE="$ROOT/web/.env.example"
 WEB_ENV="$ROOT/web/.env.local"
-MIDDLEWARE_ENV_EXAMPLE="$ROOT/docker/middleware.env.example"
+MIDDLEWARE_ENV_EXAMPLE="$ROOT/docker/envs/middleware.env.example"
 MIDDLEWARE_ENV="$ROOT/docker/middleware.env"
 
 # 1) Copy api/.env.example -> api/.env
@@ -17,7 +17,7 @@ cp "$API_ENV_EXAMPLE" "$API_ENV"
 # 2) Copy web/.env.example -> web/.env.local
 cp "$WEB_ENV_EXAMPLE" "$WEB_ENV"
 
-# 3) Copy docker/middleware.env.example -> docker/middleware.env
+# 3) Copy docker/envs/middleware.env.example -> docker/middleware.env
 cp "$MIDDLEWARE_ENV_EXAMPLE" "$MIDDLEWARE_ENV"
 
 # 4) Install deps
diff --git a/docker/.env.example b/docker/.env.example
index 82bd837ffb..d9891d842a 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -34,7 +34,8 @@ CHECK_UPDATE_URL=https://updates.dify.ai
 OPENAI_API_BASE=https://api.openai.com/v1
 MIGRATION_ENABLED=true
 FILES_ACCESS_TIMEOUT=300
-ENABLE_COLLABORATION_MODE=false
+# Remove `collaboration` from COMPOSE_PROFILES to stop the dedicated websocket service.
+ENABLE_COLLABORATION_MODE=true
 
 # Logging and server workers
 LOG_LEVEL=INFO
@@ -52,6 +53,9 @@ DIFY_PORT=5001
 SERVER_WORKER_AMOUNT=1
 SERVER_WORKER_CLASS=gevent
 SERVER_WORKER_CONNECTIONS=10
+API_WEBSOCKET_WORKER_CLASS=geventwebsocket.gunicorn.workers.GeventWebSocketWorker
+API_WEBSOCKET_WORKER_CONNECTIONS=1000
+API_WEBSOCKET_GUNICORN_TIMEOUT=360
 GUNICORN_TIMEOUT=360
 CELERY_WORKER_CLASS=
 CELERY_WORKER_AMOUNT=4
@@ -246,6 +250,7 @@ NGINX_KEEPALIVE_TIMEOUT=65
 NGINX_PROXY_READ_TIMEOUT=3600s
 NGINX_PROXY_SEND_TIMEOUT=3600s
 NGINX_ENABLE_CERTBOT_CHALLENGE=false
+NGINX_SOCKET_IO_UPSTREAM=api_websocket:5001
 EXPOSE_NGINX_PORT=80
 EXPOSE_NGINX_SSL_PORT=443
-COMPOSE_PROFILES=${VECTOR_STORE:-weaviate},${DB_TYPE:-postgresql}
+COMPOSE_PROFILES=${VECTOR_STORE:-weaviate},${DB_TYPE:-postgresql},collaboration
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index 0f65c38098..72c9d4fd90 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -261,6 +261,31 @@ services:
       - ssrf_proxy_network
       - default
 
+  # WebSocket service for workflow collaboration.
+  api_websocket:
+    <<: *shared-api-worker-config
+    image: langgenius/dify-api:1.14.0
+    profiles:
+      - collaboration
+    environment:
+      MODE: api
+      SERVER_WORKER_AMOUNT: 1
+      SERVER_WORKER_CLASS: ${API_WEBSOCKET_WORKER_CLASS:-geventwebsocket.gunicorn.workers.GeventWebSocketWorker}
+      SERVER_WORKER_CONNECTIONS: ${API_WEBSOCKET_WORKER_CONNECTIONS:-1000}
+      GUNICORN_TIMEOUT: ${API_WEBSOCKET_GUNICORN_TIMEOUT:-360}
+    depends_on:
+      db_postgres:
+        condition: service_healthy
+        required: false
+      db_mysql:
+        condition: service_healthy
+        required: false
+      redis:
+        condition: service_started
+    networks:
+      - ssrf_proxy_network
+      - default
+
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
@@ -661,6 +686,7 @@ services:
       NGINX_PROXY_READ_TIMEOUT: ${NGINX_PROXY_READ_TIMEOUT:-3600s}
       NGINX_PROXY_SEND_TIMEOUT: ${NGINX_PROXY_SEND_TIMEOUT:-3600s}
       NGINX_ENABLE_CERTBOT_CHALLENGE: ${NGINX_ENABLE_CERTBOT_CHALLENGE:-false}
+      NGINX_SOCKET_IO_UPSTREAM: ${NGINX_SOCKET_IO_UPSTREAM:-api_websocket:5001}
       CERTBOT_DOMAIN: ${CERTBOT_DOMAIN:-}
     depends_on:
       - api
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 0f8458a58f..c1d75e01f4 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -267,6 +267,31 @@ services:
       - ssrf_proxy_network
       - default
 
+  # WebSocket service for workflow collaboration.
+  api_websocket:
+    <<: *shared-api-worker-config
+    image: langgenius/dify-api:1.14.0
+    profiles:
+      - collaboration
+    environment:
+      MODE: api
+      SERVER_WORKER_AMOUNT: 1
+      SERVER_WORKER_CLASS: ${API_WEBSOCKET_WORKER_CLASS:-geventwebsocket.gunicorn.workers.GeventWebSocketWorker}
+      SERVER_WORKER_CONNECTIONS: ${API_WEBSOCKET_WORKER_CONNECTIONS:-1000}
+      GUNICORN_TIMEOUT: ${API_WEBSOCKET_GUNICORN_TIMEOUT:-360}
+    depends_on:
+      db_postgres:
+        condition: service_healthy
+        required: false
+      db_mysql:
+        condition: service_healthy
+        required: false
+      redis:
+        condition: service_started
+    networks:
+      - ssrf_proxy_network
+      - default
+
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
@@ -667,6 +692,7 @@ services:
       NGINX_PROXY_READ_TIMEOUT: ${NGINX_PROXY_READ_TIMEOUT:-3600s}
       NGINX_PROXY_SEND_TIMEOUT: ${NGINX_PROXY_SEND_TIMEOUT:-3600s}
       NGINX_ENABLE_CERTBOT_CHALLENGE: ${NGINX_ENABLE_CERTBOT_CHALLENGE:-false}
+      NGINX_SOCKET_IO_UPSTREAM: ${NGINX_SOCKET_IO_UPSTREAM:-api_websocket:5001}
       CERTBOT_DOMAIN: ${CERTBOT_DOMAIN:-}
     depends_on:
       - api
diff --git a/docker/envs/core-services/shared.env.example b/docker/envs/core-services/shared.env.example
index 2a57f6954a..af1c3ce74e 100644
--- a/docker/envs/core-services/shared.env.example
+++ b/docker/envs/core-services/shared.env.example
@@ -16,7 +16,8 @@ CHECK_UPDATE_URL=https://updates.dify.ai
 OPENAI_API_BASE=https://api.openai.com/v1
 MIGRATION_ENABLED=true
 FILES_ACCESS_TIMEOUT=300
-ENABLE_COLLABORATION_MODE=false
+# Remove `collaboration` from COMPOSE_PROFILES to stop the dedicated websocket service.
+ENABLE_COLLABORATION_MODE=true
 CELERY_BROKER_URL=redis://:difyai123456@redis:6379/1
 CELERY_TASK_ANNOTATIONS=null
 AZURE_BLOB_ACCOUNT_URL=https://<your_account_name>.blob.core.windows.net
@@ -87,6 +88,9 @@ DIFY_PORT=5001
 SERVER_WORKER_AMOUNT=1
 SERVER_WORKER_CLASS=gevent
 SERVER_WORKER_CONNECTIONS=10
+API_WEBSOCKET_WORKER_CLASS=geventwebsocket.gunicorn.workers.GeventWebSocketWorker
+API_WEBSOCKET_WORKER_CONNECTIONS=1000
+API_WEBSOCKET_GUNICORN_TIMEOUT=360
 CELERY_SENTINEL_PASSWORD=
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
@@ -399,7 +403,7 @@ TABLESTORE_ENDPOINT=https://instance-name.cn-hangzhou.ots.aliyuncs.com
 TABLESTORE_INSTANCE_NAME=instance-name
 CLICKZETTA_USERNAME=
 CLICKZETTA_VECTOR_DISTANCE_FUNCTION=cosine_distance
-COMPOSE_PROFILES=${VECTOR_STORE:-weaviate},${DB_TYPE:-postgresql}
+COMPOSE_PROFILES=${VECTOR_STORE:-weaviate},${DB_TYPE:-postgresql},collaboration
 EXPOSE_NGINX_PORT=80
 EXPOSE_NGINX_SSL_PORT=443
 POSITION_TOOL_PINS=
diff --git a/docker/envs/infrastructure/nginx.env.example b/docker/envs/infrastructure/nginx.env.example
index fbe86680ba..fcb369a47d 100644
--- a/docker/envs/infrastructure/nginx.env.example
+++ b/docker/envs/infrastructure/nginx.env.example
@@ -15,3 +15,4 @@ NGINX_KEEPALIVE_TIMEOUT=65
 NGINX_PROXY_READ_TIMEOUT=3600s
 NGINX_PROXY_SEND_TIMEOUT=3600s
 NGINX_ENABLE_CERTBOT_CHALLENGE=false
+NGINX_SOCKET_IO_UPSTREAM=api_websocket:5001
diff --git a/docker/nginx/conf.d/default.conf.template b/docker/nginx/conf.d/default.conf.template
index 94a748290f..64c720ca2b 100644
--- a/docker/nginx/conf.d/default.conf.template
+++ b/docker/nginx/conf.d/default.conf.template
@@ -15,7 +15,9 @@ server {
     }
 
     location /socket.io/ {
-      proxy_pass http://api:5001;
+      resolver 127.0.0.11 valid=30s ipv6=off;
+      set $socket_io_upstream ${NGINX_SOCKET_IO_UPSTREAM};
+      proxy_pass http://$socket_io_upstream;
       include proxy.conf;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
diff --git a/e2e/AGENTS.md b/e2e/AGENTS.md
index e56aab20a7..c05b5105be 100644
--- a/e2e/AGENTS.md
+++ b/e2e/AGENTS.md
@@ -31,7 +31,7 @@ pnpm -C e2e check
 
 `pnpm install` is resolved through the repository workspace and uses the shared root lockfile plus `pnpm-workspace.yaml`.
 
-Use `pnpm check` as the default local verification step after editing E2E TypeScript, Cucumber support code, or feature glue. It runs formatting, linting, and type checks for this package.
+Use `pnpm -C e2e check` as the default local verification step after editing E2E TypeScript, Cucumber support code, or feature glue. It runs formatting, linting, and type checks for this package.
 
 Common commands:
 
@@ -68,8 +68,8 @@ flowchart TD
   C --> D["Cucumber loads config, steps, and support modules"]
   D --> E["BeforeAll bootstraps shared auth state via /install"]
   E --> F{"Which command is running?"}
-  F -->|`pnpm e2e`| G["Run config default tags: not @fresh and not @skip"]
-  F -->|`pnpm e2e:full*`| H["Override tags to not @skip"]
+  F -->|`pnpm -C e2e e2e`| G["Run config default tags: not @fresh and not @skip"]
+  F -->|`pnpm -C e2e e2e:full*`| H["Override tags to not @skip"]
   G --> I["Per-scenario BrowserContext from shared browser"]
   H --> I
   I --> J["Failure artifacts written to cucumber-report/artifacts"]
@@ -99,7 +99,7 @@ Behavior depends on instance state:
 - uninitialized instance: completes install and stores authenticated state
 - initialized instance: signs in and reuses authenticated state
 
-Because of that, the `@fresh` install scenario only runs in the `pnpm e2e:full*` flows. The default `pnpm e2e*` flows exclude `@fresh` via Cucumber config tags so they can be re-run against an already initialized instance.
+Because of that, the `@fresh` install scenario only runs in the `pnpm -C e2e e2e:full*` flows. The default `pnpm -C e2e e2e*` flows exclude `@fresh` via Cucumber config tags so they can be re-run against an already initialized instance.
 
 Reset all persisted E2E state:
 
@@ -126,7 +126,7 @@ pnpm -C e2e e2e:middleware:up
 Stop the full middleware stack:
 
 ```bash
-pnpm e2e:middleware:down
+pnpm -C e2e e2e:middleware:down
 ```
 
 The middleware stack includes:
@@ -141,15 +141,15 @@ The middleware stack includes:
 Fresh install verification:
 
 ```bash
-pnpm e2e:full
+pnpm -C e2e e2e:full
 ```
 
 Run the Cucumber suite against an already running middleware stack:
 
 ```bash
-pnpm e2e:middleware:up
-pnpm e2e
-pnpm e2e:middleware:down
+pnpm -C e2e e2e:middleware:up
+pnpm -C e2e e2e
+pnpm -C e2e e2e:middleware:down
 ```
 
 Artifacts and diagnostics:
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/eslint-suppressions.json b/eslint-suppressions.json
index 2de84456ee..4adca38aa0 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1334,11 +1334,6 @@
       "count": 9
     }
   },
-  "web/app/components/base/markdown-blocks/form.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 3
-    }
-  },
   "web/app/components/base/markdown-blocks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 10
@@ -1746,11 +1741,6 @@
       "count": 4
     }
   },
-  "web/app/components/billing/upgrade-btn/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 3
-    }
-  },
   "web/app/components/datasets/common/image-previewer/index.tsx": {
     "no-irregular-whitespace": {
       "count": 1
@@ -2532,11 +2522,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4435,11 +4420,6 @@
       "count": 1
     }
   },
-  "web/app/signin/one-more-step.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/signup/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
diff --git a/packages/contracts/generated/enterprise/types.gen.ts b/packages/contracts/generated/enterprise/types.gen.ts
index 078c737930..41a3013efb 100644
--- a/packages/contracts/generated/enterprise/types.gen.ts
+++ b/packages/contracts/generated/enterprise/types.gen.ts
@@ -85,6 +85,11 @@ export type AckDeploymentReq = {
   lastError?: LastError
 }
 
+export type AddGroupAppsRequest = {
+  id?: string
+  app_ids?: Array<string>
+}
+
 export type AppInstanceBasicInfo = {
   id?: string
   name?: string
@@ -346,6 +351,11 @@ export type CreateReleaseReq = {
   description?: string
 }
 
+export type CreateResourceGroupRequest = {
+  name?: string
+  description?: string
+}
+
 export type CreateSecretKeyReply = {
   id?: string
   name?: string
@@ -660,6 +670,17 @@ export type GetWorkspaceReply = {
   workspace?: Workspace
 }
 
+export type GroupAppItem = {
+  app_id?: string
+  app_name?: string
+  workspace_id?: string
+  workspace_name?: string
+  app_status?: number
+  token_usage?: string
+  rpm?: string
+  concurrency?: string
+}
+
 export type HealthzReply = {
   message?: string
   status?: string
@@ -685,6 +706,11 @@ export type InfoConfigReply = {
   PluginInstallationPermission?: PluginInstallationPermissionInfo
 }
 
+export type InnerAdmission = {
+  marker?: string
+  concurrencyGroupIds?: Array<string>
+}
+
 export type InnerBatchGetWebAppAccessModesByIdReq = {
   appIds?: Array<string>
 }
@@ -750,10 +776,34 @@ export type InnerGetWebAppAccessModeByIdRes = {
   accessMode?: string
 }
 
+export type InnerGroupConfig = {
+  id?: string
+  enabled?: boolean
+  membershipId?: string
+  limits?: Array<LimitConfig>
+}
+
 export type InnerIsUserAllowedToAccessWebAppRes = {
   result?: boolean
 }
 
+export type InnerReleaseAdmissionRequest = {
+  admission?: InnerAdmission
+}
+
+export type InnerReleaseAdmissionResponse = {
+  [key: string]: unknown
+}
+
+export type InnerResolveResponse = {
+  appId?: string
+  groups?: Array<InnerGroupConfig>
+  blocked?: boolean
+  blockGroupId?: string
+  blockReason?: string
+  admission?: InnerAdmission
+}
+
 export type InnerTryAddAccountToDefaultWorkspaceReply = {
   workspaceId?: string
   joined?: boolean
@@ -806,6 +856,13 @@ export type LicenseStatus = {
   workspaces?: ResourceQuota
 }
 
+export type LimitConfig = {
+  type?: number
+  threshold?: string
+  action?: number
+  reached?: boolean
+}
+
 export type LimitFields = {
   workspaceMembers?: number
   workspaces?: ResourceQuota
@@ -830,6 +887,11 @@ export type ListEnvironmentsReply = {
   pagination?: Pagination
 }
 
+export type ListGroupAppsResponse = {
+  items?: Array<GroupAppItem>
+  total?: string
+}
+
 export type ListMembersReply = {
   data?: Array<AccountDetail>
   pagination?: Pagination
@@ -840,6 +902,11 @@ export type ListReleasesReply = {
   pagination?: Pagination
 }
 
+export type ListResourceGroupsResponse = {
+  items?: Array<ResourceGroupItem>
+  total?: string
+}
+
 export type ListRuntimeInstancesReply = {
   data?: Array<RuntimeInstanceRow>
 }
@@ -1059,6 +1126,37 @@ export type ResolvedCredential = {
   value?: string
 }
 
+export type ResourceGroupDetail = {
+  id?: string
+  name?: string
+  description?: string
+  enabled?: boolean
+  rpm_limit?: number
+  rpm_action?: number
+  concurrency_limit?: number
+  concurrency_action?: number
+  token_quota?: string
+  token_action?: number
+  created_at?: string
+  updated_at?: string
+}
+
+export type ResourceGroupItem = {
+  id?: string
+  name?: string
+  description?: string
+  enabled?: boolean
+  rpm_limit?: number
+  concurrency_limit?: number
+  token_quota?: string
+  token_usage?: string
+  app_count?: string
+  rpm_status?: number
+  conc_status?: number
+  created_at?: string
+  updated_at?: string
+}
+
 export type ResourceQuota = {
   used?: number
   limit?: number
@@ -1135,6 +1233,23 @@ export type SearchAccessSubjectsReply = {
   data?: Array<AccessSubjectDisplay>
 }
 
+export type SearchAppItem = {
+  app_id?: string
+  app_name?: string
+  workspace_id?: string
+  workspace_name?: string
+  app_status?: number
+  icon?: string
+  icon_type?: string
+  icon_background?: string
+  created_by_name?: string
+}
+
+export type SearchAppsResponse = {
+  items?: Array<SearchAppItem>
+  total?: string
+}
+
 export type SearchForWhilteListCandidatesRes = {
   subjects?: Array<Subject>
   currPage?: number
@@ -1370,6 +1485,19 @@ export type UpdatePluginInstallationSettingsRequest = {
   restrictToMarketplaceOnly?: boolean
 }
 
+export type UpdateResourceGroupRequest = {
+  id?: string
+  name?: string
+  description?: string
+  enabled?: boolean
+  rpm_limit?: number
+  rpm_action?: number
+  concurrency_limit?: number
+  concurrency_action?: number
+  token_quota?: string
+  token_action?: number
+}
+
 export type UpdateUserReply = {
   account?: AccountDetail
 }
diff --git a/packages/contracts/generated/enterprise/zod.gen.ts b/packages/contracts/generated/enterprise/zod.gen.ts
index 1fcb927ef0..3bb3c24ee0 100644
--- a/packages/contracts/generated/enterprise/zod.gen.ts
+++ b/packages/contracts/generated/enterprise/zod.gen.ts
@@ -81,6 +81,11 @@ export const zAckDeploymentReply = z.object({
   newVersion: z.string().optional(),
 })
 
+export const zAddGroupAppsRequest = z.object({
+  id: z.string().optional(),
+  app_ids: z.array(z.string()).optional(),
+})
+
 export const zAppInstanceBasicInfo = z.object({
   id: z.string().optional(),
   name: z.string().optional(),
@@ -289,6 +294,11 @@ export const zCreateReleaseReq = z.object({
   description: z.string().optional(),
 })
 
+export const zCreateResourceGroupRequest = z.object({
+  name: z.string().optional(),
+  description: z.string().optional(),
+})
+
 export const zCreateSecretKeyReply = z.object({
   id: z.string().optional(),
   name: z.string().optional(),
@@ -570,6 +580,17 @@ export const zGetWebAppWhitelistSubjectsResMember = z.object({
   avatar: z.string().optional(),
 })
 
+export const zGroupAppItem = z.object({
+  app_id: z.string().optional(),
+  app_name: z.string().optional(),
+  workspace_id: z.string().optional(),
+  workspace_name: z.string().optional(),
+  app_status: z.int().optional(),
+  token_usage: z.string().optional(),
+  rpm: z.string().optional(),
+  concurrency: z.string().optional(),
+})
+
 export const zHealthzReply = z.object({
   message: z.string().optional(),
   status: z.string().optional(),
@@ -580,6 +601,11 @@ export const zHostEnvironmentConfig = z.object({
   joinTokenHash: z.string().optional(),
 })
 
+export const zInnerAdmission = z.object({
+  marker: z.string().optional(),
+  concurrencyGroupIds: z.array(z.string()).optional(),
+})
+
 export const zInnerBatchGetWebAppAccessModesByIdReq = z.object({
   appIds: z.array(z.string()).optional(),
 })
@@ -653,6 +679,12 @@ export const zInnerIsUserAllowedToAccessWebAppRes = z.object({
   result: z.boolean().optional(),
 })
 
+export const zInnerReleaseAdmissionRequest = z.object({
+  admission: zInnerAdmission.optional(),
+})
+
+export const zInnerReleaseAdmissionResponse = z.record(z.string(), z.unknown())
+
 export const zInnerTryAddAccountToDefaultWorkspaceReply = z.object({
   workspaceId: z.string().optional(),
   joined: z.boolean().optional(),
@@ -719,6 +751,29 @@ export const zAckDeploymentReq = z.object({
   lastError: zLastError.optional(),
 })
 
+export const zLimitConfig = z.object({
+  type: z.int().optional(),
+  threshold: z.string().optional(),
+  action: z.int().optional(),
+  reached: z.boolean().optional(),
+})
+
+export const zInnerGroupConfig = z.object({
+  id: z.string().optional(),
+  enabled: z.boolean().optional(),
+  membershipId: z.string().optional(),
+  limits: z.array(zLimitConfig).optional(),
+})
+
+export const zInnerResolveResponse = z.object({
+  appId: z.string().optional(),
+  groups: z.array(zInnerGroupConfig).optional(),
+  blocked: z.boolean().optional(),
+  blockGroupId: z.string().optional(),
+  blockReason: z.string().optional(),
+  admission: zInnerAdmission.optional(),
+})
+
 export const zListDeploymentBindingOptionsReply = z.object({
   slots: z.array(zDeploymentBindingOptionSlot).optional(),
 })
@@ -727,6 +782,11 @@ export const zListDeploymentEnvironmentOptionsReply = z.object({
   environments: z.array(zDeploymentEnvironmentOption).optional(),
 })
 
+export const zListGroupAppsResponse = z.object({
+  items: z.array(zGroupAppItem).optional(),
+  total: z.string().optional(),
+})
+
 export const zLoginTypesReply = z.object({
   enabledEmailCodeLogin: z.boolean().optional(),
   enableEmailPasswordLogin: z.boolean().optional(),
@@ -957,6 +1017,58 @@ export const zResolveCredentialsReply = z.object({
   resolved: z.array(zResolvedCredential).optional(),
 })
 
+export const zResourceGroupDetail = z.object({
+  id: z.string().optional(),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  enabled: z.boolean().optional(),
+  rpm_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  rpm_action: z.int().optional(),
+  concurrency_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  concurrency_action: z.int().optional(),
+  token_quota: z.string().optional(),
+  token_action: z.int().optional(),
+  created_at: z.string().optional(),
+  updated_at: z.string().optional(),
+})
+
+export const zResourceGroupItem = z.object({
+  id: z.string().optional(),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  enabled: z.boolean().optional(),
+  rpm_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  concurrency_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  token_quota: z.string().optional(),
+  token_usage: z.string().optional(),
+  app_count: z.string().optional(),
+  rpm_status: z.int().optional(),
+  conc_status: z.int().optional(),
+  created_at: z.string().optional(),
+  updated_at: z.string().optional(),
+})
+
+export const zListResourceGroupsResponse = z.object({
+  items: z.array(zResourceGroupItem).optional(),
+  total: z.string().optional(),
+})
+
 /**
  * ResourceQuota represents usage quota for a resource
  */
@@ -1115,6 +1227,23 @@ export const zSearchAccessSubjectsReply = z.object({
   data: z.array(zAccessSubjectDisplay).optional(),
 })
 
+export const zSearchAppItem = z.object({
+  app_id: z.string().optional(),
+  app_name: z.string().optional(),
+  workspace_id: z.string().optional(),
+  workspace_name: z.string().optional(),
+  app_status: z.int().optional(),
+  icon: z.string().optional(),
+  icon_type: z.string().optional(),
+  icon_background: z.string().optional(),
+  created_by_name: z.string().optional(),
+})
+
+export const zSearchAppsResponse = z.object({
+  items: z.array(zSearchAppItem).optional(),
+  total: z.string().optional(),
+})
+
 export const zSecretKey = z.object({
   id: z.string().optional(),
   name: z.string().optional(),
@@ -1398,6 +1527,27 @@ export const zUpdatePluginInstallationSettingsRequest = z.object({
   restrictToMarketplaceOnly: z.boolean().optional(),
 })
 
+export const zUpdateResourceGroupRequest = z.object({
+  id: z.string().optional(),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  enabled: z.boolean().optional(),
+  rpm_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  rpm_action: z.int().optional(),
+  concurrency_limit: z
+    .int()
+    .min(-2147483648, { error: 'Invalid value: Expected int32 to be >= -2147483648' })
+    .max(2147483647, { error: 'Invalid value: Expected int32 to be <= 2147483647' })
+    .optional(),
+  concurrency_action: z.int().optional(),
+  token_quota: z.string().optional(),
+  token_action: z.int().optional(),
+})
+
 export const zUpdateUserReply = z.object({
   account: zAccountDetail.optional(),
 })
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/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 0de33a2a71..b85fb1abba 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -166,7 +166,7 @@ export default function AccountPage() {
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
-                <RiGraduationCapFill className="mr-1 h-3 w-3" />
+                <RiGraduationCapFill aria-hidden="true" className="mr-1 h-3 w-3" />
                 <span className="system-2xs-medium">EDU</span>
               </PremiumBadge>
             )}
diff --git a/web/app/account/(commonLayout)/avatar.tsx b/web/app/account/(commonLayout)/avatar.tsx
index 3fefb8a319..ef1c4b7e8c 100644
--- a/web/app/account/(commonLayout)/avatar.tsx
+++ b/web/app/account/(commonLayout)/avatar.tsx
@@ -62,7 +62,7 @@ export default function AppSelector() {
                 {userProfile.name}
                 {isEducationAccount && (
                   <PremiumBadge size="s" color="blue" className="ml-1 px-2!">
-                    <span className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
+                    <span aria-hidden="true" className="mr-1 i-ri-graduation-cap-fill h-3 w-3" />
                     <span className="system-2xs-medium">EDU</span>
                   </PremiumBadge>
                 )}
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-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 5fd394ad45..418982fcb6 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -5,11 +5,6 @@ import type { PromptRole, PromptVariable } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@langgenius/dify-ui/tooltip'
 import {
   RiDeleteBinLine,
   RiErrorWarningFill,
@@ -25,6 +20,7 @@ import {
   Copy,
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
+import { Infotip } from '@/app/components/base/infotip'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
 import ConfigContext from '@/context/debug-configuration'
@@ -183,18 +179,13 @@ const AdvancedPromptInput: FC<Props> = ({
                         <div className="text-sm font-semibold text-indigo-800 uppercase">
                           {t('pageTitle.line1', { ns: 'appDebug' })}
                         </div>
-                        <Tooltip>
-                          <TooltipTrigger
-                            render={(
-                              <span className="ml-1 i-ri-question-line h-4 w-4 shrink-0 text-text-quaternary" />
-                            )}
-                          />
-                          <TooltipContent>
-                            <div className="w-[180px]">
-                              {t('promptTip', { ns: 'appDebug' })}
-                            </div>
-                          </TooltipContent>
-                        </Tooltip>
+                        <Infotip
+                          aria-label={t('promptTip', { ns: 'appDebug' })}
+                          className="ml-1"
+                          popupClassName="w-[180px]"
+                        >
+                          {t('promptTip', { ns: 'appDebug' })}
+                        </Infotip>
                       </div>
                     )}
                 <div className={cn(s.optionWrap, 'items-center space-x-1')}>
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 2935504f15..63cb16083e 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -5,11 +5,6 @@ import type { PromptVariable } from '@/models/debug'
 import type { GenRes } from '@/service/debug'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@langgenius/dify-ui/tooltip'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { produce } from 'immer'
@@ -21,6 +16,7 @@ import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/confi
 import AutomaticBtn from '@/app/components/app/configuration/config/automatic/automatic-btn'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { Infotip } from '@/app/components/base/infotip'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
@@ -183,18 +179,13 @@ const Prompt: FC<ISimplePromptInput> = ({
             <div className="flex items-center space-x-1">
               <div className="system-sm-semibold-uppercase text-text-secondary">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
               {!readonly && (
-                <Tooltip>
-                  <TooltipTrigger
-                    render={(
-                      <span className="ml-1 i-ri-question-line h-4 w-4 shrink-0 text-text-quaternary" />
-                    )}
-                  />
-                  <TooltipContent>
-                    <div className="w-[180px]">
-                      {t('promptTip', { ns: 'appDebug' })}
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
+                <Infotip
+                  aria-label={t('promptTip', { ns: 'appDebug' })}
+                  className="ml-1"
+                  popupClassName="w-[180px]"
+                >
+                  {t('promptTip', { ns: 'appDebug' })}
+                </Infotip>
               )}
             </div>
             <div className="flex items-center">
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-modal/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
index 094a293943..a0679a0376 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/index.spec.tsx
@@ -71,6 +71,25 @@ describe('ConfigModal', () => {
     }), undefined)
   })
 
+  it('should keep scrolling inside the form body so scrollbars do not cover dialog corners', () => {
+    render(
+      <ConfigModal
+        isCreate
+        isShow
+        payload={createPayload({ label: 'Question' })}
+        onClose={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    )
+
+    const dialog = screen.getByRole('dialog')
+    const scrollArea = screen.getByTestId('config-modal-scroll-area')
+
+    expect(dialog).toHaveClass('overflow-hidden!')
+    expect(scrollArea).toHaveClass('overflow-y-auto')
+    expect(scrollArea).toHaveClass('overflow-x-hidden')
+  })
+
   it('should block save when the label is missing', () => {
     render(
       <ConfigModal
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 1976a4ffa0..7e553092c0 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -148,12 +148,17 @@ const ConfigModal: FC<IConfigModalProps> = ({
           onClose()
       }}
     >
-      <DialogContent className="overflow-hidden! border-none text-left align-middle">
-        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden! border-none p-0! text-left align-middle">
+        <DialogTitle className="shrink-0 px-6 pt-6 title-2xl-semi-bold text-text-primary">
           {t(`variableConfig.${isCreate ? 'addModalTitle' : 'editModalTitle'}`, { ns: 'appDebug' })}
         </DialogTitle>
 
-        <div className="mb-8" ref={modalRef} tabIndex={-1}>
+        <div
+          ref={modalRef}
+          tabIndex={-1}
+          data-testid="config-modal-scroll-area"
+          className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto px-6 py-4 pb-8"
+        >
           <ConfigModalFormFields
             checkboxDefaultSelectValue={checkboxDefaultSelectValue}
             isStringInput={isStringInput}
@@ -172,10 +177,12 @@ const ConfigModal: FC<IConfigModalProps> = ({
             t={t}
           />
         </div>
-        <ModalFoot
-          onConfirm={handleConfirm}
-          onCancel={onClose}
-        />
+        <div className="shrink-0 px-6 pt-2 pb-6">
+          <ModalFoot
+            onConfirm={handleConfirm}
+            onCancel={onClose}
+          />
+        </div>
       </DialogContent>
     </Dialog>
   )
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/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 15d34f19d7..edfffd5726 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -131,7 +131,7 @@ const ParamsConfig = ({
               }
             }}
           >
-            <DialogContent className="w-full max-w-[480px] overflow-hidden! border-none text-left align-middle sm:min-w-[528px]">
+            <DialogContent className="w-full max-w-[480px] border-none text-left align-middle sm:min-w-[528px]">
 
               <ConfigContent
                 datasetConfigs={tempDataSetConfigs}
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/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index ae772d0750..f64972b1a1 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -17,7 +17,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
-import PremiumBadge from '@/app/components/base/premium-badge'
+import { PremiumBadgeButton } from '@/app/components/base/premium-badge'
 import Textarea from '@/app/components/base/textarea'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
@@ -55,10 +55,12 @@ export type ConfigParams = {
 
 const prefixSettings = 'overview.appInfo.settings'
 type SelectOption = {
-  value: string
+  value: Language
   name: string
 }
 
+const LANGUAGE_OPTIONS: SelectOption[] = languages.filter(item => item.supported)
+
 const createInputInfo = (appInfo: ISettingsModalProps['appInfo']) => {
   const {
     title,
@@ -139,8 +141,13 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   const { enableBilling, plan, webappCopyrightEnabled } = useProviderContext()
   const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
   const isFreePlan = plan.type === 'sandbox'
-  const languageOptions: SelectOption[] = languages.filter(item => item.supported)
-  const selectedLanguage = languageOptions.find(item => item.value === language)
+  const selectedLanguage = LANGUAGE_OPTIONS.find(item => item.value === language)
+
+  const handleLanguageChange = (nextValue: string | null) => {
+    const nextLanguage = LANGUAGE_OPTIONS.find(item => item.value === nextValue)
+    if (nextLanguage)
+      setLanguage(nextLanguage.value)
+  }
   const handlePlanClick = useCallback(() => {
     if (isFreePlan)
       setShowPricingModal()
@@ -308,17 +315,17 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className={cn('grow py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
               <Select
                 value={selectedLanguage?.value ?? null}
-                onValueChange={(nextValue) => {
-                  if (!nextValue)
-                    return
-                  setLanguage(nextValue as Language)
-                }}
+                onValueChange={handleLanguageChange}
               >
-                <SelectTrigger size="large" className="w-[200px]">
+                <SelectTrigger
+                  aria-label={t(`${prefixSettings}.language`, { ns: 'appOverview' })}
+                  size="large"
+                  className="w-[200px]"
+                >
                   {selectedLanguage?.name ?? t('placeholder.select', { ns: 'common' })}
                 </SelectTrigger>
                 <SelectContent>
-                  {languageOptions.map(item => (
+                  {LANGUAGE_OPTIONS.map(item => (
                     <SelectItem key={item.value} value={item.value}>
                       <SelectItemText>{item.name}</SelectItemText>
                       <SelectItemIndicator />
@@ -388,14 +395,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                       {/* upgrade button */}
                       {enableBilling && isFreePlan && (
                         <div className="h-[18px] select-none">
-                          <PremiumBadge size="s" color="blue" allowHover={true} onClick={handlePlanClick}>
+                          <PremiumBadgeButton size="s" color="blue" onClick={handlePlanClick}>
                             <span aria-hidden="true" className="i-custom-public-common-sparkles-soft flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
                             <div className="system-xs-medium">
                               <span className="p-1">
                                 {t('upgradeBtn.encourageShort', { ns: 'billing' })}
                               </span>
                             </div>
-                          </PremiumBadge>
+                          </PremiumBadgeButton>
                         </div>
                       )}
                     </div>
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/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 73f76a6ce6..e8932979a6 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -65,7 +65,7 @@ const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, a
           onHide()
       }}
     >
-      <DialogContent className="!mt-14 !w-[640px] !max-w-none overflow-hidden! border-none !p-6 text-left align-middle">
+      <DialogContent className="!mt-14 !w-[640px] !max-w-none border-none !p-6 text-left align-middle">
 
         <div className="mb-2 title-2xl-semi-bold text-text-primary">
           {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
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..e41079e66a 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' })
 
@@ -369,7 +369,7 @@ describe('OpeningSettingModal', () => {
     expect(screen.getByTestId('opener-input-section')).toBeInTheDocument()
     expect(screen.getByTestId('opener-questions-section')).toBeInTheDocument()
     expect(screen.getByText(/openingStatement\.editorTitle/)).toBeInTheDocument()
-    expect(screen.getByTestId('opening-questions-tooltip')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /openingStatement\.openingQuestionDescription/ })).toBeInTheDocument()
     expect(screen.queryByText(/openingStatement\.openingQuestionDescription/)).not.toBeInTheDocument()
   })
 
@@ -383,7 +383,7 @@ describe('OpeningSettingModal', () => {
     )
 
     act(() => {
-      fireEvent.mouseEnter(screen.getByTestId('opening-questions-tooltip'))
+      fireEvent.mouseEnter(screen.getByRole('button', { name: /openingStatement\.openingQuestionDescription/ }))
     })
 
     expect(screen.getByText(/openingStatement\.openingQuestionDescription/)).toBeInTheDocument()
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..fb2f341e64 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
@@ -4,7 +4,6 @@ import type { PromptVariable } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useBoolean } from 'ahooks'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -14,6 +13,7 @@ import { ReactSortable } from 'react-sortablejs'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
 import { getInputKeys } from '@/app/components/base/block-input'
 import Divider from '@/app/components/base/divider'
+import { Infotip } from '@/app/components/base/infotip'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { checkKeys, getNewVar } from '@/utils/var'
 
@@ -117,24 +117,14 @@ const OpeningSettingModal = ({
             <div className="text-sm font-medium text-text-primary">
               {t('openingStatement.openingQuestion', { ns: 'appDebug' })}
             </div>
-            <Tooltip>
-              <TooltipTrigger
-                delay={0}
-                render={(
-                  <button
-                    type="button"
-                    className="flex items-center rounded-sm p-px text-text-quaternary hover:text-text-tertiary"
-                    data-testid="opening-questions-tooltip"
-                    aria-label={t('openingStatement.openingQuestionDescription', { ns: 'appDebug' })}
-                  >
-                    <span className="i-ri-question-line h-3.5 w-3.5" />
-                  </button>
-                )}
-              />
-              <TooltipContent className="max-w-[220px] system-sm-regular text-text-secondary">
-                {t('openingStatement.openingQuestionDescription', { ns: 'appDebug' })}
-              </TooltipContent>
-            </Tooltip>
+            <Infotip
+              aria-label={t('openingStatement.openingQuestionDescription', { ns: 'appDebug' })}
+              className="h-3.5 w-3.5"
+              popupClassName="max-w-[220px] system-sm-regular text-text-secondary"
+              delay={0}
+            >
+              {t('openingStatement.openingQuestionDescription', { ns: 'appDebug' })}
+            </Infotip>
           </div>
           <div className="text-xs leading-[18px] font-medium text-text-tertiary">
             {tempSuggestedQuestions.length}
@@ -227,21 +217,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/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index 0c25a514fe..953487352c 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -1,9 +1,6 @@
 import { Switch } from '@langgenius/dify-ui/switch'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import {
-  RiQuestionLine,
-} from '@remixicon/react'
 import * as React from 'react'
+import { Infotip } from '@/app/components/base/infotip'
 
 type Props = {
   icon: any
@@ -41,16 +38,12 @@ const FeatureCard = ({
         <div className="flex grow items-center system-sm-semibold text-text-secondary">
           {title}
           {tooltip && (
-            <Tooltip>
-              <TooltipTrigger
-                render={(
-                  <div className="ml-0.5 p-px"><RiQuestionLine className="h-3.5 w-3.5 text-text-quaternary" /></div>
-                )}
-              />
-              <TooltipContent>
-                {tooltip}
-              </TooltipContent>
-            </Tooltip>
+            <Infotip
+              aria-label={typeof tooltip === 'string' ? tooltip : String(title)}
+              className="ml-0.5 h-3.5 w-3.5"
+            >
+              {tooltip}
+            </Infotip>
           )}
         </div>
         <Switch disabled={disabled} className="shrink-0" onCheckedChange={state => onChange?.(state)} checked={value} />
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..7ebe539a3d 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
@@ -226,24 +226,18 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
 
   return (
     <Dialog open>
-      <DialogContent className="mt-14! w-[600px]! max-w-none! overflow-hidden! border-none p-6! text-left align-middle">
+      <DialogContent className="mt-14! w-[600px]! max-w-none! border-none p-6! text-left align-middle">
 
         <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/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 37f9a510d4..176d82a492 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -12,6 +12,7 @@ import Label from '../../label'
 import { useInputTypeOptions } from './hooks'
 import Option from './option'
 import Trigger from './trigger'
+import { InputTypeEnum } from './types'
 
 type InputTypeSelectFieldProps = {
   label: string
@@ -32,6 +33,12 @@ const InputTypeSelectField = ({
   const inputTypeOptions = useInputTypeOptions(supportFile)
   const selected = inputTypeOptions.find(option => option.value === field.state.value)
 
+  const handleInputTypeChange = (next: string | null) => {
+    const inputType = InputTypeEnum.safeParse(next)
+    if (inputType.success)
+      field.handleChange(inputType.data)
+  }
+
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
       <Label
@@ -43,11 +50,7 @@ const InputTypeSelectField = ({
         items={inputTypeOptions}
         value={field.state.value ?? null}
         disabled={disabled}
-        onValueChange={(next) => {
-          if (next == null)
-            return
-          field.handleChange(next as InputType)
-        }}
+        onValueChange={handleInputTypeChange}
       >
         <SelectTrigger id={field.name} className="gap-x-0.5 px-2">
           <Trigger option={selected} />
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/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index 0927e6ac27..94c35a101d 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { Placement } from '@langgenius/dify-ui/popover'
-import type { ReactNode } from 'react'
+import type { MouseEvent, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 
@@ -58,6 +58,10 @@ export function Infotip({
   delay = 300,
   closeDelay = 200,
 }: InfotipProps) {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+  }
+
   return (
     <Popover>
       <PopoverTrigger
@@ -65,6 +69,7 @@ export function Infotip({
         delay={delay}
         closeDelay={closeDelay}
         aria-label={ariaLabel}
+        onClick={handleClick}
         className={cn(
           'inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
           className,
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/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 7c80590e24..55385c1c2e 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -12,28 +12,32 @@ import { formatDateForOutput, toDayjs } from '@/app/components/base/date-and-tim
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 
-enum DATA_FORMAT {
-  TEXT = 'text',
-  JSON = 'json',
-}
-enum SUPPORTED_TAGS {
-  LABEL = 'label',
-  INPUT = 'input',
-  TEXTAREA = 'textarea',
-  BUTTON = 'button',
-}
-enum SUPPORTED_TYPES {
-  TEXT = 'text',
-  PASSWORD = 'password',
-  EMAIL = 'email',
-  NUMBER = 'number',
-  DATE = 'date',
-  TIME = 'time',
-  DATETIME = 'datetime',
-  CHECKBOX = 'checkbox',
-  SELECT = 'select',
-  HIDDEN = 'hidden',
-}
+const DATA_FORMAT = {
+  TEXT: 'text',
+  JSON: 'json',
+} as const
+
+const SUPPORTED_TAGS = {
+  LABEL: 'label',
+  INPUT: 'input',
+  TEXTAREA: 'textarea',
+  BUTTON: 'button',
+} as const
+
+const SUPPORTED_TYPES = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+  EMAIL: 'email',
+  NUMBER: 'number',
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime',
+  CHECKBOX: 'checkbox',
+  SELECT: 'select',
+  HIDDEN: 'hidden',
+} as const
+
+type SupportedType = typeof SUPPORTED_TYPES[keyof typeof SUPPORTED_TYPES]
 
 const SUPPORTED_TYPES_SET = new Set<string>(Object.values(SUPPORTED_TYPES))
 
@@ -253,7 +257,7 @@ const MarkdownForm = ({ node }: { node: HastElement }) => {
           if (!isSafeName(name))
             return null
 
-          const type = str(child.properties.type) as SUPPORTED_TYPES
+          const type = str(child.properties.type) as SupportedType
 
           if (type === SUPPORTED_TYPES.DATE || type === SUPPORTED_TYPES.DATETIME) {
             return (
@@ -309,7 +313,10 @@ const MarkdownForm = ({ node }: { node: HastElement }) => {
               <Select
                 key={key}
                 defaultValue={formValues[name] as string | undefined}
-                onValueChange={val => updateValue(name, val as string)}
+                onValueChange={(val) => {
+                  if (val != null)
+                    updateValue(name, val)
+                }}
               >
                 <SelectTrigger className="w-full">
                   <SelectValue />
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/premium-badge/__tests__/index.spec.tsx b/web/app/components/base/premium-badge/__tests__/index.spec.tsx
index c3eb31c72e..ccbe4dfc92 100644
--- a/web/app/components/base/premium-badge/__tests__/index.spec.tsx
+++ b/web/app/components/base/premium-badge/__tests__/index.spec.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import PremiumBadge from '../index'
+import userEvent from '@testing-library/user-event'
+import PremiumBadge, { PremiumBadgeButton } from '../index'
 
 describe('PremiumBadge', () => {
   it('renders with default props', () => {
@@ -24,9 +25,9 @@ describe('PremiumBadge', () => {
 
   it('applies allowHover class when allowHover is true', () => {
     render(
-      <PremiumBadge allowHover>
+      <PremiumBadgeButton>
         Premium
-      </PremiumBadge>,
+      </PremiumBadgeButton>,
     )
     const badge = screen.getByText('Premium')
     expect(badge).toBeInTheDocument()
@@ -43,4 +44,22 @@ describe('PremiumBadge', () => {
     expect(badge).toBeInTheDocument()
     expect(badge).toHaveStyle('background-color: red')
   })
+
+  it('renders a static badge without button semantics', () => {
+    render(<PremiumBadge>Premium</PremiumBadge>)
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('renders an action badge as a button', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+
+    render(<PremiumBadgeButton onClick={handleClick}>Upgrade</PremiumBadgeButton>)
+
+    const button = screen.getByRole('button', { name: 'Upgrade' })
+    await user.click(button)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css
index f192a51e57..0796bf3cf6 100644
--- a/web/app/components/base/premium-badge/index.css
+++ b/web/app/components/base/premium-badge/index.css
@@ -1,5 +1,5 @@
 @utility premium-badge {
-  @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out;
+  @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-[background-color,background-image,box-shadow] duration-100 ease-out motion-reduce:transition-none;
   background-clip: padding-box, border-box;
 }
 
diff --git a/web/app/components/base/premium-badge/index.stories.tsx b/web/app/components/base/premium-badge/index.stories.tsx
index 5f3786a2ea..a0c16c19aa 100644
--- a/web/app/components/base/premium-badge/index.stories.tsx
+++ b/web/app/components/base/premium-badge/index.stories.tsx
@@ -1,14 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import PremiumBadge from '.'
+import PremiumBadge, { PremiumBadgeButton } from '.'
 
 const colors: Array<NonNullable<React.ComponentProps<typeof PremiumBadge>['color']>> = ['blue', 'indigo', 'gray', 'orange']
 
 const PremiumBadgeGallery = ({
   size = 'm',
-  allowHover = false,
 }: {
   size?: 's' | 'm'
-  allowHover?: boolean
 }) => {
   return (
     <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
@@ -16,7 +14,7 @@ const PremiumBadgeGallery = ({
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         {colors.map(color => (
           <div key={color} className="flex flex-col items-center gap-2 rounded-xl border border-transparent px-2 py-4 hover:border-divider-subtle hover:bg-background-default-subtle">
-            <PremiumBadge color={color} size={size} allowHover={allowHover}>
+            <PremiumBadge color={color} size={size}>
               <span className="px-2 text-xs font-semibold tracking-[0.14em] uppercase">Premium</span>
             </PremiumBadge>
             <span className="text-[11px] tracking-[0.16em] text-text-tertiary uppercase">{color}</span>
@@ -43,11 +41,9 @@ const meta = {
       control: 'radio',
       options: ['s', 'm'],
     },
-    allowHover: { control: 'boolean' },
   },
   args: {
     size: 'm',
-    allowHover: false,
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof PremiumBadgeGallery>
@@ -57,8 +53,10 @@ type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {}
 
-export const HoverEnabled: Story = {
-  args: {
-    allowHover: true,
-  },
+export const Action: Story = {
+  render: () => (
+    <PremiumBadgeButton color="blue" onClick={() => {}}>
+      <span className="px-2 text-xs font-semibold">Upgrade</span>
+    </PremiumBadgeButton>
+  ),
 }
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 42ce158606..55628ea0e9 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -1,8 +1,7 @@
 import type { VariantProps } from 'class-variance-authority'
-import type { CSSProperties, ReactNode } from 'react'
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
-import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
 
 const PremiumBadgeVariants = cva(
@@ -38,31 +37,66 @@ type PremiumBadgeProps = {
   color?: 'blue' | 'indigo' | 'gray' | 'orange'
   allowHover?: boolean
   styleCss?: CSSProperties
+  className?: string
   children?: ReactNode
-} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof PremiumBadgeVariants>
+} & VariantProps<typeof PremiumBadgeVariants>
 
-const PremiumBadge: React.FC<PremiumBadgeProps> = ({
+type PremiumBadgeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & Omit<PremiumBadgeProps, 'styleCss'> & {
+  style?: CSSProperties
+}
+
+function BadgeHighlight({ size }: { size?: PremiumBadgeProps['size'] }) {
+  return (
+    <Highlight
+      aria-hidden="true"
+      className={cn('absolute top-0 right-1/2 translate-x-[20%] opacity-50 transition-[opacity,transform] duration-100 ease-out hover:translate-x-[30%] hover:opacity-80 motion-reduce:transition-none', size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
+    />
+  )
+}
+
+function PremiumBadge({
   className,
   size,
   color,
   allowHover,
   styleCss,
   children,
-  ...props
-}) => {
+}: PremiumBadgeProps) {
   return (
-    <div
+    <span
       className={cn(PremiumBadgeVariants({ size, color, allowHover, className }), 'relative text-nowrap')}
       style={styleCss}
+    >
+      {children}
+      <BadgeHighlight size={size} />
+    </span>
+  )
+}
+
+export function PremiumBadgeButton({
+  className,
+  size,
+  color,
+  allowHover = true,
+  style,
+  children,
+  type = 'button',
+  ...props
+}: PremiumBadgeButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        PremiumBadgeVariants({ size, color, allowHover, className }),
+        'relative touch-manipulation text-nowrap focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
+      )}
+      style={style}
       {...props}
     >
       {children}
-      <Highlight
-        className={cn('absolute top-0 right-1/2 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80', size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
-      />
-    </div>
+      <BadgeHighlight size={size} />
+    </button>
   )
 }
-PremiumBadge.displayName = 'PremiumBadge'
 
 export default PremiumBadge
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/theme-selector.tsx b/web/app/components/base/theme-selector.tsx
index 1676dfff72..67dc7b7b29 100644
--- a/web/app/components/base/theme-selector.tsx
+++ b/web/app/components/base/theme-selector.tsx
@@ -12,7 +12,12 @@ import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 
-export type Theme = 'light' | 'dark' | 'system'
+const THEMES = ['light', 'dark', 'system'] as const
+export type Theme = typeof THEMES[number]
+
+const isTheme = (value: string): value is Theme => {
+  return (THEMES as readonly string[]).includes(value)
+}
 
 export default function ThemeSelector() {
   const { t } = useTranslation()
@@ -22,6 +27,11 @@ export default function ThemeSelector() {
     setTheme(newTheme)
   }
 
+  const handleThemeValueChange = (value: string) => {
+    if (isTheme(value))
+      handleThemeChange(value)
+  }
+
   const getCurrentIcon = () => {
     switch (theme) {
       case 'light': return <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
@@ -43,7 +53,7 @@ export default function ThemeSelector() {
         {getCurrentIcon()}
       </DropdownMenuTrigger>
       <DropdownMenuContent placement="bottom-end" sideOffset={6} popupClassName="w-[144px]">
-        <DropdownMenuRadioGroup value={theme || 'system'} onValueChange={value => handleThemeChange(value as Theme)}>
+        <DropdownMenuRadioGroup value={theme || 'system'} onValueChange={handleThemeValueChange}>
           <DropdownMenuRadioItem value="light" closeOnClick>
             <span className="i-ri-sun-line h-4 w-4 text-text-tertiary" />
             <span className="grow px-1 system-md-regular">{t('theme.light', { ns: 'common' })}</span>
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/billing/upgrade-btn/__tests__/index.spec.tsx b/web/app/components/billing/upgrade-btn/__tests__/index.spec.tsx
index 7eda24b944..5f6dc60038 100644
--- a/web/app/components/billing/upgrade-btn/__tests__/index.spec.tsx
+++ b/web/app/components/billing/upgrade-btn/__tests__/index.spec.tsx
@@ -38,10 +38,11 @@ describe('UpgradeBtn', () => {
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
-    it('should render premium badge by default', () => {
+    it('should render premium badge button by default', () => {
       render(<UpgradeBtn />)
 
-      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      expect(button).toHaveClass('premium-badge')
     })
 
     it('should render plain button when isPlain is true', () => {
@@ -75,7 +76,7 @@ describe('UpgradeBtn', () => {
 
   // Props tests (REQUIRED)
   describe('Props', () => {
-    it('should apply custom className to premium badge', () => {
+    it('should apply custom className to premium badge button', () => {
       const customClass = 'custom-upgrade-btn'
 
       const { container } = render(<UpgradeBtn className={customClass} />)
@@ -93,7 +94,7 @@ describe('UpgradeBtn', () => {
       expect(button).toHaveClass(customClass)
     })
 
-    it('should apply custom style to premium badge', () => {
+    it('should apply custom style to premium badge button', () => {
       const customStyle = { padding: '10px' }
 
       const { container } = render(<UpgradeBtn style={customStyle} />)
@@ -132,13 +133,13 @@ describe('UpgradeBtn', () => {
 
   // User Interactions
   describe('User Interactions', () => {
-    it('should call custom onClick when provided and premium badge is clicked', async () => {
+    it('should call custom onClick when provided and premium badge button is clicked', async () => {
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
       render(<UpgradeBtn onClick={handleClick} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockSetShowPricingModal).not.toHaveBeenCalled()
@@ -156,12 +157,12 @@ describe('UpgradeBtn', () => {
       expect(mockSetShowPricingModal).not.toHaveBeenCalled()
     })
 
-    it('should open pricing modal when no custom onClick is provided and premium badge is clicked', async () => {
+    it('should open pricing modal when no custom onClick is provided and premium badge button is clicked', async () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
@@ -176,13 +177,13 @@ describe('UpgradeBtn', () => {
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
 
-    it('should track gtag event when loc is provided and badge is clicked', async () => {
+    it('should track gtag event when loc is provided and badge button is clicked', async () => {
       const user = userEvent.setup()
       const loc = 'header-navigation'
 
       render(<UpgradeBtn loc={loc} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockGtag).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
@@ -208,8 +209,8 @@ describe('UpgradeBtn', () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockGtag).not.toHaveBeenCalled()
     })
@@ -219,8 +220,8 @@ describe('UpgradeBtn', () => {
       delete gtagWindow.gtag
 
       render(<UpgradeBtn loc="test-location" />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockGtag).not.toHaveBeenCalled()
     })
@@ -231,8 +232,8 @@ describe('UpgradeBtn', () => {
       const loc = 'settings-page'
 
       render(<UpgradeBtn onClick={handleClick} loc={loc} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledTimes(1)
@@ -260,8 +261,8 @@ describe('UpgradeBtn', () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn onClick={undefined} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
@@ -270,8 +271,8 @@ describe('UpgradeBtn', () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn loc={undefined} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockGtag).not.toHaveBeenCalled()
     })
@@ -292,8 +293,8 @@ describe('UpgradeBtn', () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn loc="" />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       expect(mockGtag).not.toHaveBeenCalled()
     })
@@ -391,19 +392,26 @@ describe('UpgradeBtn', () => {
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
-    it('should be clickable for premium badge variant', async () => {
+    it('should be keyboard accessible for premium badge button variant', async () => {
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
       render(<UpgradeBtn onClick={handleClick} />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-
-      // Click badge
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.tab()
+      expect(button).toHaveFocus()
+      await user.keyboard('{Enter}')
 
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
+    it('should have proper button role for premium badge button variant', () => {
+      render(<UpgradeBtn />)
+
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      expect(button).toHaveClass('premium-badge')
+    })
+
     it('should have proper button role when isPlain is true', () => {
       render(<UpgradeBtn isPlain />)
 
@@ -418,8 +426,8 @@ describe('UpgradeBtn', () => {
       const user = userEvent.setup()
 
       render(<UpgradeBtn />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       await waitFor(() => {
         expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
@@ -431,8 +439,8 @@ describe('UpgradeBtn', () => {
       const handleClick = vi.fn()
 
       render(<UpgradeBtn onClick={handleClick} loc="integration-test" />)
-      const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
-      await user.click(badge)
+      const button = screen.getByRole('button', { name: /billing\.upgradeBtn\.encourage/i })
+      await user.click(button)
 
       await waitFor(() => {
         expect(handleClick).toHaveBeenCalledTimes(1)
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index 5eb1eb1d7f..e5b53555c2 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContext } from '@/context/modal-context'
-import PremiumBadge from '../../base/premium-badge'
+import { PremiumBadgeButton } from '../../base/premium-badge'
 
 type Props = {
   className?: string
@@ -20,6 +20,8 @@ type Props = {
   labelKey?: Exclude<I18nKeysWithPrefix<'billing'>, 'plans.community.features' | 'plans.enterprise.features' | 'plans.premium.features'>
 }
 
+type GtagHandler = (command: 'event', action: 'click_upgrade_btn', payload: { loc: string }) => void
+
 const UpgradeBtn: FC<Props> = ({
   className,
   size = 'm',
@@ -36,12 +38,13 @@ const UpgradeBtn: FC<Props> = ({
     if (_onClick)
       _onClick()
     else
-      (setShowPricingModal as any)()
+      setShowPricingModal()
   }
   const onClick = () => {
     handleClick()
-    if (loc && (window as any).gtag) {
-      (window as any).gtag('event', 'click_upgrade_btn', {
+    const gtag = (window as Window & { gtag?: GtagHandler }).gtag
+    if (loc && gtag) {
+      gtag('event', 'click_upgrade_btn', {
         loc,
       })
     }
@@ -63,21 +66,20 @@ const UpgradeBtn: FC<Props> = ({
   }
 
   return (
-    <PremiumBadge
+    <PremiumBadgeButton
       size={size}
       color="blue"
-      allowHover={true}
       onClick={onClick}
       className={className}
       style={style}
     >
-      <SparklesSoft className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
+      <SparklesSoft aria-hidden="true" className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
       <div className="system-xs-medium">
         <span className="p-1">
           {label}
         </span>
       </div>
-    </PremiumBadge>
+    </PremiumBadgeButton>
   )
 }
 export default React.memo(UpgradeBtn)
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/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index f0740e9cf4..92e9136555 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -3,7 +3,6 @@
 import type { FC } from 'react'
 import type { PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { Button } from '@langgenius/dify-ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   RiAlertFill,
   RiSearchEyeLine,
@@ -11,6 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
+import { Infotip } from '@/app/components/base/infotip'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
@@ -191,18 +191,13 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                     onSelect={onDocLanguageChange}
                     disabled={currentDocForm !== ChunkingMode.qa}
                   />
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={(
-                        <span className="flex h-3.5 w-3.5 shrink-0 p-px">
-                          <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                        </span>
-                      )}
-                    />
-                    <TooltipContent>
-                      {t('stepTwo.QATip', { ns: 'datasetCreation' })}
-                    </TooltipContent>
-                  </Tooltip>
+                  <Infotip
+                    aria-label={t('stepTwo.QATip', { ns: 'datasetCreation' })}
+                    className="h-3.5 w-3.5"
+                    iconClassName="h-full w-full"
+                  >
+                    {t('stepTwo.QATip', { ns: 'datasetCreation' })}
+                  </Infotip>
                 </div>
                 {currentDocForm === ChunkingMode.qa && (
                   <div
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/index-method/__tests__/index.spec.tsx b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
index 7aa11b4d7a..eb55acfb38 100644
--- a/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
@@ -14,7 +14,9 @@ describe('IndexMethod', () => {
     vi.clearAllMocks()
   })
 
-  const getKeywordSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
+  const getKeywordSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords', {
+    selector: 'input[type="range"]',
+  })
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
diff --git a/web/app/components/datasets/settings/index-method/__tests__/keyword-number.spec.tsx b/web/app/components/datasets/settings/index-method/__tests__/keyword-number.spec.tsx
index cd0d56bbeb..92516f00a4 100644
--- a/web/app/components/datasets/settings/index-method/__tests__/keyword-number.spec.tsx
+++ b/web/app/components/datasets/settings/index-method/__tests__/keyword-number.spec.tsx
@@ -11,7 +11,9 @@ describe('KeyWordNumber', () => {
     vi.clearAllMocks()
   })
 
-  const getSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
+  const getSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords', {
+    selector: 'input[type="range"]',
+  })
 
   describe('Rendering', () => {
     it('should render without crashing', () => {
@@ -24,9 +26,10 @@ describe('KeyWordNumber', () => {
       expect(screen.getByText(/form\.numberOfKeywords/)).toBeInTheDocument()
     })
 
-    it('should render tooltip with question icon', () => {
+    it('should render infotip with question icon', () => {
       render(<KeyWordNumber {...defaultProps} />)
-      const container = screen.getByText(/form\.numberOfKeywords/).closest('div')?.parentElement
+      const trigger = screen.getByRole('button', { name: 'datasetSettings.form.numberOfKeywords' })
+      const container = trigger.parentElement
       const questionIcon = container?.querySelector('.i-ri-question-line')
       expect(questionIcon).toBeInTheDocument()
     })
diff --git a/web/app/components/datasets/settings/index-method/keyword-number.tsx b/web/app/components/datasets/settings/index-method/keyword-number.tsx
index a31ab07160..b6a90155f0 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -7,10 +7,10 @@ import {
   NumberFieldInput,
 } from '@langgenius/dify-ui/number-field'
 import { Slider } from '@langgenius/dify-ui/slider'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Infotip } from '@/app/components/base/infotip'
 
 const MIN_KEYWORD_NUMBER = 0
 const MAX_KEYWORD_NUMBER = 50
@@ -36,16 +36,12 @@ const KeyWordNumber = ({
         <div className="truncate system-xs-medium text-text-secondary">
           {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
         </div>
-        <Tooltip>
-          <TooltipTrigger
-            render={(
-              <span className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary" />
-            )}
-          />
-          <TooltipContent>
-            {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
-          </TooltipContent>
-        </Tooltip>
+        <Infotip
+          aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
+          className="h-3.5 w-3.5"
+        >
+          {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
+        </Infotip>
       </div>
       <Slider
         className="mr-3 w-[206px] shrink-0"
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__/index.spec.tsx b/web/app/components/header/__tests__/index.spec.tsx
index ba284829f3..0e9ef6493d 100644
--- a/web/app/components/header/__tests__/index.spec.tsx
+++ b/web/app/components/header/__tests__/index.spec.tsx
@@ -45,7 +45,7 @@ vi.mock('@/app/components/header/tools-nav', () => ({
 }))
 
 vi.mock('@/app/components/header/plan-badge', () => ({
-  default: ({ onClick, plan }: { onClick?: () => void, plan?: string }) => (
+  PlanBadge: ({ onClick, plan }: { onClick?: () => void, plan?: string }) => (
     <button data-testid="plan-badge" onClick={onClick} data-plan={plan} />
   ),
 }))
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-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 75d7200666..e1e134e864 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -65,7 +65,7 @@ function ComplianceDocActionVisual({
         disabled={!canShowUpgradeTooltip}
         render={(
           <PremiumBadge color="blue" allowHover={true}>
-            <SparklesSoft className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
+            <SparklesSoft aria-hidden="true" className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
             <div className="px-1 system-xs-medium">
               {upgradeText}
             </div>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index a86da65797..934a003c4c 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -12,7 +12,7 @@ import {
 import { toast } from '@langgenius/dify-ui/toast'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import PlanBadge from '@/app/components/header/plan-badge'
+import { PlanBadge } from '@/app/components/header/plan-badge'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
 import { basePath } from '@/utils/var'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index f75b42bc45..a838c49001 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -61,7 +61,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
   }
   return (
     <Dialog open>
-      <DialogContent className="w-[640px]! max-w-none! overflow-hidden! border-none p-8! pb-6! text-left align-middle">
+      <DialogContent className="w-[640px]! max-w-none! border-none p-8! pb-6! text-left align-middle">
 
         <div className="mb-2 text-xl font-semibold text-text-primary">
           {data.name
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/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index e8b99bbcea..6d87e6af33 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -15,6 +15,7 @@ import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge/index'
 import GridMask from '@/app/components/base/grid-mask'
+import { Infotip } from '@/app/components/base/infotip'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import s from '@/app/components/custom/style.module.css'
 import { AddCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
@@ -152,18 +153,14 @@ const ModelLoadBalancingConfigs = ({
           <div className="grow">
             <div className="flex items-center gap-1 text-sm text-text-primary">
               {t('modelProvider.loadBalancing', { ns: 'common' })}
-              <Tooltip>
-                <TooltipTrigger
-                  render={(
-                    <span className="flex h-3 w-3 shrink-0 p-px">
-                      <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                    </span>
-                  )}
-                />
-                <TooltipContent className="max-w-[300px]">
-                  {t('modelProvider.loadBalancingInfo', { ns: 'common' })}
-                </TooltipContent>
-              </Tooltip>
+              <Infotip
+                aria-label={t('modelProvider.loadBalancingInfo', { ns: 'common' })}
+                className="h-3 w-3"
+                iconClassName="h-full w-full"
+                popupClassName="max-w-[300px]"
+              >
+                {t('modelProvider.loadBalancingInfo', { ns: 'common' })}
+              </Infotip>
             </div>
             <div className="text-xs text-text-tertiary">{t('modelProvider.loadBalancingDescription', { ns: 'common' })}</div>
           </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 15632fb898..4ed93a98e8 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -187,7 +187,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
             onClose?.()
         }}
       >
-        <DialogContent className="w-[640px] max-w-none overflow-hidden! border-none px-8 pt-8 text-left align-middle">
+        <DialogContent className="w-[640px] max-w-none border-none px-8 pt-8 text-left align-middle">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">
             <div className="pb-3 font-semibold">
               <div className="h-[30px]">
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index b53193198c..4e82775a17 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -19,7 +19,7 @@ import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import LicenseNav from './license-env'
-import PlanBadge from './plan-badge'
+import { PlanBadge } from './plan-badge'
 import PluginsNav from './plugins-nav'
 import ToolsNav from './tools-nav'
 
diff --git a/web/app/components/header/license-env/index.tsx b/web/app/components/header/license-env/index.tsx
index fd360796b1..e7112a61f1 100644
--- a/web/app/components/header/license-env/index.tsx
+++ b/web/app/components/header/license-env/index.tsx
@@ -17,7 +17,7 @@ const LicenseNav = () => {
     const count = dayjs(expiredAt).diff(dayjs(), 'days')
     return (
       <PremiumBadge color="orange" className="select-none">
-        <RiHourglass2Fill className="flex size-3 items-center pl-0.5 text-components-premium-badge-indigo-text-stop-0" />
+        <RiHourglass2Fill aria-hidden="true" className="flex size-3 items-center pl-0.5 text-components-premium-badge-indigo-text-stop-0" />
         {count <= 1 && <span className="px-0.5 system-xs-medium">{t('license.expiring', { ns: 'common', count })}</span>}
         {count > 1 && <span className="px-0.5 system-xs-medium">{t('license.expiring_plural', { ns: 'common', count })}</span>}
       </PremiumBadge>
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/header/plan-badge/__tests__/index.spec.tsx b/web/app/components/header/plan-badge/__tests__/index.spec.tsx
index 3abb791340..4e562ecf99 100644
--- a/web/app/components/header/plan-badge/__tests__/index.spec.tsx
+++ b/web/app/components/header/plan-badge/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import { vi } from 'vitest'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '../../../billing/type'
-import PlanBadge from '../index'
+import { PlanBadge } from '../index'
 
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: vi.fn(),
@@ -34,6 +34,20 @@ describe('PlanBadge', () => {
     expect(
       screen.getByText('billing.upgradeBtn.encourageShort'),
     ).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('should render upgrade action as a button when onClick is provided', () => {
+    const handleClick = vi.fn()
+    mockUseProviderContext.mockReturnValue(
+      createMockProviderContextValue({ isFetchedPlan: true }),
+    )
+
+    render(<PlanBadge plan={Plan.sandbox} sandboxAsUpgrade={true} onClick={handleClick} />)
+
+    const button = screen.getByRole('button', { name: 'billing.upgradeBtn.encourageShort' })
+    fireEvent.click(button)
+    expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
   it('should render sandbox badge when plan is sandbox and sandboxAsUpgrade is false', () => {
@@ -42,6 +56,7 @@ describe('PlanBadge', () => {
     )
     render(<PlanBadge plan={Plan.sandbox} sandboxAsUpgrade={false} />)
     expect(screen.getByText(Plan.sandbox)).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
 
   it('should render professional badge when plan is professional', () => {
@@ -87,7 +102,7 @@ describe('PlanBadge', () => {
       createMockProviderContextValue({ isFetchedPlan: true }),
     )
     render(<PlanBadge plan={Plan.team} onClick={handleClick} />)
-    fireEvent.click(screen.getByText(Plan.team))
+    fireEvent.click(screen.getByRole('button', { name: Plan.team }))
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
 
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index 9547ddf6f7..c889e9d5ae 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -1,11 +1,11 @@
-import type { FC } from 'react'
+import type { ReactNode } from 'react'
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useProviderContext } from '@/context/provider-context'
 import { SparklesSoft } from '../../base/icons/src/public/common'
-import PremiumBadge from '../../base/premium-badge'
+import PremiumBadge, { PremiumBadgeButton } from '../../base/premium-badge'
 import { Plan } from '../../billing/type'
 
 type PlanBadgeProps = {
@@ -15,7 +15,33 @@ type PlanBadgeProps = {
   onClick?: () => void
 }
 
-const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
+function PlanBadgeShell({
+  size,
+  color,
+  allowHover,
+  onClick,
+  children,
+}: Pick<PlanBadgeProps, 'allowHover' | 'onClick'> & {
+  size?: 's' | 'm'
+  color: 'blue' | 'indigo' | 'gray'
+  children: ReactNode
+}) {
+  if (onClick) {
+    return (
+      <PremiumBadgeButton className="select-none" size={size} color={color} allowHover={allowHover} onClick={onClick}>
+        {children}
+      </PremiumBadgeButton>
+    )
+  }
+
+  return (
+    <PremiumBadge className="select-none" size={size} color={color}>
+      {children}
+    </PremiumBadge>
+  )
+}
+
+export function PlanBadge({ plan, allowHover, sandboxAsUpgrade = false, onClick }: PlanBadgeProps) {
   const { isFetchedPlan, isEducationWorkspace } = useProviderContext()
   const { t } = useTranslation()
 
@@ -23,51 +49,49 @@ const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = fa
     return null
   if (plan === Plan.sandbox && sandboxAsUpgrade) {
     return (
-      <PremiumBadge className="select-none" color="blue" allowHover={allowHover} onClick={onClick}>
-        <SparklesSoft className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
+      <PlanBadgeShell color="blue" allowHover={allowHover} onClick={onClick}>
+        <SparklesSoft aria-hidden="true" className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
         <div className="system-xs-medium">
           <span className="p-1 whitespace-nowrap">
             {t('upgradeBtn.encourageShort', { ns: 'billing' })}
           </span>
         </div>
-      </PremiumBadge>
+      </PlanBadgeShell>
     )
   }
   if (plan === Plan.sandbox) {
     return (
-      <PremiumBadge className="select-none" size="s" color="gray" allowHover={allowHover} onClick={onClick}>
+      <PlanBadgeShell size="s" color="gray" allowHover={allowHover} onClick={onClick}>
         <div className="system-2xs-medium-uppercase">
           <span className="p-1">
             {plan}
           </span>
         </div>
-      </PremiumBadge>
+      </PlanBadgeShell>
     )
   }
   if (plan === Plan.professional) {
     return (
-      <PremiumBadge className="select-none" size="s" color="blue" allowHover={allowHover} onClick={onClick}>
+      <PlanBadgeShell size="s" color="blue" allowHover={allowHover} onClick={onClick}>
         <div className="system-2xs-medium-uppercase">
           <span className="inline-flex items-center gap-1 p-1">
-            {isEducationWorkspace && <RiGraduationCapFill className="h-3 w-3" />}
+            {isEducationWorkspace && <RiGraduationCapFill aria-hidden="true" className="h-3 w-3" />}
             pro
           </span>
         </div>
-      </PremiumBadge>
+      </PlanBadgeShell>
     )
   }
   if (plan === Plan.team) {
     return (
-      <PremiumBadge className="select-none" size="s" color="indigo" allowHover={allowHover} onClick={onClick}>
+      <PlanBadgeShell size="s" color="indigo" allowHover={allowHover} onClick={onClick}>
         <div className="system-2xs-medium-uppercase">
           <span className="p-1">
             {plan}
           </span>
         </div>
-      </PremiumBadge>
+      </PlanBadgeShell>
     )
   }
   return null
 }
-
-export default PlanBadge
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/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index 7972ea5f89..f2779772b6 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -2,16 +2,15 @@ import type { Node } from 'reactflow'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   RiAddLine,
-  RiQuestionLine,
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { Infotip } from '@/app/components/base/infotip'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useAllMCPTools } from '@/service/use-tools'
@@ -21,7 +20,7 @@ type Props = {
   value: ToolValue[]
   label: string
   required?: boolean
-  tooltip?: any
+  tooltip?: React.ReactNode
   supportCollapse?: boolean
   scope?: string
   onChange: (value: ToolValue[]) => void
@@ -111,18 +110,16 @@ const MultipleToolSelector = ({
         >
           <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">{label}</div>
           {required && <div className="text-red-500">*</div>}
-          {tooltip && (
-            <Tooltip>
-              <TooltipTrigger
-                render={(
-                  <div><RiQuestionLine className="h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" /></div>
-                )}
-              />
-              <TooltipContent>
-                {tooltip}
-              </TooltipContent>
-            </Tooltip>
-          )}
+          {tooltip
+            ? (
+                <Infotip
+                  aria-label={typeof tooltip === 'string' ? tooltip : label}
+                  className="h-3.5 w-3.5"
+                >
+                  {tooltip}
+                </Infotip>
+              )
+            : null}
           {supportCollapse && (
             <ArrowDownRoundFill
               className={cn(
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/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
index 7ceb8607c5..726c6f32dc 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
@@ -257,6 +257,10 @@ const createDefaultProps = (overrides: Partial<Parameters<typeof CreateSubscript
   ...overrides,
 })
 
+const getCreateButton = () => screen.getByRole('button', {
+  name: /pluginTrigger\.subscription\.(createButton|empty\.button)/,
+})
+
 const setupMocks = (config: {
   providerInfo?: TriggerProviderApiEntity
   oauthConfig?: TriggerOAuthConfig
@@ -353,7 +357,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Assert
       // Assert
-      expect(screen.getByRole('button'))!.toBeInTheDocument()
+      expect(getCreateButton()).toBeInTheDocument()
     })
 
     it('should render icon button when buttonType is ICON_BUTTON', () => {
@@ -387,7 +391,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Assert
       // Assert
-      expect(screen.getByRole('button'))!.toBeInTheDocument()
+      expect(getCreateButton()).toBeInTheDocument()
     })
 
     it('should apply shape prop correctly', () => {
@@ -592,7 +596,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Assert
       // Assert
-      expect(screen.getByRole('button'))!.toHaveTextContent('pluginTrigger.subscription.createButton.apiKey')
+      expect(getCreateButton()).toHaveTextContent('pluginTrigger.subscription.createButton.apiKey')
     })
 
     it('should display correct button text for MANUAL method', () => {
@@ -610,7 +614,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Assert
       // Assert
-      expect(screen.getByRole('button'))!.toHaveTextContent('pluginTrigger.subscription.createButton.manual')
+      expect(getCreateButton()).toHaveTextContent('pluginTrigger.subscription.createButton.manual')
     })
 
     it('should display default button text when multiple methods are supported', () => {
@@ -628,7 +632,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Assert
       // Assert
-      expect(screen.getByRole('button'))!.toHaveTextContent('pluginTrigger.subscription.empty.button')
+      expect(getCreateButton()).toHaveTextContent('pluginTrigger.subscription.empty.button')
     })
   })
 
@@ -780,7 +784,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Act
       render(<CreateSubscriptionButton {...props} />)
-      const button = screen.getByRole('button')
+      const button = getCreateButton()
       fireEvent.click(button)
 
       // Assert - modal should not open
@@ -830,7 +834,7 @@ describe('CreateSubscriptionButton', () => {
 
       // Act
       render(<CreateSubscriptionButton {...props} />)
-      const button = screen.getByRole('button')
+      const button = getCreateButton()
       fireEvent.click(button)
 
       // Assert - modal should open
@@ -1328,7 +1332,7 @@ describe('CreateSubscriptionButton', () => {
       render(<CreateSubscriptionButton {...props} />)
 
       // Assert - should not have settings divider
-      const button = screen.getByRole('button')
+      const button = getCreateButton()
       const divider = button.querySelector('.bg-text-primary-on-surface')
       expect(divider).not.toBeInTheDocument()
     })
@@ -1447,7 +1451,7 @@ describe('CreateSubscriptionButton', () => {
       render(<CreateSubscriptionButton {...props} />)
 
       // Assert
-      const button = screen.getByRole('button')
+      const button = getCreateButton()
       expect(button)!.toHaveClass('w-full')
     })
 
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/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index 9091cd337c..7060b39dcf 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -9,6 +9,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
+import { Infotip } from '@/app/components/base/infotip'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
 import { SupportedCreationMethods } from '../../../types'
@@ -124,18 +125,13 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
         value: SupportedCreationMethods.MANUAL,
         label: t('subscription.addType.options.manual.description', { ns: 'pluginTrigger' }),
         extra: (
-          <Tooltip>
-            <TooltipTrigger
-              render={(
-                <span className="flex h-3.5 w-3.5 shrink-0 p-px">
-                  <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                </span>
-              )}
-            />
-            <TooltipContent>
-              {t('subscription.addType.options.manual.tip', { ns: 'pluginTrigger' })}
-            </TooltipContent>
-          </Tooltip>
+          <Infotip
+            aria-label={t('subscription.addType.options.manual.tip', { ns: 'pluginTrigger' })}
+            className="h-3.5 w-3.5"
+            iconClassName="h-full w-full"
+          >
+            {t('subscription.addType.options.manual.tip', { ns: 'pluginTrigger' })}
+          </Infotip>
         ),
         show: supportedMethods.includes(SupportedCreationMethods.MANUAL),
       },
@@ -186,6 +182,15 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
     }
   }
 
+  const handleCreateTypeChange = (value: string | null) => {
+    const option = visibleOptions.find(item => item.value === value)
+    if (!option)
+      return
+
+    setIsMenuOpen(false)
+    void onChooseCreateType(option.value)
+  }
+
   const onClickCreate = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (subscriptionCount >= MAX_COUNT) {
       e.stopPropagation()
@@ -209,12 +214,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
         value={methodType === DEFAULT_METHOD ? null : methodType}
         open={shouldAllowSelect ? isMenuOpen : false}
         onOpenChange={setIsMenuOpen}
-        onValueChange={(value) => {
-          if (!value)
-            return
-          setIsMenuOpen(false)
-          void onChooseCreateType(value as SupportedCreationMethods)
-        }}
+        onValueChange={handleCreateTypeChange}
       >
         <SelectTrigger
           render={<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-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index 66dfabb4db..76c5a02065 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Infotip } from '@/app/components/base/infotip'
 import { CreateSubscriptionButton } from './create'
 import { CreateButtonType } from './create/types'
 import SubscriptionCard from './subscription-card'
@@ -31,18 +31,13 @@ export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
             <span className="system-sm-semibold-uppercase text-text-secondary">
               {t('subscription.listNum', { ns: 'pluginTrigger', num: subscriptionCount })}
             </span>
-            <Tooltip>
-              <TooltipTrigger
-                render={(
-                  <span className="flex h-3.5 w-3.5 shrink-0 p-px">
-                    <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                  </span>
-                )}
-              />
-              <TooltipContent>
-                {t('subscription.list.tip', { ns: 'pluginTrigger' })}
-              </TooltipContent>
-            </Tooltip>
+            <Infotip
+              aria-label={t('subscription.list.tip', { ns: 'pluginTrigger' })}
+              className="h-3.5 w-3.5"
+              iconClassName="h-full w-full"
+            >
+              {t('subscription.list.tip', { ns: 'pluginTrigger' })}
+            </Infotip>
           </div>
         )}
         <CreateSubscriptionButton
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index 06b0724247..e5be965a12 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiCheckLine, RiDeleteBinLine, RiWebhookLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
+import { Infotip } from '@/app/components/base/infotip'
 import { CreateSubscriptionButton } from './create'
 import { CreateButtonType } from './create/types'
 import { DeleteConfirm } from './delete-confirm'
@@ -34,18 +34,13 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
             <span className="system-sm-semibold-uppercase text-text-secondary">
               {t('subscription.listNum', { ns: 'pluginTrigger', num: subscriptionCount })}
             </span>
-            <Tooltip>
-              <TooltipTrigger
-                render={(
-                  <span className="flex h-3.5 w-3.5 shrink-0 p-px">
-                    <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                  </span>
-                )}
-              />
-              <TooltipContent>
-                {t('subscription.list.tip', { ns: 'pluginTrigger' })}
-              </TooltipContent>
-            </Tooltip>
+            <Infotip
+              aria-label={t('subscription.list.tip', { ns: 'pluginTrigger' })}
+              className="h-3.5 w-3.5"
+              iconClassName="h-full w-full"
+            >
+              {t('subscription.list.tip', { ns: 'pluginTrigger' })}
+            </Infotip>
           </div>
           <CreateSubscriptionButton
             buttonType={CreateButtonType.ICON_BUTTON}
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/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 0970d66cfc..1c2f7177a5 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -246,8 +246,8 @@ const Popup = ({
               {t('common.publishAs', { ns: 'pipeline' })}
             </span>
             {!isAllowPublishAsCustomKnowledgePipelineTemplate && (
-              <PremiumBadge className="shrink-0 cursor-pointer select-none" size="s" color="indigo">
-                <SparklesSoft className="flex size-3 items-center text-components-premium-badge-indigo-text-stop-0" />
+              <PremiumBadge className="shrink-0 select-none" size="s" color="indigo">
+                <SparklesSoft aria-hidden="true" className="flex size-3 items-center text-components-premium-badge-indigo-text-stop-0" />
                 <span className="p-0.5 system-2xs-medium">
                   {t('upgradeBtn.encourageShort', { ns: 'billing' })}
                 </span>
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..f4653a33eb 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -134,56 +134,64 @@ const MCPServerModal = ({
           onHide()
       }}
     >
-      <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>
-        <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
+      <DialogContent className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-[520px]! flex-col overflow-hidden! border-none p-0! text-left align-middle transition-all duration-100 ease-in">
+        <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 shrink-0 p-6 pr-12 pb-3 title-2xl-semi-bold text-xl wrap-break-word text-text-primary">
           {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
         </div>
-        <div className="space-y-5 px-6 py-3">
-          <div className="space-y-0.5">
-            <div className="flex h-6 items-center gap-1">
-              <div className="system-sm-medium text-text-secondary">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
-              <div className="system-xs-regular text-text-destructive-secondary">*</div>
+        <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
+          <div className="min-w-0 space-y-5 px-6 py-3">
+            <div className="space-y-0.5">
+              <div className="flex h-6 items-center gap-1">
+                <div className="system-sm-medium text-text-secondary">{t('mcp.server.modal.description', { ns: 'tools' })}</div>
+                <div className="system-xs-regular text-text-destructive-secondary">*</div>
+              </div>
+              <Textarea
+                className="h-[96px] resize-none"
+                value={description}
+                placeholder={t('mcp.server.modal.descriptionPlaceholder', { ns: 'tools' })}
+                onChange={e => setDescription(e.target.value)}
+              >
+              </Textarea>
             </div>
-            <Textarea
-              className="h-[96px] resize-none"
-              value={description}
-              placeholder={t('mcp.server.modal.descriptionPlaceholder', { ns: 'tools' })}
-              onChange={e => setDescription(e.target.value)}
-            >
-            </Textarea>
+
+            {latestParams.length > 0 && (
+              <div className="min-w-0">
+                <div className="mb-1 flex items-center gap-2">
+                  <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
+                  <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
+                </div>
+                <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
+                <div className="min-w-0 space-y-3">
+                  {latestParams.map((paramItem) => {
+                    if (!paramItem.variable)
+                      return null
+
+                    const { variable } = paramItem
+
+                    return (
+                      <MCPServerParamItem
+                        key={variable}
+                        data={paramItem}
+                        value={params[variable] || ''}
+                        onChange={value => handleParamChange(variable, value)}
+                      />
+                    )
+                  })}
+                </div>
+              </div>
+            )}
           </div>
-          {latestParams.length > 0 && (
-            <div>
-              <div className="mb-1 flex items-center gap-2">
-                <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
-                <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
-              </div>
-              <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
-              <div className="space-y-3">
-                {latestParams.map((paramItem) => {
-                  if (!paramItem.variable)
-                    return null
-
-                  const { variable } = paramItem
-
-                  return (
-                    <MCPServerParamItem
-                      key={variable}
-                      data={paramItem}
-                      value={params[variable] || ''}
-                      onChange={value => handleParamChange(variable, value)}
-                    />
-                  )
-                })}
-              </div>
-            </div>
-          )}
         </div>
-        <div className="flex flex-row-reverse p-6 pt-5">
-          <Button disabled={!description || creating || updating} className="ml-2" variant="primary" onClick={submit}>{data ? t('mcp.modal.save', { ns: 'tools' }) : t('mcp.server.modal.confirm', { ns: 'tools' })}</Button>
+        <div className="flex shrink-0 flex-row-reverse flex-wrap gap-2 p-6 pt-5">
+          <Button disabled={!description || creating || updating} variant="primary" onClick={submit}>{data ? t('mcp.modal.save', { ns: 'tools' }) : t('mcp.server.modal.confirm', { ns: 'tools' })}</Button>
           <Button onClick={onHide}>{t('mcp.modal.cancel', { ns: 'tools' })}</Button>
         </div>
       </DialogContent>
diff --git a/web/app/components/tools/mcp/mcp-server-param-item.tsx b/web/app/components/tools/mcp/mcp-server-param-item.tsx
index db27cfdf98..316bbca556 100644
--- a/web/app/components/tools/mcp/mcp-server-param-item.tsx
+++ b/web/app/components/tools/mcp/mcp-server-param-item.tsx
@@ -17,12 +17,12 @@ const MCPServerParamItem = ({
   const { t } = useTranslation()
 
   return (
-    <div className="space-y-0.5">
-      <div className="flex h-6 items-center gap-2">
-        <div className="system-xs-medium text-text-secondary">{data.label}</div>
+    <div className="min-w-0 space-y-0.5">
+      <div className="flex min-h-6 min-w-0 flex-wrap items-center gap-2">
+        <div className="max-w-full min-w-0 system-xs-medium wrap-break-word text-text-secondary">{data.label}</div>
         <div className="system-xs-medium text-text-quaternary">·</div>
-        <div className="system-xs-medium text-text-secondary">{data.variable}</div>
-        <div className="system-xs-medium text-text-tertiary">{data.type}</div>
+        <div className="max-w-full min-w-0 system-xs-medium break-all text-text-secondary">{data.variable}</div>
+        <div className="max-w-full min-w-0 system-xs-medium wrap-break-word text-text-tertiary">{data.type}</div>
       </div>
       <Textarea
         className="h-8 resize-none"
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 79179ae3dc..0fe81589a8 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>
@@ -280,7 +285,7 @@ const MCPModal: FC<DuplicateAppModalProps> = ({
 
   return (
     <Dialog open={show}>
-      <DialogContent className="w-full max-w-[520px]! overflow-hidden! border-none p-6 text-left align-middle">
+      <DialogContent className="w-full max-w-[520px]! border-none p-6 text-left align-middle">
         <MCPModalContent
           key={formKey}
           data={data}
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..2fe23abd48 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
 import EmojiPickerInner from '@/app/components/base/emoji-picker/Inner'
+import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import LabelSelector from '@/app/components/tools/labels/selector'
@@ -71,20 +72,16 @@ type WorkflowToolDrawerFrameProps = {
   children: React.ReactNode
 }
 
-const InfoTooltip = ({ children }: { children: React.ReactNode }) => {
+const InfoTooltip = ({ children }: { children: string }) => {
   return (
-    <Tooltip>
-      <TooltipTrigger
-        render={(
-          <span className="i-ri-question-line h-3.5 w-3.5 shrink-0 cursor-help text-text-quaternary hover:text-text-tertiary" />
-        )}
-      />
-      <TooltipContent>
-        <div className="w-[180px]">
-          {children}
-        </div>
-      </TooltipContent>
-    </Tooltip>
+    <Infotip
+      aria-label={children}
+      className="ml-1 h-3.5 w-3.5"
+      iconClassName="h-3.5 w-3.5"
+      popupClassName="w-[180px]"
+    >
+      {children}
+    </Infotip>
   )
 }
 
@@ -113,7 +110,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/constants.ts b/web/app/components/workflow/constants.ts
index 101d15a140..32c7c82e33 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -221,6 +221,10 @@ export const HUMAN_INPUT_OUTPUT_STRUCT: Var[] = [
     variable: '__action_id',
     type: VarType.string,
   },
+  {
+    variable: '__action_value',
+    type: VarType.string,
+  },
   {
     variable: '__rendered_content',
     type: VarType.string,
diff --git a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
index 25150e2d04..934dcc490f 100644
--- a/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/header/checklist/__tests__/index.spec.tsx
@@ -54,6 +54,8 @@ vi.mock('@langgenius/dify-ui/popover', () => ({
   },
   PopoverTrigger: ({ render }: { render: ReactNode }) => <>{render}</>,
   PopoverContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  PopoverTitle: ({ children, className }: { children: ReactNode, className?: string }) => <h2 className={className}>{children}</h2>,
+  PopoverDescription: ({ children, className }: { children: ReactNode, className?: string }) => <p className={className}>{children}</p>,
   PopoverClose: ({ children, className }: { children: ReactNode, className?: string }) => <button className={className}>{children}</button>,
 }))
 
diff --git a/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx b/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx
index d574dda0ac..a84ddd06af 100644
--- a/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx
+++ b/web/app/components/workflow/header/checklist/__tests__/node-group.spec.tsx
@@ -36,6 +36,7 @@ describe('ChecklistNodeGroup', () => {
     expect(screen.getByText('Needs configuration')).toBeInTheDocument()
     expect(screen.getByText(/needConnectTip/i)).toBeInTheDocument()
     expect(screen.getAllByText(/goToFix/i)).toHaveLength(2)
+    expect(screen.getByRole('button', { name: /Needs configuration/i })).toHaveAttribute('title', 'Needs configuration')
 
     fireEvent.click(screen.getByText('Needs configuration'))
 
@@ -57,5 +58,7 @@ describe('ChecklistNodeGroup', () => {
 
     expect(onItemClick).not.toHaveBeenCalled()
     expect(screen.queryByText(/goToFix/i)).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Needs configuration/i })).not.toBeInTheDocument()
+    expect(screen.getByText('Needs configuration').parentElement).toHaveAttribute('title', 'Needs configuration')
   })
 })
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index 9a54175c8c..1e4303d401 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -7,6 +7,8 @@ import {
   Popover,
   PopoverClose,
   PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
   PopoverTrigger,
 } from '@langgenius/dify-ui/popover'
 import {
@@ -43,6 +45,7 @@ const WorkflowChecklist = ({
   const nodes = useNodes()
   const needWarningNodes = useChecklist(nodes, edges)
   const { handleNodeSelect } = useNodesInteractions()
+  const checklistLabel = t('panel.checklist', { ns: 'workflow' })
 
   const { pluginItems, nodeItems } = useMemo(() => {
     const plugins: ChecklistItem[] = []
@@ -75,12 +78,14 @@ const WorkflowChecklist = ({
               disabled && 'cursor-not-allowed opacity-50',
             )}
             disabled={disabled || undefined}
+            aria-label={checklistLabel}
           >
             <span
               className={cn('group flex h-full w-full items-center justify-center rounded-md hover:bg-state-accent-hover', open && 'bg-state-accent-hover')}
             >
               <span
                 className={cn('i-ri-list-check-3 h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')}
+                aria-hidden="true"
               />
             </span>
             {!!needWarningNodes.length && (
@@ -104,19 +109,22 @@ const WorkflowChecklist = ({
           <div className="flex flex-col gap-0.5 px-3 pt-3.5 pb-1">
             <div className="flex items-start px-1">
               <div className="min-w-0 grow pr-8">
-                <h2 className="text-base leading-6 font-semibold text-text-primary">
-                  {t('panel.checklist', { ns: 'workflow' })}
+                <PopoverTitle className="text-base leading-6 font-semibold text-text-primary">
+                  {checklistLabel}
                   {needWarningNodes.length > 0 && `(${needWarningNodes.length})`}
-                </h2>
+                </PopoverTitle>
               </div>
-              <PopoverClose className="-mt-0.5 -mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg">
-                <span className="i-ri-close-line size-4 text-text-tertiary" />
+              <PopoverClose
+                className="-mt-0.5 -mr-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg"
+                aria-label={t('operation.close', { ns: 'common' })}
+              >
+                <span className="i-ri-close-line size-4 text-text-tertiary" aria-hidden="true" />
               </PopoverClose>
             </div>
             {needWarningNodes.length > 0 && (
-              <p className="px-1 text-xs leading-4 text-text-tertiary">
+              <PopoverDescription className="px-1 text-xs leading-4 text-text-tertiary">
                 {t('panel.checklistDescription', { ns: 'workflow' })}
-              </p>
+              </PopoverDescription>
             )}
           </div>
 
diff --git a/web/app/components/workflow/header/checklist/node-group.tsx b/web/app/components/workflow/header/checklist/node-group.tsx
index a161c6cb87..05987b632e 100644
--- a/web/app/components/workflow/header/checklist/node-group.tsx
+++ b/web/app/components/workflow/header/checklist/node-group.tsx
@@ -45,29 +45,48 @@ export const ChecklistNodeGroup = memo(({
         </span>
       </div>
       <div className="p-1">
-        {subItems.map(sub => (
-          <div
-            key={sub.key}
-            className={cn(
-              'group/item flex items-start gap-2 rounded-lg px-1',
-              goToEnabled && 'cursor-pointer hover:bg-state-base-hover',
-            )}
-            onClick={() => goToEnabled && onItemClick(item)}
-          >
-            <ItemIndicator />
-            <span className="min-w-0 grow py-1 text-xs leading-4 text-text-warning">
-              {sub.message}
-            </span>
-            {goToEnabled && (
-              <div className="flex shrink-0 items-center gap-0.5 pt-1 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
-                <span className="text-xs leading-4 font-medium whitespace-nowrap text-text-accent">
-                  {t('panel.goToFix', { ns: 'workflow' })}
-                </span>
-                <span className="i-ri-arrow-right-line size-3.5 text-text-accent" />
-              </div>
-            )}
-          </div>
-        ))}
+        {subItems.map((sub) => {
+          const content = (
+            <>
+              <ItemIndicator />
+              <span className="min-w-0 grow truncate text-xs leading-4 text-text-warning">
+                {sub.message}
+              </span>
+              {goToEnabled && (
+                <div className="flex shrink-0 items-center gap-0.5 pr-0.5 opacity-0 transition-opacity duration-150 group-hover/item:opacity-100">
+                  <span className="text-xs leading-4 font-medium whitespace-nowrap text-text-accent">
+                    {t('panel.goToFix', { ns: 'workflow' })}
+                  </span>
+                  <span className="i-ri-arrow-right-line size-3.5 text-text-accent" aria-hidden="true" />
+                </div>
+              )}
+            </>
+          )
+          const className = cn(
+            'group/item flex w-full items-center gap-2 rounded-lg px-1 text-left',
+            goToEnabled && 'cursor-pointer hover:bg-state-base-hover',
+          )
+
+          if (goToEnabled) {
+            return (
+              <button
+                key={sub.key}
+                type="button"
+                className={cn(className, 'border-none bg-transparent')}
+                title={sub.message}
+                onClick={() => onItemClick(item)}
+              >
+                {content}
+              </button>
+            )
+          }
+
+          return (
+            <div key={sub.key} className={className} title={sub.message}>
+              {content}
+            </div>
+          )
+        })}
       </div>
     </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/layout/__tests__/field-title.spec.tsx b/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
index c11b5ecfc8..371a68fe49 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/__tests__/field-title.spec.tsx
@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { FieldTitle } from '../field-title'
 
-vi.mock('@langgenius/dify-ui/tooltip', () => ({
-  Tooltip: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  TooltipTrigger: ({ render }: { render: React.ReactNode }) => <>{render}</>,
-  TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
-
 describe('FieldTitle', () => {
   it('should render title, subtitle, operation, tooltip and warning dot', () => {
     render(
@@ -21,7 +15,7 @@ describe('FieldTitle', () => {
 
     expect(screen.getByText('Embedding')).toBeInTheDocument()
     expect(screen.getByText('subtitle')).toBeInTheDocument()
-    expect(screen.getByText('Tooltip copy')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Tooltip copy' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'action' })).toBeInTheDocument()
     expect(document.querySelector('.bg-text-warning-secondary')).not.toBeNull()
   })
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index ce080fb6dd..070b932605 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   memo,
   useState,
 } from 'react'
+import { Infotip } from '@/app/components/base/infotip'
 
 export type FieldTitleProps = {
   title?: string
@@ -62,18 +62,9 @@ export const FieldTitle = memo(({
           }
           {
             tooltip && (
-              <Tooltip>
-                <TooltipTrigger
-                  render={(
-                    <span className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center">
-                      <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary" />
-                    </span>
-                  )}
-                />
-                <TooltipContent>
-                  {tooltip}
-                </TooltipContent>
-              </Tooltip>
+              <Infotip aria-label={tooltip} className="ml-1">
+                {tooltip}
+              </Infotip>
             )
           }
         </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/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 684f943d5f..a3d8fc7331 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -122,7 +122,7 @@ const Authorization: FC<Props> = ({
           onHide()
       }}
     >
-      <DialogContent className="overflow-hidden! border-none text-left align-middle">
+      <DialogContent className="border-none text-left align-middle">
         <DialogTitle className="title-2xl-semi-bold text-text-primary">
           {t(`${i18nPrefix}.authorization`, { ns: 'workflow' })}
         </DialogTitle>
diff --git a/web/app/components/workflow/nodes/human-input/__tests__/human-input.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/human-input.spec.tsx
index cbc9cddd4a..8d41a45468 100644
--- a/web/app/components/workflow/nodes/human-input/__tests__/human-input.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/__tests__/human-input.spec.tsx
@@ -516,7 +516,7 @@ describe('DSL Import with Human Input Node', () => {
       ])
     })
 
-    it('should return empty output variables when no form inputs exist', () => {
+    it('should return no output variables when no form inputs exist', () => {
       const payload = {
         ...humanInputDefault.defaultValue,
         inputs: [],
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 6ff61dce3f..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,13 +306,14 @@ 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()
     expect(screen.getByText('approve:editable')).toBeInTheDocument()
     expect(screen.getByText('review_result:string:Form input value')).toBeInTheDocument()
     expect(screen.getByText('__action_id:string:Action ID user triggered')).toBeInTheDocument()
+    expect(screen.getByText('__action_value:string:Selected action value')).toBeInTheDocument()
     expect(screen.getByText('__rendered_content:string:Rendered content')).toBeInTheDocument()
 
     await user.click(screen.getByRole('button', { name: 'delivery-method:editable' }))
@@ -328,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/__tests__/user-action.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
index a47a012f49..5e9074a42b 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
@@ -87,7 +87,7 @@ describe('UserActionItem', () => {
     fireEvent.change(screen.getByTestId('nodes.humanInput.userActions.actionNamePlaceholder'), { target: { value: 'Approve action' } })
     fireEvent.change(screen.getByTestId('nodes.humanInput.userActions.actionNamePlaceholder'), { target: { value: '1invalid' } })
     fireEvent.change(screen.getByTestId('nodes.humanInput.userActions.actionNamePlaceholder'), { target: { value: 'averyveryveryverylongidentifier' } })
-    fireEvent.change(screen.getByTestId('nodes.humanInput.userActions.buttonTextPlaceholder'), { target: { value: 'A very very very long button title' } })
+    fireEvent.change(screen.getByTestId('nodes.humanInput.userActions.buttonTextPlaceholder'), { target: { value: 'card_visa_enterprise_001' } })
 
     expect(onChange).toHaveBeenNthCalledWith(1, expect.objectContaining({
       id: 'Approve_action',
@@ -96,7 +96,7 @@ describe('UserActionItem', () => {
       id: 'averyveryveryverylon',
     }))
     expect(onChange).toHaveBeenNthCalledWith(3, expect.objectContaining({
-      title: 'A very very very lon',
+      title: 'card_visa_enterprise_001',
     }))
     expect(mockNotify).toHaveBeenNthCalledWith(1, expect.objectContaining({
       type: 'error',
@@ -106,10 +106,7 @@ describe('UserActionItem', () => {
       type: 'error',
       message: 'nodes.humanInput.userActions.actionIdTooLong',
     }))
-    expect(mockNotify).toHaveBeenNthCalledWith(3, expect.objectContaining({
-      type: 'error',
-      message: 'nodes.humanInput.userActions.buttonTextTooLong',
-    }))
+    expect(mockNotify).toHaveBeenCalledTimes(2)
   })
 
   it('should support clearing ids, updating button style, deleting, and readonly mode', () => {
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/__tests__/upgrade-modal.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/upgrade-modal.spec.tsx
index 0abae16f9a..b6af667022 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/upgrade-modal.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/upgrade-modal.spec.tsx
@@ -8,15 +8,6 @@ vi.mock('@/context/modal-context', () => ({
     mockUseModalContextSelector(selector),
 }))
 
-vi.mock('@/app/components/base/premium-badge', () => ({
-  __esModule: true,
-  default: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <button type="button" onClick={onClick}>
-      {children}
-    </button>
-  ),
-}))
-
 describe('human-input/delivery-method/upgrade-modal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
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/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index 18a6e90796..3daa347448 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -2,7 +2,7 @@ import { Button } from '@langgenius/dify-ui/button'
 import { RiMailSendFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
-import PremiumBadge from '@/app/components/base/premium-badge'
+import { PremiumBadgeButton } from '@/app/components/base/premium-badge'
 import { UpgradeModal as BaseUpgradeModal } from '@/app/components/base/upgrade-modal'
 import { useModalContextSelector } from '@/context/modal-context'
 
@@ -39,20 +39,19 @@ export function UpgradeModal({
           >
             {t('nodes.humanInput.deliveryMethod.upgradeTipHide', { ns: 'workflow' })}
           </Button>
-          <PremiumBadge
+          <PremiumBadgeButton
             size="custom"
             color="blue"
-            allowHover={true}
             className="h-8 w-[93px]"
             onClick={handleUpgrade}
           >
-            <SparklesSoft className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
+            <SparklesSoft aria-hidden="true" className="flex h-3.5 w-3.5 items-center py-px pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
             <div className="system-sm-medium">
               <span className="p-1">
                 {t('upgradeBtn.encourageShort', { ns: 'billing' })}
               </span>
             </div>
-          </PremiumBadge>
+          </PremiumBadgeButton>
         </>
       )}
     />
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/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
index a83ea4f8f2..94581281e8 100644
--- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
@@ -12,7 +12,7 @@ import ButtonStyleDropdown from './button-style-dropdown'
 
 const i18nPrefix = 'nodes.humanInput'
 const ACTION_ID_MAX_LENGTH = 20
-const BUTTON_TEXT_MAX_LENGTH = 20
+const ACTION_VALUE_MAX_LENGTH = 100
 
 type UserActionItemProps = {
   data: UserAction
@@ -63,9 +63,9 @@ const UserActionItem: FC<UserActionItemProps> = ({
 
   const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value
-    if (value.length > BUTTON_TEXT_MAX_LENGTH) {
-      value = value.slice(0, BUTTON_TEXT_MAX_LENGTH)
-      toast.error(t(`${i18nPrefix}.userActions.buttonTextTooLong`, { ns: 'workflow', maxLength: BUTTON_TEXT_MAX_LENGTH }))
+    if (value.length > ACTION_VALUE_MAX_LENGTH) {
+      value = value.slice(0, ACTION_VALUE_MAX_LENGTH)
+      toast.error(t(`${i18nPrefix}.userActions.buttonTextTooLong`, { ns: 'workflow', maxLength: ACTION_VALUE_MAX_LENGTH }))
     }
     onChange({ ...data, title: value })
   }
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index fa0914c098..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>
           )}
@@ -229,6 +236,11 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           type="string"
           description="Action ID user triggered"
         />
+        <VarItem
+          name="__action_value"
+          type="string"
+          description="Selected action value"
+        />
         <VarItem
           name="__rendered_content"
           type="string"
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
index 82ccf265ba..0597d621f6 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
@@ -1,7 +1,5 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { Slider } from '@langgenius/dify-ui/slider'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { RiQuestionLine } from '@remixicon/react'
 import {
   memo,
   useCallback,
@@ -11,6 +9,7 @@ import {
   Economic,
   HighQuality,
 } from '@/app/components/base/icons/src/vender/knowledge'
+import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import {
@@ -97,14 +96,12 @@ const IndexMethod = ({
                   <div className="truncate system-xs-medium text-text-secondary">
                     {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
                   </div>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={<RiQuestionLine className="ml-0.5 h-3.5 w-3.5 text-text-quaternary" />}
-                    />
-                    <TooltipContent>
-                      number of keywords
-                    </TooltipContent>
-                  </Tooltip>
+                  <Infotip
+                    aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
+                    className="ml-0.5 h-3.5 w-3.5"
+                  >
+                    {t('form.numberOfKeywords', { ns: 'datasetSettings' })}
+                  </Infotip>
                 </div>
                 <Slider
                   disabled={readonly}
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/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
index f4445fd54d..5b3d187406 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
@@ -23,7 +23,7 @@ export function JsonSchemaConfigModal({
           onClose()
       }}
     >
-      <DialogContent className="h-[800px] max-h-none w-full max-w-[960px] overflow-hidden! border-none p-0 text-left align-middle">
+      <DialogContent className="h-[calc(100dvh-32px)] max-h-[800px] w-full max-w-[960px] overflow-hidden! border-none p-0 text-left align-middle">
 
         <JsonSchemaConfig
           defaultSchema={defaultSchema}
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..60311129db 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
@@ -2,11 +2,11 @@ import type { FC } from 'react'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Model } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { RiCloseLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Infotip } from '@/app/components/base/infotip'
 import Textarea from '@/app/components/base/textarea'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
@@ -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">
@@ -75,18 +80,13 @@ const PromptEditor: FC<PromptEditorProps> = ({
       <div className="flex flex-col gap-y-1 px-4 py-2">
         <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">
           <span>{t('nodes.llm.jsonSchema.instruction', { ns: 'workflow' })}</span>
-          <Tooltip>
-            <TooltipTrigger
-              render={(
-                <span className="flex h-3.5 w-3.5 shrink-0 p-px">
-                  <span aria-hidden className="i-ri-question-line h-full w-full text-text-quaternary hover:text-text-tertiary" />
-                </span>
-              )}
-            />
-            <TooltipContent>
-              {t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })}
-            </TooltipContent>
-          </Tooltip>
+          <Infotip
+            aria-label={t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })}
+            className="h-3.5 w-3.5"
+            iconClassName="h-full w-full"
+          >
+            {t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })}
+          </Infotip>
         </div>
         <div className="flex items-center">
           <Textarea
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/nodes/trigger-schedule/components/frequency-selector.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/frequency-selector.tsx
index 0343e0bead..379749e3b8 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/frequency-selector.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/frequency-selector.tsx
@@ -9,8 +9,6 @@ import {
   SelectLabel,
   SelectTrigger,
 } from '@langgenius/dify-ui/select'
-import * as React from 'react'
-import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 type FrequencyOption = {
@@ -27,19 +25,25 @@ const FrequencySelector = ({ frequency, onChange }: FrequencySelectorProps) => {
   const { t } = useTranslation()
   const groupLabel = t('nodes.triggerSchedule.frequency.label', { ns: 'workflow' })
 
-  const frequencies = useMemo<FrequencyOption[]>(() => [
+  const frequencies: FrequencyOption[] = [
     { value: 'hourly', name: t('nodes.triggerSchedule.frequency.hourly', { ns: 'workflow' }) },
     { value: 'daily', name: t('nodes.triggerSchedule.frequency.daily', { ns: 'workflow' }) },
     { value: 'weekly', name: t('nodes.triggerSchedule.frequency.weekly', { ns: 'workflow' }) },
     { value: 'monthly', name: t('nodes.triggerSchedule.frequency.monthly', { ns: 'workflow' }) },
-  ], [t])
+  ]
   const selectedFrequency = frequencies.find(item => item.value === frequency)
 
+  const handleFrequencyChange = (value: string | null) => {
+    const selected = frequencies.find(item => item.value === value)
+    if (selected)
+      onChange(selected.value)
+  }
+
   return (
     <Select
       key={`${frequency}-${groupLabel}`}
       value={frequency}
-      onValueChange={value => value && onChange(value as ScheduleFrequency)}
+      onValueChange={handleFrequencyChange}
     >
       <SelectTrigger className="w-full py-2">
         {selectedFrequency?.name ?? t('nodes.triggerSchedule.selectFrequency', { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
index 5fd0fc7c41..23e87554e3 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/monthly-days-selector.tsx
@@ -1,7 +1,6 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { RiQuestionLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Infotip } from '@/app/components/base/infotip'
 
 type MonthlyDaysSelectorProps = {
   selectedDays: (number | 'last')[]
@@ -41,38 +40,46 @@ const MonthlyDaysSelector = ({ selectedDays, onChange }: MonthlyDaysSelectorProp
         {rows.map((row, rowIndex) => (
           <div key={rowIndex} className="grid grid-cols-7 gap-1.5">
             {row.map(day => (
-              <button
-                key={day}
-                type="button"
-                onClick={() => handleDayClick(day)}
-                className={`rounded-lg border bg-components-option-card-option-bg py-1 text-xs transition-colors ${
-                  day === 'last' ? 'col-span-2 min-w-0' : ''
-                } ${
-                  isDaySelected(day)
-                    ? 'border-util-colors-blue-brand-blue-brand-600 text-text-secondary'
-                    : 'border-divider-subtle text-text-tertiary hover:border-divider-regular hover:text-text-secondary'
-                }`}
-              >
-                {day === 'last'
-                  ? (
-                      <div className="flex items-center justify-center gap-1">
-                        <span>{t('nodes.triggerSchedule.lastDay', { ns: 'workflow' })}</span>
-                        <Tooltip>
-                          <TooltipTrigger
-                            render={(
-                              <RiQuestionLine className="h-3 w-3 text-text-quaternary" />
-                            )}
-                          />
-                          <TooltipContent>
-                            {t('nodes.triggerSchedule.lastDayTooltip', { ns: 'workflow' })}
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                    )
-                  : (
-                      day
-                    )}
-              </button>
+              day === 'last'
+                ? (
+                    <div
+                      key={day}
+                      className={`col-span-2 flex min-w-0 items-center rounded-lg border bg-components-option-card-option-bg text-xs transition-colors ${
+                        isDaySelected(day)
+                          ? 'border-util-colors-blue-brand-blue-brand-600 text-text-secondary'
+                          : 'border-divider-subtle text-text-tertiary hover:border-divider-regular hover:text-text-secondary'
+                      }`}
+                    >
+                      <button
+                        type="button"
+                        onClick={() => handleDayClick(day)}
+                        className="min-w-0 flex-1 py-1"
+                      >
+                        {t('nodes.triggerSchedule.lastDay', { ns: 'workflow' })}
+                      </button>
+                      <Infotip
+                        aria-label={t('nodes.triggerSchedule.lastDayTooltip', { ns: 'workflow' })}
+                        className="mr-1 h-3 w-3"
+                        iconClassName="h-3 w-3"
+                      >
+                        {t('nodes.triggerSchedule.lastDayTooltip', { ns: 'workflow' })}
+                      </Infotip>
+                    </div>
+                  )
+                : (
+                    <button
+                      key={day}
+                      type="button"
+                      onClick={() => handleDayClick(day)}
+                      className={`rounded-lg border bg-components-option-card-option-bg py-1 text-xs transition-colors ${
+                        isDaySelected(day)
+                          ? 'border-util-colors-blue-brand-blue-brand-600 text-text-secondary'
+                          : 'border-divider-subtle text-text-tertiary hover:border-divider-regular hover:text-text-secondary'
+                      }`}
+                    >
+                      {day}
+                    </button>
+                  )
             ))}
             {/* Fill empty cells in the last row (Last day takes 2 cols, so need 1 less) */}
             {rowIndex === rows.length - 1 && Array.from({ length: 7 - row.length - 1 }, (_, i) => (
diff --git a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
index 53498c52f2..9acfa7e702 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/panel.tsx
@@ -36,7 +36,7 @@ const HTTP_METHODS = [
   { name: 'DELETE', value: 'DELETE' },
   { name: 'PATCH', value: 'PATCH' },
   { name: 'HEAD', value: 'HEAD' },
-]
+] satisfies Array<{ name: string, value: HttpMethod }>
 
 const CONTENT_TYPES = [
   { name: 'application/json', value: 'application/json' },
@@ -46,6 +46,51 @@ const CONTENT_TYPES = [
   { name: 'multipart/form-data', value: 'multipart/form-data' },
 ]
 
+type WebhookMethodSelectorProps = {
+  nodeId: string
+  label: string
+  value: HttpMethod
+  disabled: boolean
+  onChange: (method: HttpMethod) => void
+}
+
+const WebhookMethodSelector = ({
+  nodeId,
+  label,
+  value,
+  disabled,
+  onChange,
+}: WebhookMethodSelectorProps) => {
+  const selectedMethod = HTTP_METHODS.find(item => item.value === value) ?? null
+
+  const handleMethodChange = (nextValue: string | null) => {
+    const nextMethod = HTTP_METHODS.find(item => item.value === nextValue)
+    if (nextMethod)
+      onChange(nextMethod.value)
+  }
+
+  return (
+    <Select
+      key={`${nodeId}-method-${value}`}
+      value={selectedMethod?.value ?? null}
+      disabled={disabled}
+      onValueChange={handleMethodChange}
+    >
+      <SelectTrigger aria-label={label} className="h-8 pr-8 text-sm">
+        {selectedMethod?.name}
+      </SelectTrigger>
+      <SelectContent popupClassName="w-26 min-w-26">
+        {HTTP_METHODS.map(item => (
+          <SelectItem key={item.value} value={item.value}>
+            <SelectItemText>{item.name}</SelectItemText>
+            <SelectItemIndicator />
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
 const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
   id,
   data,
@@ -75,7 +120,6 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
     }
   }, [readOnly, inputs.webhook_url, generateWebhookUrl])
 
-  const selectedMethod = HTTP_METHODS.find(item => item.value === inputs.method) ?? null
   const selectedContentType = CONTENT_TYPES.find(item => item.value === inputs.content_type) ?? null
 
   return (
@@ -86,24 +130,13 @@ const Panel: FC<NodePanelProps<WebhookTriggerNodeType>> = ({
           <div className="space-y-1">
             <div className="flex gap-1" style={{ height: '32px' }}>
               <div className="w-26 shrink-0">
-                <Select
-                  key={`${id}-method-${inputs.method}`}
-                  value={selectedMethod?.value ?? null}
+                <WebhookMethodSelector
+                  nodeId={id}
+                  label={t(`${i18nPrefix}.method`, { ns: 'workflow' })}
+                  value={inputs.method}
                   disabled={readOnly}
-                  onValueChange={value => value && handleMethodChange(value as HttpMethod)}
-                >
-                  <SelectTrigger className="h-8 pr-8 text-sm">
-                    {selectedMethod?.name}
-                  </SelectTrigger>
-                  <SelectContent popupClassName="w-26 min-w-26">
-                    {HTTP_METHODS.map(item => (
-                      <SelectItem key={item.value} value={item.value}>
-                        <SelectItemText>{item.name}</SelectItemText>
-                        <SelectItemIndicator />
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  onChange={handleMethodChange}
+                />
               </div>
               <div className="flex-1" style={{ width: '284px' }}>
                 <InputWithCopy
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/applied-education-content.tsx b/web/app/education-apply/applied-education-content.tsx
index c3ff35b1b9..cbe2e11fda 100644
--- a/web/app/education-apply/applied-education-content.tsx
+++ b/web/app/education-apply/applied-education-content.tsx
@@ -10,7 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { Plan } from '@/app/components/billing/type'
 import { WorkplaceSelectorContent } from '@/app/components/header/account-dropdown/workplace-selector'
-import PlanBadge from '@/app/components/header/plan-badge'
+import { PlanBadge } from '@/app/components/header/plan-badge'
 
 type AppliedEducationContentProps = {
   workspaces: IWorkspace[]
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/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index c055789440..af0ff5e07a 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -21,11 +21,28 @@ import { useInvitationCheck } from '@/service/use-common'
 import { timezones } from '@/utils/timezone'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
 
-type SelectOption = {
+type LanguageSelectOption = {
+  value: Locale
+  name: string
+}
+
+type TimezoneSelectOption = {
   value: string
   name: string
 }
 
+const LANGUAGE_OPTIONS: LanguageSelectOption[] = languages
+  .filter(item => item.supported)
+  .map(item => ({
+    value: item.value,
+    name: item.name,
+  }))
+
+const TIMEZONE_OPTIONS: TimezoneSelectOption[] = timezones.map(item => ({
+  value: String(item.value),
+  name: item.name,
+}))
+
 export default function InviteSettingsPage() {
   const { t } = useTranslation()
   const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
@@ -35,9 +52,20 @@ export default function InviteSettingsPage() {
   const [name, setName] = useState('')
   const [language, setLanguage] = useState(LanguagesSupported[0])
   const [timezone, setTimezone] = useState(() => Intl.DateTimeFormat().resolvedOptions().timeZone || 'America/Los_Angeles')
-  const languageOptions: SelectOption[] = languages.filter(item => item.supported)
-  const selectedLanguage = languageOptions.find(item => item.value === language)
-  const selectedTimezone = timezones.find(item => item.value === timezone)
+  const selectedLanguage = LANGUAGE_OPTIONS.find(item => item.value === language)
+  const selectedTimezone = TIMEZONE_OPTIONS.find(item => item.value === timezone)
+
+  const handleLanguageChange = (nextValue: string | null) => {
+    const nextLanguage = LANGUAGE_OPTIONS.find(item => item.value === nextValue)
+    if (nextLanguage)
+      setLanguage(nextLanguage.value)
+  }
+
+  const handleTimezoneChange = (nextValue: string | null) => {
+    const nextTimezone = TIMEZONE_OPTIONS.find(item => item.value === nextValue)
+    if (nextTimezone)
+      setTimezone(nextTimezone.value)
+  }
 
   const checkParams = {
     url: '/activate/check',
@@ -123,23 +151,19 @@ export default function InviteSettingsPage() {
           </div>
         </div>
         <div className="mb-5">
-          <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
+          <label htmlFor="interface_language" className="my-2 system-md-semibold text-text-secondary">
             {t('interfaceLanguage', { ns: 'login' })}
           </label>
           <div className="mt-1">
             <Select
               value={selectedLanguage?.value ?? null}
-              onValueChange={(nextValue) => {
-                if (!nextValue)
-                  return
-                setLanguage(nextValue as Locale)
-              }}
+              onValueChange={handleLanguageChange}
             >
-              <SelectTrigger size="large">
+              <SelectTrigger id="interface_language" size="large">
                 {selectedLanguage?.name ?? t('placeholder.select', { ns: 'common' })}
               </SelectTrigger>
               <SelectContent>
-                {languageOptions.map(item => (
+                {LANGUAGE_OPTIONS.map(item => (
                   <SelectItem key={item.value} value={item.value}>
                     <SelectItemText>{item.name}</SelectItemText>
                     <SelectItemIndicator />
@@ -156,19 +180,15 @@ export default function InviteSettingsPage() {
           </label>
           <div className="mt-1">
             <Select
-              value={selectedTimezone ? String(selectedTimezone.value) : null}
-              onValueChange={(nextValue) => {
-                if (!nextValue)
-                  return
-                setTimezone(nextValue as string)
-              }}
+              value={selectedTimezone?.value ?? null}
+              onValueChange={handleTimezoneChange}
             >
-              <SelectTrigger size="large">
+              <SelectTrigger id="timezone" size="large">
                 {selectedTimezone?.name ?? t('placeholder.select', { ns: 'common' })}
               </SelectTrigger>
               <SelectContent>
-                {timezones.map(item => (
-                  <SelectItem key={item.value} value={String(item.value)}>
+                {TIMEZONE_OPTIONS.map(item => (
+                  <SelectItem key={item.value} value={item.value}>
                     <SelectItemText>{item.name}</SelectItemText>
                     <SelectItemIndicator />
                   </SelectItem>
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 582cb1b37c..bb86a8675d 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -1,6 +1,5 @@
 'use client'
 import type { Reducer } from 'react'
-import type { LanguagesSupported } from '@/i18n-config/language'
 import { Button } from '@langgenius/dify-ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select'
@@ -51,6 +50,19 @@ type SelectOption = {
   name: string
 }
 
+const LANGUAGE_OPTIONS: SelectOption[] = languages.filter(item => item.supported)
+const TIMEZONE_OPTIONS: SelectOption[] = timezones.map(item => ({
+  value: String(item.value),
+  name: item.name,
+}))
+
+const hasStatus = (error: unknown): error is { status: number } => {
+  return typeof error === 'object'
+    && error !== null
+    && 'status' in error
+    && typeof error.status === 'number'
+}
+
 const OneMoreStep = () => {
   const { t } = useTranslation()
   const router = useRouter()
@@ -62,9 +74,20 @@ const OneMoreStep = () => {
     timezone: 'Asia/Shanghai',
   })
   const { mutateAsync: submitOneMoreStep, isPending } = useOneMoreStep()
-  const languageOptions: SelectOption[] = languages.filter(item => item.supported)
-  const selectedLanguage = languageOptions.find(item => item.value === state.interface_language)
-  const selectedTimezone = timezones.find(item => item.value === state.timezone)
+  const selectedLanguage = LANGUAGE_OPTIONS.find(item => item.value === state.interface_language)
+  const selectedTimezone = TIMEZONE_OPTIONS.find(item => item.value === state.timezone)
+
+  const handleLanguageChange = (nextValue: string | null) => {
+    const nextLanguage = LANGUAGE_OPTIONS.find(item => item.value === nextValue)
+    if (nextLanguage)
+      dispatch({ type: 'interface_language', value: nextLanguage.value })
+  }
+
+  const handleTimezoneChange = (nextValue: string | null) => {
+    const nextTimezone = TIMEZONE_OPTIONS.find(item => item.value === nextValue)
+    if (nextTimezone)
+      dispatch({ type: 'timezone', value: nextTimezone.value })
+  }
 
   const handleSubmit = async () => {
     if (isPending)
@@ -77,8 +100,8 @@ const OneMoreStep = () => {
       })
       router.push('/apps')
     }
-    catch (error: any) {
-      if (error && error.status === 400)
+    catch (error: unknown) {
+      if (hasStatus(error) && error.status === 400)
         toast.error(t('invalidInvitationCode', { ns: 'login' }))
       dispatch({ type: 'failed', payload: null })
     }
@@ -136,23 +159,19 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className="mb-5">
-            <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
+            <label htmlFor="interface_language" className="my-2 system-md-semibold text-text-secondary">
               {t('interfaceLanguage', { ns: 'login' })}
             </label>
             <div className="mt-1">
               <Select
                 value={selectedLanguage?.value ?? null}
-                onValueChange={(nextValue) => {
-                  if (!nextValue)
-                    return
-                  dispatch({ type: 'interface_language', value: nextValue as typeof LanguagesSupported[number] })
-                }}
+                onValueChange={handleLanguageChange}
               >
-                <SelectTrigger size="large">
+                <SelectTrigger id="interface_language" size="large">
                   {selectedLanguage?.name ?? t('placeholder.select', { ns: 'common' })}
                 </SelectTrigger>
                 <SelectContent>
-                  {languageOptions.map(item => (
+                  {LANGUAGE_OPTIONS.map(item => (
                     <SelectItem key={item.value} value={item.value}>
                       <SelectItemText>{item.name}</SelectItemText>
                       <SelectItemIndicator />
@@ -168,19 +187,15 @@ const OneMoreStep = () => {
             </label>
             <div className="mt-1">
               <Select
-                value={selectedTimezone ? String(selectedTimezone.value) : null}
-                onValueChange={(nextValue) => {
-                  if (!nextValue)
-                    return
-                  dispatch({ type: 'timezone', value: nextValue as typeof state.timezone })
-                }}
+                value={selectedTimezone?.value ?? null}
+                onValueChange={handleTimezoneChange}
               >
-                <SelectTrigger size="large">
+                <SelectTrigger id="timezone" size="large">
                   {selectedTimezone?.name ?? t('placeholder.select', { ns: 'common' })}
                 </SelectTrigger>
                 <SelectContent>
-                  {timezones.map(item => (
-                    <SelectItem key={item.value} value={String(item.value)}>
+                  {TIMEZONE_OPTIONS.map(item => (
+                    <SelectItem key={item.value} value={item.value}>
                       <SelectItemText>{item.name}</SelectItemText>
                       <SelectItemIndicator />
                     </SelectItem>
diff --git a/web/contract/router.ts b/web/contract/router.ts
index 953678a910..37438d028d 100644
--- a/web/contract/router.ts
+++ b/web/contract/router.ts
@@ -63,6 +63,9 @@ export const marketplaceRouterContract = {
 export type MarketPlaceInputs = InferContractRouterInputs<typeof marketplaceRouterContract>
 
 export const consoleRouterContract = {
+  // `enterprise` is the only backend-generated contract wired in here. Community API contracts
+  // are generated too, but backend definitions are not complete enough to consume directly yet,
+  // so those routes stay manually maintained for now.
   enterprise: enterpriseContract,
   account: {
     avatar: accountAvatarContract,
diff --git a/web/docs/test.md b/web/docs/test.md
index b7c6a5f5a3..aab8b81eef 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -4,25 +4,19 @@ This document is the complete testing specification for the Dify frontend projec
 Goal: Readable, change-friendly, reusable, and debuggable tests.
 When I ask you to write/refactor/fix tests, follow these rules by default.
 
-## Tech Stack
-
-- **Framework**: Next.js 15 + React 19 + TypeScript
-- **Testing Tools**: Vitest 4.0.16 + React Testing Library 16.0
-- **Test Environment**: happy-dom
-- **File Naming**: `ComponentName.spec.tsx` inside a same-level `__tests__/` directory
-- **Placement Rule**: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
-
 ## Running Tests
 
+Run these commands from `web/`. From the repository root, prefix them with `pnpm -C web`.
+
 ```bash
 # Run all tests
 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
@@ -31,6 +25,8 @@ pnpm test path/to/file.spec.tsx
 ## Project Test Setup
 
 - **Configuration**: `vite.config.ts` sets the `happy-dom` environment, loads the Testing Library presets, and respects our path aliases (`@/...`). Check this file before adding new transformers or module name mappers.
+- **File naming**: `ComponentName.spec.tsx` inside a same-level `__tests__/` directory.
+- **Placement rule**: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
 - **Global setup**: `vitest.setup.ts` already imports `@testing-library/jest-dom`, runs `cleanup()` after every test, and defines shared mocks (for example `react-i18next`). Add any environment-level mocks (for example `ResizeObserver`, `matchMedia`, `IntersectionObserver`, `TextEncoder`, `crypto`) here so they are shared consistently.
 - **Reusable mocks**: Place shared mock factories inside `web/__mocks__/` and use `vi.mock('module-name')` to point to them rather than redefining mocks in every spec.
 - **Mocking behavior**: Modules are not mocked automatically. Use `vi.mock(...)` in tests, or place global mocks in `vitest.setup.ts`.
@@ -45,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.
@@ -83,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**:
@@ -216,8 +224,8 @@ Simulate the interactions that matter to users—primary clicks, change events,
 
 **Guidelines**:
 
-- Prefer spying on `global.fetch`/`axios`/`ky` and returning deterministic responses over reaching out to the network.
-- Use MSW (`msw` is already installed) when you need declarative request handlers across multiple specs.
+- Prefer mocking `@/service/*` modules or spying on `global.fetch` / `ky` clients with deterministic responses over reaching out to the network.
+- Do not introduce an HTTP interception dependency such as MSW unless it is already declared in the workspace or adding it is part of the task.
 - Keep async assertions inside `await waitFor(...)` blocks or the async `findBy*` queries to avoid race conditions.
 
 ### 7. Next.js Routing
@@ -281,7 +289,7 @@ For complex inputs/entities, use Builders with solid defaults and chainable over
 
 Reserve snapshots for static, deterministic fragments (icons, badges, layout chrome). Keep them tight, prefer explicit assertions for behavior, and review any snapshot updates deliberately instead of accepting them wholesale.
 
-**Note**: Dify is a desktop application. **No need for** responsive/mobile testing.
+**Note**: Dify primarily targets desktop workflows, but the supported browsers list includes mobile browsers. Do not add responsive/mobile assertions to ordinary unit tests unless the component has responsive behavior, mobile-specific behavior, or accessibility behavior that must be covered.
 
 ## Code Style
 
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/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index 4df2de3173..08825f5dbc 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "يجب أن يبدأ معرف الإجراء بحرف أو شرطة سفلية، متبوعاً بأحرف أو أرقام أو شرطات سفلية",
   "nodes.humanInput.userActions.actionIdTooLong": "يجب أن يكون معرف الإجراء {{maxLength}} حرفاً أو أقل",
   "nodes.humanInput.userActions.actionNamePlaceholder": "اسم الإجراء",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "نص عرض الزر",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "قيمة الإجراء",
   "nodes.humanInput.userActions.buttonTextTooLong": "يجب أن يكون نص الزر {{maxLength}} حرفاً أو أقل",
   "nodes.humanInput.userActions.chooseStyle": "اختر نمط الزر",
   "nodes.humanInput.userActions.emptyTip": "انقر فوق الزر '+' لإضافة إجراءات المستخدم",
   "nodes.humanInput.userActions.title": "إجراءات المستخدم",
-  "nodes.humanInput.userActions.tooltip": "حدد الأزرار التي يمكن للمستخدمين النقر عليها للرد على هذا النموذج. يمكن لكل زر تشغيل مسارات سير عمل مختلفة. يجب أن يبدأ معرف الإجراء بحرف أو شرطة سفلية، متبوعاً بأحرف أو أرقام أو شرطات سفلية.",
+  "nodes.humanInput.userActions.tooltip": "حدد الأزرار التي يمكن للمستخدمين النقر عليها للرد على هذا النموذج. يتحكم معرف الإجراء في التفريع. يتم عرض قيمة الإجراء في المرحلة التالية كإخراج مدمج محدد. يجب أن يبدأ معرف الإجراء بحرف أو شرطة سفلية، متبوعاً بأحرف أو أرقام أو شرطات سفلية.",
   "nodes.humanInput.userActions.triggered": "تم تشغيل <strong>{{actionName}}</strong>",
   "nodes.ifElse.addCondition": "إضافة شرط",
   "nodes.ifElse.addSubVariable": "متغير فرعي",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index e00d300f01..0133060080 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Aktions-ID muss mit einem Buchstaben oder Unterstrich beginnen, gefolgt von Buchstaben, Zahlen oder Unterstrichen",
   "nodes.humanInput.userActions.actionIdTooLong": "Aktions-ID darf höchstens {{maxLength}} Zeichen lang sein",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Aktionsname",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Schaltflächen-Anzeigetext",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Aktionswert",
   "nodes.humanInput.userActions.buttonTextTooLong": "Schaltflächentext darf höchstens {{maxLength}} Zeichen lang sein",
   "nodes.humanInput.userActions.chooseStyle": "Wählen Sie einen Schaltflächenstil",
   "nodes.humanInput.userActions.emptyTip": "Klicken Sie auf die '+'-Schaltfläche, um Benutzeraktionen hinzuzufügen",
   "nodes.humanInput.userActions.title": "Benutzeraktionen",
-  "nodes.humanInput.userActions.tooltip": "Definieren Sie Schaltflächen, auf die Benutzer klicken können, um auf dieses Formular zu reagieren. Jede Schaltfläche kann unterschiedliche Workflow-Pfade auslösen. Aktions-ID muss mit einem Buchstaben oder Unterstrich beginnen, gefolgt von Buchstaben, Zahlen oder Unterstrichen.",
+  "nodes.humanInput.userActions.tooltip": "Definieren Sie Schaltflächen, auf die Benutzer klicken können, um auf dieses Formular zu reagieren. Die Aktions-ID steuert die Verzweigung. Der Aktionswert wird nachgelagert als ausgewählte integrierte Ausgabe bereitgestellt. Aktions-ID muss mit einem Buchstaben oder Unterstrich beginnen, gefolgt von Buchstaben, Zahlen oder Unterstrichen.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> wurde ausgelöst",
   "nodes.ifElse.addCondition": "Bedingung hinzufügen",
   "nodes.ifElse.addSubVariable": "Untervariable",
diff --git a/web/i18n/en-US/common.json b/web/i18n/en-US/common.json
index f2e41b5820..f4c02062d6 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",
@@ -512,6 +513,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",
@@ -519,6 +522,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",
@@ -533,6 +537,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",
@@ -677,5 +683,6 @@
   "voiceInput.converting": "Converting to text...",
   "voiceInput.notAllow": "microphone not authorized",
   "voiceInput.speaking": "Speak now...",
+  "voiceInput.start": "Voice input",
   "you": "You"
 }
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 7b1ad1605a..774713476b 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Action ID must start with a letter or underscores, followed by letters, numbers, or underscores",
   "nodes.humanInput.userActions.actionIdTooLong": "Action ID must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Action Name",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Button display Text",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Action Value",
   "nodes.humanInput.userActions.buttonTextTooLong": "Button text must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.chooseStyle": "Choose a button style",
   "nodes.humanInput.userActions.emptyTip": "Click the '+' button to add user actions",
   "nodes.humanInput.userActions.title": "User Actions",
-  "nodes.humanInput.userActions.tooltip": "Define buttons that users can click to respond to this form. Each button can trigger different workflow paths. Action ID must start with a letter or underscores, followed by letters, numbers, or underscores.",
+  "nodes.humanInput.userActions.tooltip": "Define buttons that users can click to respond to this form. Action ID controls branching. Action Value is exposed downstream as the selected built-in output. Action ID must start with a letter or underscores, followed by letters, numbers, or underscores.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> has been triggered",
   "nodes.ifElse.addCondition": "Add Condition",
   "nodes.ifElse.addSubVariable": "Sub Variable",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index c12a6f5cdd..57cf555831 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "El ID de acción debe comenzar con una letra o guiones bajos, seguido de letras, números o guiones bajos",
   "nodes.humanInput.userActions.actionIdTooLong": "El ID de acción debe tener {{maxLength}} caracteres o menos",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nombre de Acción",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Texto de visualización del botón",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Valor de la Acción",
   "nodes.humanInput.userActions.buttonTextTooLong": "El texto del botón debe tener {{maxLength}} caracteres o menos",
   "nodes.humanInput.userActions.chooseStyle": "Elija un estilo de botón",
   "nodes.humanInput.userActions.emptyTip": "Haga clic en el botón '+' para agregar acciones del usuario",
   "nodes.humanInput.userActions.title": "Acciones del Usuario",
-  "nodes.humanInput.userActions.tooltip": "Defina botones en los que los usuarios puedan hacer clic para responder a este formulario. Cada botón puede activar diferentes rutas de flujo de trabajo. El ID de acción debe comenzar con una letra o guiones bajos, seguido de letras, números o guiones bajos.",
+  "nodes.humanInput.userActions.tooltip": "Defina botones en los que los usuarios puedan hacer clic para responder a este formulario. El ID de acción controla la ramificación. El Valor de la Acción se expone aguas abajo como la salida integrada seleccionada. El ID de acción debe comenzar con una letra o guiones bajos, seguido de letras, números o guiones bajos.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> ha sido activado",
   "nodes.ifElse.addCondition": "Agregar condición",
   "nodes.ifElse.addSubVariable": "Sub Variable",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index d9cb4c2c40..813931c74f 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "شناسه عملیات باید با حرف یا زیرخط شروع شود و فقط شامل حروف، اعداد و زیرخط باشد",
   "nodes.humanInput.userActions.actionIdTooLong": "شناسه عملیات باید {{maxLength}} کاراکتر یا کمتر باشد",
   "nodes.humanInput.userActions.actionNamePlaceholder": "نام عملیات",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "متن نمایشی دکمه",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "مقدار عملیات",
   "nodes.humanInput.userActions.buttonTextTooLong": "متن دکمه باید {{maxLength}} کاراکتر یا کمتر باشد",
   "nodes.humanInput.userActions.chooseStyle": "انتخاب سبک دکمه",
   "nodes.humanInput.userActions.emptyTip": "برای افزودن عملیات کاربر روی '+' کلیک کنید",
   "nodes.humanInput.userActions.title": "عملیات کاربر",
-  "nodes.humanInput.userActions.tooltip": "دکمه‌هایی تعریف کنید که کاربر برای پاسخ به فرم روی آن‌ها کلیک کند. هر دکمه می‌تواند مسیر متفاوتی در گردش کار ایجاد کند. شناسه عملیات باید با حرف یا زیرخط شروع شود.",
+  "nodes.humanInput.userActions.tooltip": "دکمه‌هایی تعریف کنید که کاربر برای پاسخ به فرم روی آن‌ها کلیک کند. شناسه عملیات انشعاب را کنترل می‌کند. مقدار عملیات به عنوان خروجی داخلی انتخاب‌شده در مرحله پایین‌تر نمایش داده می‌شود. شناسه عملیات باید با حرف یا زیرخط شروع شود، و سپس حروف، اعداد یا زیرخط بیاید.",
   "nodes.humanInput.userActions.triggered": "عملیات <strong>{{actionName}}</strong> فعال شد",
   "nodes.ifElse.addCondition": "افزودن شرط",
   "nodes.ifElse.addSubVariable": "متغیر فرعی",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index cabed62c22..8cc130cc02 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "L'ID d'action doit commencer par une lettre ou des traits de soulignement, suivi de lettres, de chiffres ou de traits de soulignement",
   "nodes.humanInput.userActions.actionIdTooLong": "L'ID d'action doit comporter {{maxLength}} caractères ou moins",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nom de l'Action",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Texte d'affichage du bouton",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Valeur de l'action",
   "nodes.humanInput.userActions.buttonTextTooLong": "Le texte du bouton doit comporter {{maxLength}} caractères ou moins",
   "nodes.humanInput.userActions.chooseStyle": "Choisissez un style de bouton",
   "nodes.humanInput.userActions.emptyTip": "Cliquez sur le bouton '+' pour ajouter des actions utilisateur",
   "nodes.humanInput.userActions.title": "Actions Utilisateur",
-  "nodes.humanInput.userActions.tooltip": "Définissez les boutons sur lesquels les utilisateurs peuvent cliquer pour répondre à ce formulaire. Chaque bouton peut déclencher différents chemins de flux de travail. L'ID d'action doit commencer par une lettre ou des traits de soulignement, suivi de lettres, de chiffres ou de traits de soulignement.",
+  "nodes.humanInput.userActions.tooltip": "Définissez les boutons sur lesquels les utilisateurs peuvent cliquer pour répondre à ce formulaire. L'ID d'action contrôle la ramification. La Valeur de l'action est exposée en aval comme la sortie intégrée sélectionnée. L'ID d'action doit commencer par une lettre ou des traits de soulignement, suivi de lettres, de chiffres ou de traits de soulignement.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> a été déclenché",
   "nodes.ifElse.addCondition": "Ajouter une condition",
   "nodes.ifElse.addSubVariable": "Sous-variable",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index d16b9d0274..d5824f0039 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "कार्रवाई आईडी एक अक्षर या अंडरस्कोर से शुरू होनी चाहिए, उसके बाद अक्षर, संख्याएं या अंडरस्कोर हो सकते हैं",
   "nodes.humanInput.userActions.actionIdTooLong": "कार्रवाई आईडी {{maxLength}} वर्ण या उससे कम होनी चाहिए",
   "nodes.humanInput.userActions.actionNamePlaceholder": "कार्रवाई नाम",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "बटन प्रदर्शित करने के लिए पाठ",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "क्रिया मूल्य",
   "nodes.humanInput.userActions.buttonTextTooLong": "बटन पाठ {{maxLength}} वर्ण या उससे कम होना चाहिए",
   "nodes.humanInput.userActions.chooseStyle": "बटन शैली चुनें",
   "nodes.humanInput.userActions.emptyTip": "उपयोगकर्ता कार्रवाइयां जोड़ने के लिए '+' बटन पर क्लिक करें",
   "nodes.humanInput.userActions.title": "उपयोगकर्ता कार्रवाइयां",
-  "nodes.humanInput.userActions.tooltip": "उन बटन को परिभाषित करें जिन पर उपयोगकर्ता इस फॉर्म का जवाब देने के लिए क्लिक कर सकते हैं। प्रत्येक बटन विभिन्न वर्कफ़्लो पथों को ट्रिगर कर सकता है। कार्रवाई आईडी एक अक्षर या अंडरस्कोर से शुरू होनी चाहिए, उसके बाद अक्षर, संख्याएं या अंडरस्कोर हो सकते हैं।",
+  "nodes.humanInput.userActions.tooltip": "उन बटन को परिभाषित करें जिन पर उपयोगकर्ता इस फॉर्म का जवाब देने के लिए क्लिक कर सकते हैं। कार्रवाई आईडी शाखाओं को नियंत्रित करती है। क्रिया मूल्य डाउनस्ट्रीम में चयनित बिल्ट-इन आउटपुट के रूप में उजागर होता है। कार्रवाई आईडी एक अक्षर या अंडरस्कोर से शुरू होनी चाहिए, उसके बाद अक्षर, संख्याएं या अंडरस्कोर हो सकते हैं।",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> ट्रिगर किया गया है",
   "nodes.ifElse.addCondition": "शर्त जोड़ें",
   "nodes.ifElse.addSubVariable": "उप चर",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index dffc4ac5bf..7e60b33609 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID tindakan harus dimulai dengan huruf atau garis bawah, diikuti dengan huruf, angka, atau garis bawah",
   "nodes.humanInput.userActions.actionIdTooLong": "ID tindakan harus {{maxLength}} karakter atau kurang",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nama Tindakan",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Teks Tampilan Tombol",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Nilai Tindakan",
   "nodes.humanInput.userActions.buttonTextTooLong": "Teks tombol harus {{maxLength}} karakter atau kurang",
   "nodes.humanInput.userActions.chooseStyle": "Pilih gaya tombol",
   "nodes.humanInput.userActions.emptyTip": "Klik tombol '+' untuk menambahkan tindakan pengguna",
   "nodes.humanInput.userActions.title": "Tindakan Pengguna",
-  "nodes.humanInput.userActions.tooltip": "Tentukan tombol yang dapat diklik pengguna untuk merespons formulir ini. Setiap tombol dapat memicu jalur alur kerja yang berbeda. ID tindakan harus dimulai dengan huruf atau garis bawah, diikuti dengan huruf, angka, atau garis bawah.",
+  "nodes.humanInput.userActions.tooltip": "Tentukan tombol yang dapat diklik pengguna untuk merespons formulir ini. ID tindakan mengontrol percabangan. Nilai Tindakan diekspos ke hilir sebagai output bawaan yang dipilih. ID tindakan harus dimulai dengan huruf atau garis bawah, diikuti dengan huruf, angka, atau garis bawah.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> telah dipicu",
   "nodes.ifElse.addCondition": "Tambahkan Kondisi",
   "nodes.ifElse.addSubVariable": "Sub Variabel",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index fc86bf1b2f..e8967d8b09 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "L'ID azione deve iniziare con una lettera o underscore, seguito da lettere, numeri o underscore",
   "nodes.humanInput.userActions.actionIdTooLong": "L'ID azione deve essere di {{maxLength}} caratteri o meno",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nome Azione",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Testo del Pulsante da Visualizzare",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Valore dell'azione",
   "nodes.humanInput.userActions.buttonTextTooLong": "Il testo del pulsante deve essere di {{maxLength}} caratteri o meno",
   "nodes.humanInput.userActions.chooseStyle": "Scegli uno stile del pulsante",
   "nodes.humanInput.userActions.emptyTip": "Clicca il pulsante '+' per aggiungere azioni utente",
   "nodes.humanInput.userActions.title": "Azioni Utente",
-  "nodes.humanInput.userActions.tooltip": "Definisci i pulsanti su cui gli utenti possono cliccare per rispondere a questo modulo. Ogni pulsante può attivare percorsi di workflow diversi. L'ID azione deve iniziare con una lettera o underscore, seguito da lettere, numeri o underscore.",
+  "nodes.humanInput.userActions.tooltip": "Definisci i pulsanti su cui gli utenti possono cliccare per rispondere a questo modulo. L'ID azione controlla la ramificazione. Il Valore dell'azione viene esposto a valle come output integrato selezionato. L'ID azione deve iniziare con una lettera o underscore, seguito da lettere, numeri o underscore.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> è stato attivato",
   "nodes.ifElse.addCondition": "Aggiungi Condizione",
   "nodes.ifElse.addSubVariable": "Variabile secondaria",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index f00d49f6bf..c7db4c465a 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "アクションIDは文字またはアンダースコアで始まり、その後に文字、数字、またはアンダースコアが続く必要があります",
   "nodes.humanInput.userActions.actionIdTooLong": "アクションIDは{{maxLength}}文字以下である必要があります",
   "nodes.humanInput.userActions.actionNamePlaceholder": "アクション名",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "ボタン表示テキスト",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "アクション値",
   "nodes.humanInput.userActions.buttonTextTooLong": "ボタンテキストは{{maxLength}}文字以下である必要があります",
   "nodes.humanInput.userActions.chooseStyle": "ボタンスタイルを選択",
   "nodes.humanInput.userActions.emptyTip": "'+'ボタンをクリックしてユーザーアクションを追加",
   "nodes.humanInput.userActions.title": "ユーザーアクション",
-  "nodes.humanInput.userActions.tooltip": "ユーザーがこのフォームに応答するためにクリックできるボタンを定義します。各ボタンは異なるワークフローパスをトリガーできます。アクションIDは文字またはアンダースコアで始まり、その後に文字、数字、またはアンダースコアが続く必要があります。",
+  "nodes.humanInput.userActions.tooltip": "ユーザーがこのフォームに応答するためにクリックできるボタンを定義します。アクションIDは分岐を制御します。アクション値は選択された組み込み出力として下流に公開されます。アクションIDは文字またはアンダースコアで始まり、その後に文字、数字、またはアンダースコアが続く必要があります。",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong>がトリガーされました",
   "nodes.ifElse.addCondition": "条件を追加",
   "nodes.ifElse.addSubVariable": "サブ変数",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index 06225bb1a1..7eb315f1d4 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "작업 ID는 문자 또는 밑줄로 시작하고 그 뒤에 문자, 숫자 또는 밑줄이 와야 합니다",
   "nodes.humanInput.userActions.actionIdTooLong": "작업 ID는 {{maxLength}}자 이하여야 합니다",
   "nodes.humanInput.userActions.actionNamePlaceholder": "작업 이름",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "버튼 표시 텍스트",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "액션 값",
   "nodes.humanInput.userActions.buttonTextTooLong": "버튼 텍스트는 {{maxLength}}자 이하여야 합니다",
   "nodes.humanInput.userActions.chooseStyle": "버튼 스타일 선택",
   "nodes.humanInput.userActions.emptyTip": "'+' 버튼을 클릭하여 사용자 작업 추가",
   "nodes.humanInput.userActions.title": "사용자 작업",
-  "nodes.humanInput.userActions.tooltip": "사용자가 이 양식에 응답하기 위해 클릭할 수 있는 버튼을 정의합니다. 각 버튼은 다른 워크플로 경로를 트리거할 수 있습니다. 작업 ID는 문자 또는 밑줄로 시작하고 그 뒤에 문자, 숫자 또는 밑줄이 와야 합니다.",
+  "nodes.humanInput.userActions.tooltip": "사용자가 이 양식에 응답하기 위해 클릭할 수 있는 버튼을 정의합니다. 작업 ID는 분기를 제어합니다. 액션 값은 선택된 내장 출력으로 다운스트림에 노출됩니다. 작업 ID는 문자 또는 밑줄로 시작하고 그 뒤에 문자, 숫자 또는 밑줄이 와야 합니다.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong>이(가) 트리거되었습니다",
   "nodes.ifElse.addCondition": "조건 추가",
   "nodes.ifElse.addSubVariable": "하위 변수",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index 86b6b89ea5..a9607b92df 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Action ID must start with a letter or underscores, followed by letters, numbers, or underscores",
   "nodes.humanInput.userActions.actionIdTooLong": "Action ID must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Action Name",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Button display Text",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Actiewaarde",
   "nodes.humanInput.userActions.buttonTextTooLong": "Button text must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.chooseStyle": "Choose a button style",
   "nodes.humanInput.userActions.emptyTip": "Click the '+' button to add user actions",
   "nodes.humanInput.userActions.title": "User Actions",
-  "nodes.humanInput.userActions.tooltip": "Define buttons that users can click to respond to this form. Each button can trigger different workflow paths. Action ID must start with a letter or underscores, followed by letters, numbers, or underscores.",
+  "nodes.humanInput.userActions.tooltip": "Definieer knoppen waarop gebruikers kunnen klikken om op dit formulier te reageren. Actie-ID bepaalt de vertakking. De Actiewaarde wordt stroomafwaarts beschikbaar gesteld als de geselecteerde ingebouwde uitvoer. Actie-ID moet beginnen met een letter of onderstrepingsteken, gevolgd door letters, cijfers of onderstrepingstekens.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> has been triggered",
   "nodes.ifElse.addCondition": "Add Condition",
   "nodes.ifElse.addSubVariable": "Sub Variable",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 1d4ac0ec8a..d8118a1bc5 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Identyfikator akcji musi zaczynać się od litery lub podkreślenia, po którym następują litery, cyfry lub podkreślenia",
   "nodes.humanInput.userActions.actionIdTooLong": "Identyfikator akcji musi mieć {{maxLength}} znaków lub mniej",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nazwa akcji",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Tekst wyświetlany na przycisku",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Wartość akcji",
   "nodes.humanInput.userActions.buttonTextTooLong": "Tekst przycisku musi mieć {{maxLength}} znaków lub mniej",
   "nodes.humanInput.userActions.chooseStyle": "Wybierz styl przycisku",
   "nodes.humanInput.userActions.emptyTip": "Kliknij przycisk '+', aby dodać akcje użytkownika",
   "nodes.humanInput.userActions.title": "Akcje użytkownika",
-  "nodes.humanInput.userActions.tooltip": "Zdefiniuj przyciski, które użytkownicy mogą klikać, aby odpowiedzieć na ten formularz. Każdy przycisk może uruchomić różne ścieżki przepływu pracy. Identyfikator akcji musi zaczynać się od litery lub podkreślenia, po którym następują litery, cyfry lub podkreślenia.",
+  "nodes.humanInput.userActions.tooltip": "Zdefiniuj przyciski, które użytkownicy mogą klikać, aby odpowiedzieć na ten formularz. Identyfikator akcji kontroluje rozgałęzianie. Wartość akcji jest udostępniana w dalszej części jako wybrane wbudowane wyjście. Identyfikator akcji musi zaczynać się od litery lub podkreślenia, po którym następują litery, cyfry lub podkreślenia.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> został uruchomiony",
   "nodes.ifElse.addCondition": "Dodaj warunek",
   "nodes.ifElse.addSubVariable": "Zmienna podrzędna",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index 77209ffaf1..f303905759 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "O ID da ação deve começar com uma letra ou sublinhados, seguido de letras, números ou sublinhados",
   "nodes.humanInput.userActions.actionIdTooLong": "O ID da ação deve ter {{maxLength}} caracteres ou menos",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nome da Ação",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Texto de exibição do botão",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Valor da Ação",
   "nodes.humanInput.userActions.buttonTextTooLong": "O texto do botão deve ter {{maxLength}} caracteres ou menos",
   "nodes.humanInput.userActions.chooseStyle": "Escolha um estilo de botão",
   "nodes.humanInput.userActions.emptyTip": "Clique no botão '+' para adicionar ações do usuário",
   "nodes.humanInput.userActions.title": "Ações do Usuário",
-  "nodes.humanInput.userActions.tooltip": "Defina botões em que os usuários podem clicar para responder a este formulário. Cada botão pode acionar diferentes caminhos de fluxo de trabalho. O ID da ação deve começar com uma letra ou sublinhados, seguido de letras, números ou sublinhados.",
+  "nodes.humanInput.userActions.tooltip": "Defina botões em que os usuários podem clicar para responder a este formulário. O ID da ação controla a ramificação. O Valor da Ação é exposto posteriormente como a saída integrada selecionada. O ID da ação deve começar com uma letra ou sublinhados, seguido de letras, números ou sublinhados.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> foi acionado",
   "nodes.ifElse.addCondition": "Adicionar condição",
   "nodes.ifElse.addSubVariable": "Subvariável",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index 2151236135..aad60382da 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID-ul acțiunii trebuie să înceapă cu o literă sau underscore, urmat de litere, cifre sau underscore",
   "nodes.humanInput.userActions.actionIdTooLong": "ID-ul acțiunii trebuie să fie de {{maxLength}} caractere sau mai puțin",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nume acțiune",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Text afișat pe buton",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Valoarea Acțiunii",
   "nodes.humanInput.userActions.buttonTextTooLong": "Textul butonului trebuie să fie de {{maxLength}} caractere sau mai puțin",
   "nodes.humanInput.userActions.chooseStyle": "Alegeți un stil de buton",
   "nodes.humanInput.userActions.emptyTip": "Faceți clic pe butonul '+' pentru a adăuga acțiuni utilizator",
   "nodes.humanInput.userActions.title": "Acțiuni utilizator",
-  "nodes.humanInput.userActions.tooltip": "Definiți butoane pe care utilizatorii le pot apăsa pentru a răspunde la acest formular. Fiecare buton poate declanșa căi de flux diferite. ID-ul acțiunii trebuie să înceapă cu o literă sau underscore, urmat de litere, cifre sau underscore.",
+  "nodes.humanInput.userActions.tooltip": "Definiți butoane pe care utilizatorii le pot apăsa pentru a răspunde la acest formular. ID-ul acțiunii controlează ramificarea. Valoarea Acțiunii este expusă în aval ca ieșirea integrată selectată. ID-ul acțiunii trebuie să înceapă cu o literă sau underscore, urmat de litere, cifre sau underscore.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> a fost declanșat",
   "nodes.ifElse.addCondition": "Adăugați condiție",
   "nodes.ifElse.addSubVariable": "Subvariabilă",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index 195f8ef988..8748f2a27d 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Идентификатор действия должен начинаться с буквы или подчеркивания, за которым следуют буквы, цифры или подчеркивания",
   "nodes.humanInput.userActions.actionIdTooLong": "Идентификатор действия должен содержать не более {{maxLength}} символов",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Название действия",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Текст кнопки для отображения",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Значение действия",
   "nodes.humanInput.userActions.buttonTextTooLong": "Текст кнопки должен содержать не более {{maxLength}} символов",
   "nodes.humanInput.userActions.chooseStyle": "Выберите стиль кнопки",
   "nodes.humanInput.userActions.emptyTip": "Нажмите кнопку '+' для добавления действий пользователя",
   "nodes.humanInput.userActions.title": "Действия пользователя",
-  "nodes.humanInput.userActions.tooltip": "Определите кнопки, на которые пользователи могут нажимать, чтобы ответить на эту форму. Каждая кнопка может запускать разные пути рабочего процесса. Идентификатор действия должен начинаться с буквы или подчеркивания, за которым следуют буквы, цифры или подчеркивания.",
+  "nodes.humanInput.userActions.tooltip": "Определите кнопки, на которые пользователи могут нажимать, чтобы ответить на эту форму. Идентификатор действия управляет ветвлением. Значение действия передаётся далее как выбранный встроенный вывод. Идентификатор действия должен начинаться с буквы или подчеркивания, за которым следуют буквы, цифры или подчеркивания.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> был запущен",
   "nodes.ifElse.addCondition": "Добавить условие",
   "nodes.ifElse.addSubVariable": "Подпеременная",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index 3c3f4667f6..af8d236bf0 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID dejanja se mora začeti s črko ali podčrtajem, ki mu sledijo črke, številke ali podčrtaji",
   "nodes.humanInput.userActions.actionIdTooLong": "ID dejanja mora biti {{maxLength}} znakov ali manj",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Ime dejanja",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Besedilo za prikaz na gumbu",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Vrednost dejanja",
   "nodes.humanInput.userActions.buttonTextTooLong": "Besedilo gumba mora biti {{maxLength}} znakov ali manj",
   "nodes.humanInput.userActions.chooseStyle": "Izberite slog gumba",
   "nodes.humanInput.userActions.emptyTip": "Kliknite gumb '+' za dodajanje uporabniških dejanj",
   "nodes.humanInput.userActions.title": "Uporabniška dejanja",
-  "nodes.humanInput.userActions.tooltip": "Definirajte gumbe, ki jih lahko uporabniki kliknejo, da se odzovejo na ta obrazec. Vsak gumb lahko sproži različne poti delovnega toka. ID dejanja se mora začeti s črko ali podčrtajem, ki mu sledijo črke, številke ali podčrtaji.",
+  "nodes.humanInput.userActions.tooltip": "Definirajte gumbe, ki jih lahko uporabniki kliknejo, da se odzovejo na ta obrazec. ID dejanja nadzoruje razvejanje. Vrednost dejanja je izpostavljena navzdol kot izbrani vgrajeni izhod. ID dejanja se mora začeti s črko ali podčrtajem, ki mu sledijo črke, številke ali podčrtaji.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> je bil sprožen",
   "nodes.ifElse.addCondition": "Dodaj pogoj",
   "nodes.ifElse.addSubVariable": "Podspremenljivka",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index ecf8a1277f..b08d9fde0e 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID การดำเนินการต้องเริ่มต้นด้วยตัวอักษรหรือขีดล่าง ตามด้วยตัวอักษร ตัวเลข หรือขีดล่าง",
   "nodes.humanInput.userActions.actionIdTooLong": "ID การดำเนินการต้องมีความยาว {{maxLength}} ตัวอักษรหรือน้อยกว่า",
   "nodes.humanInput.userActions.actionNamePlaceholder": "ชื่อการดำเนินการ",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "ข้อความแสดงบนปุ่ม",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "ค่าการดำเนินการ",
   "nodes.humanInput.userActions.buttonTextTooLong": "ข้อความบนปุ่มต้องมีความยาว {{maxLength}} ตัวอักษรหรือน้อยกว่า",
   "nodes.humanInput.userActions.chooseStyle": "เลือกสไตล์ปุ่ม",
   "nodes.humanInput.userActions.emptyTip": "คลิกปุ่ม '+' เพื่อเพิ่มการดำเนินการของผู้ใช้",
   "nodes.humanInput.userActions.title": "การดำเนินการของผู้ใช้",
-  "nodes.humanInput.userActions.tooltip": "กำหนดปุ่มที่ผู้ใช้สามารถคลิกเพื่อตอบสนองต่อแบบฟอร์มนี้ แต่ละปุ่มสามารถเรียกใช้เส้นทางเวิร์กโฟลว์ที่แตกต่างกัน ID การดำเนินการต้องเริ่มต้นด้วยตัวอักษรหรือขีดล่าง ตามด้วยตัวอักษร ตัวเลข หรือขีดล่าง",
+  "nodes.humanInput.userActions.tooltip": "กำหนดปุ่มที่ผู้ใช้สามารถคลิกเพื่อตอบสนองต่อแบบฟอร์มนี้ ID การดำเนินการควบคุมการแยกสาขา ค่าการดำเนินการถูกเปิดเผยในระดับถัดไปเป็นเอาต์พุตในตัวที่เลือก ID การดำเนินการต้องเริ่มต้นด้วยตัวอักษรหรือขีดล่าง ตามด้วยตัวอักษร ตัวเลข หรือขีดล่าง",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> ถูกเรียกใช้แล้ว",
   "nodes.ifElse.addCondition": "เพิ่มเงื่อนไข",
   "nodes.ifElse.addSubVariable": "ตัวแปรย่อย",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index 018c5a6077..c9a6a77168 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Eylem kimliği bir harf veya alt çizgi ile başlamalı, ardından harf, rakam veya alt çizgi gelmelidir",
   "nodes.humanInput.userActions.actionIdTooLong": "Eylem kimliği {{maxLength}} karakter veya daha az olmalıdır",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Eylem Adı",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Düğme Görüntüleme Metni",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Eylem Değeri",
   "nodes.humanInput.userActions.buttonTextTooLong": "Düğme metni {{maxLength}} karakter veya daha az olmalıdır",
   "nodes.humanInput.userActions.chooseStyle": "Bir düğme stili seçin",
   "nodes.humanInput.userActions.emptyTip": "Kullanıcı eylemleri eklemek için '+' düğmesine tıklayın",
   "nodes.humanInput.userActions.title": "Kullanıcı Eylemleri",
-  "nodes.humanInput.userActions.tooltip": "Kullanıcıların bu forma yanıt vermek için tıklayabileceği düğmeleri tanımlayın. Her düğme farklı iş akışı yollarını tetikleyebilir. Eylem kimliği bir harf veya alt çizgi ile başlamalı, ardından harf, rakam veya alt çizgi gelmelidir.",
+  "nodes.humanInput.userActions.tooltip": "Kullanıcıların bu forma yanıt vermek için tıklayabileceği düğmeleri tanımlayın. Eylem kimliği dallanmayı kontrol eder. Eylem Değeri, seçilen yerleşik çıktı olarak aşağı akışta sunulur. Eylem kimliği bir harf veya alt çizgi ile başlamalı, ardından harf, rakam veya alt çizgi gelmelidir.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> tetiklendi",
   "nodes.ifElse.addCondition": "Koşul Ekle",
   "nodes.ifElse.addSubVariable": "Alt Değişken",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index a7687edcc8..6fe9e4672f 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Ідентифікатор дії повинен починатися з літери або підкреслення, за яким слідують літери, цифри або підкреслення",
   "nodes.humanInput.userActions.actionIdTooLong": "Ідентифікатор дії повинен містити не більше {{maxLength}} символів",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Назва дії",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Текст кнопки для відображення",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Значення дії",
   "nodes.humanInput.userActions.buttonTextTooLong": "Текст кнопки повинен містити не більше {{maxLength}} символів",
   "nodes.humanInput.userActions.chooseStyle": "Виберіть стиль кнопки",
   "nodes.humanInput.userActions.emptyTip": "Натисніть кнопку '+' для додавання дій користувача",
   "nodes.humanInput.userActions.title": "Дії користувача",
-  "nodes.humanInput.userActions.tooltip": "Визначте кнопки, на які користувачі можуть натискати, щоб відповісти на цю форму. Кожна кнопка може запускати різні шляхи робочого процесу. Ідентифікатор дії повинен починатися з літери або підкреслення, за яким слідують літери, цифри або підкреслення.",
+  "nodes.humanInput.userActions.tooltip": "Визначте кнопки, на які користувачі можуть натискати, щоб відповісти на цю форму. Ідентифікатор дії контролює розгалуження. Значення дії відкривається нижче за потоком як вибраний вбудований вивід. Ідентифікатор дії повинен починатися з літери або підкреслення, за яким слідують літери, цифри або підкреслення.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> було запущено",
   "nodes.ifElse.addCondition": "Додати умову",
   "nodes.ifElse.addSubVariable": "Підзмінна",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index db9d484b23..bbaccec6c6 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID hành động phải bắt đầu bằng chữ cái hoặc dấu gạch dưới, theo sau là chữ cái, số hoặc dấu gạch dưới",
   "nodes.humanInput.userActions.actionIdTooLong": "ID hành động phải có {{maxLength}} ký tự trở xuống",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Tên Hành động",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "Văn bản Hiển thị Nút",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "Giá trị Hành động",
   "nodes.humanInput.userActions.buttonTextTooLong": "Văn bản nút phải có {{maxLength}} ký tự trở xuống",
   "nodes.humanInput.userActions.chooseStyle": "Chọn kiểu nút",
   "nodes.humanInput.userActions.emptyTip": "Nhấp vào nút '+' để thêm hành động người dùng",
   "nodes.humanInput.userActions.title": "Hành động Người dùng",
-  "nodes.humanInput.userActions.tooltip": "Xác định các nút mà người dùng có thể nhấp để phản hồi biểu mẫu này. Mỗi nút có thể kích hoạt các đường dẫn quy trình làm việc khác nhau. ID hành động phải bắt đầu bằng chữ cái hoặc dấu gạch dưới, theo sau là chữ cái, số hoặc dấu gạch dưới.",
+  "nodes.humanInput.userActions.tooltip": "Xác định các nút mà người dùng có thể nhấp để phản hồi biểu mẫu này. ID hành động kiểm soát việc phân nhánh. Giá trị Hành động được hiển thị ở phía sau như là đầu ra tích hợp được chọn. ID hành động phải bắt đầu bằng chữ cái hoặc dấu gạch dưới, theo sau là chữ cái, số hoặc dấu gạch dưới.",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong> đã được kích hoạt",
   "nodes.ifElse.addCondition": "Thêm điều kiện",
   "nodes.ifElse.addSubVariable": "Biến phụ",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 6536f5ccdc..951d60bfd8 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线",
   "nodes.humanInput.userActions.actionIdTooLong": "操作 ID 不能超过 {{maxLength}} 个字符",
   "nodes.humanInput.userActions.actionNamePlaceholder": "操作名称",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "按钮显示文本",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "操作值",
   "nodes.humanInput.userActions.buttonTextTooLong": "按钮文本不能超过 {{maxLength}} 个字符",
   "nodes.humanInput.userActions.chooseStyle": "选择按钮样式",
   "nodes.humanInput.userActions.emptyTip": "点击 '+' 按钮添加用户操作",
   "nodes.humanInput.userActions.title": "用户操作",
-  "nodes.humanInput.userActions.tooltip": "定义用户可以点击以响应此表单的按钮。每个按钮都可以触发不同的工作流路径。操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线。",
+  "nodes.humanInput.userActions.tooltip": "定义用户可以点击以响应此表单的按钮。操作 ID 控制分支。操作值作为所选内置输出在下游公开。操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线。",
   "nodes.humanInput.userActions.triggered": "已触发<strong>{{actionName}}</strong>",
   "nodes.ifElse.addCondition": "添加条件",
   "nodes.ifElse.addSubVariable": "添加子变量",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 9544a4ba2e..bd7e1b20d1 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -646,12 +646,12 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "操作 ID 必須以字母或下劃線開頭,後跟字母、數字或下劃線",
   "nodes.humanInput.userActions.actionIdTooLong": "操作 ID 不能超過{{maxLength}}個字符",
   "nodes.humanInput.userActions.actionNamePlaceholder": "操作名稱",
-  "nodes.humanInput.userActions.buttonTextPlaceholder": "按鈕顯示文本",
+  "nodes.humanInput.userActions.buttonTextPlaceholder": "操作值",
   "nodes.humanInput.userActions.buttonTextTooLong": "按鈕文本不能超過{{maxLength}}個字符",
   "nodes.humanInput.userActions.chooseStyle": "選擇按鈕樣式",
   "nodes.humanInput.userActions.emptyTip": "點擊 '+' 按鈕添加用戶操作",
   "nodes.humanInput.userActions.title": "用戶操作",
-  "nodes.humanInput.userActions.tooltip": "定義用戶可以點擊以響應此表單的按鈕。每個按鈕可以觸發不同的工作流路徑。操作 ID 必須以字母或下劃線開頭,後跟字母、數字或下劃線。",
+  "nodes.humanInput.userActions.tooltip": "定義用戶可以點擊以響應此表單的按鈕。操作 ID 控制分支。操作值作為所選內置輸出在下游公開。操作 ID 必須以字母或下劃線開頭,後跟字母、數字或下劃線。",
   "nodes.humanInput.userActions.triggered": "<strong>{{actionName}}</strong>已被觸發",
   "nodes.ifElse.addCondition": "新增條件",
   "nodes.ifElse.addSubVariable": "子變數",