Issue Station
Sign In
Tools hereToolbox

dify - ✅(Solved) Fix [Refactor/Chore] Align frontend tests with accessible UI semantics [1 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
langgenius/dify#36005•Fetched 2026-05-11 03:28:59
View on GitHub
Comments
0
Participants
1
Timeline
4
Reactions
1
Author
lyzno1lyzno1
Participants
lyzno1lyzno1
Assignees
lyzno1lyzno1
Timeline (top)
assigned ×1connected ×1cross-referenced ×1disconnected ×1

Refactor frontend unit and component integration tests so interactive UI is tested through user-facing semantics such as roles, labels, visible names, and dialog scope instead of implementation-only test IDs.

The refactor should also tighten obvious accessibility gaps surfaced by those tests, especially mouse-only controls, unnamed icon controls, and decorative icons that should be hidden from assistive technology. Existing visual appearance, hover behavior, focus behavior, and click targets should be preserved.

Root Cause

Refactor frontend unit and component integration tests so interactive UI is tested through user-facing semantics such as roles, labels, visible names, and dialog scope instead of implementation-only test IDs.

The refactor should also tighten obvious accessibility gaps surfaced by those tests, especially mouse-only controls, unnamed icon controls, and decorative icons that should be hidden from assistive technology. Existing visual appearance, hover behavior, focus behavior, and click targets should be preserved.

Fix Action

Fixed

PR fix notes

PR #35999: feat(web): improve a11y and remove data-testid

Description (problem / solution / changelog)

[!IMPORTANT]

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Part of #36005

Screenshots

BeforeAfter
......

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran make lint && make type-check (backend) and cd web && pnpm exec vp staged (frontend) to appease the lint gods

Changed files

  • .agents/skills/frontend-testing/SKILL.md (modified, +6/-3)
  • e2e/features/step-definitions/apps/share-app.steps.ts (modified, +1/-1)
  • web/__tests__/base/notion-page-selector-flow.test.tsx (modified, +2/-2)
  • web/__tests__/share/text-generation-run-once-flow.test.tsx (modified, +5/-5)
  • web/app/(commonLayout)/datasets/layout.spec.tsx (modified, +6/-6)
  • web/app/(commonLayout)/role-route-guard.spec.tsx (modified, +8/-8)
  • web/app/components/app/annotation/__tests__/filter.spec.tsx (modified, +1/-4)
  • web/app/components/app/annotation/batch-action.tsx (modified, +14/-6)
  • web/app/components/app/annotation/batch-add-annotation-modal/__tests__/csv-uploader.spec.tsx (modified, +2/-2)
  • web/app/components/app/annotation/batch-add-annotation-modal/__tests__/index.spec.tsx (modified, +8/-0)
  • web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx (modified, +15/-4)
  • web/app/components/app/annotation/batch-add-annotation-modal/index.tsx (modified, +8/-3)
  • web/app/components/app/app-access-control/__tests__/access-control.spec.tsx (modified, +4/-4)
  • web/app/components/app/app-access-control/__tests__/specific-groups-or-members.spec.tsx (modified, +4/-2)
  • web/app/components/app/app-access-control/add-member-or-group-pop.tsx (modified, +28/-2)
  • web/app/components/app/app-access-control/specific-groups-or-members.tsx (modified, +10/-3)
  • web/app/components/app/app-publisher/__tests__/version-info-modal.spec.tsx (modified, +16/-0)
  • web/app/components/app/app-publisher/version-info-modal.tsx (modified, +8/-3)
  • web/app/components/app/configuration/config-var/__tests__/index.spec.tsx (modified, +7/-15)
  • web/app/components/app/configuration/config-var/__tests__/var-item.spec.tsx (modified, +1/-1)
  • web/app/components/app/configuration/config-var/config-select/__tests__/index.spec.tsx (modified, +2/-7)
  • web/app/components/app/configuration/config-var/config-select/index.tsx (modified, +6/-5)
  • web/app/components/app/configuration/config-var/var-item.tsx (modified, +14/-9)
  • web/app/components/app/configuration/config/agent/agent-tools/__tests__/index.spec.tsx (modified, +1/-1)
  • web/app/components/app/configuration/config/agent/agent-tools/index.tsx (modified, +14/-10)
  • web/app/components/app/configuration/config/automatic/__tests__/instruction-editor.spec.tsx (modified, +1/-1)
  • web/app/components/app/configuration/config/automatic/instruction-editor.tsx (modified, +7/-1)
  • web/app/components/app/configuration/configuration-view.tsx (modified, +0/-1)
  • web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx (modified, +4/-4)
  • web/app/components/app/configuration/ctrl-btn-group/index.tsx (modified, +2/-2)
  • web/app/components/app/configuration/dataset-config/settings-modal/__tests__/index.spec.tsx (modified, +1/-1)
  • web/app/components/app/configuration/dataset-config/settings-modal/index.tsx (modified, +7/-1)
  • web/app/components/app/configuration/prompt-value-panel/__tests__/index.spec.tsx (modified, +1/-1)
  • web/app/components/app/configuration/prompt-value-panel/index.tsx (modified, +8/-4)
  • web/app/components/app/create-app-dialog/__tests__/index.spec.tsx (modified, +13/-13)
  • web/app/components/app/create-app-dialog/app-list/sidebar.tsx (modified, +23/-16)
  • web/app/components/app/create-app-modal/index.tsx (modified, +9/-5)
  • web/app/components/app/create-from-dsl-modal/__tests__/uploader.spec.tsx (modified, +1/-1)
  • web/app/components/app/create-from-dsl-modal/uploader.tsx (modified, +7/-1)
  • web/app/components/app/duplicate-modal/__tests__/index.spec.tsx (modified, +21/-0)
  • web/app/components/app/duplicate-modal/index.tsx (modified, +8/-3)
  • web/app/components/app/log-annotation/__tests__/index.spec.tsx (modified, +8/-8)
  • web/app/components/app/log/__tests__/empty-element.spec.tsx (modified, +2/-3)
  • web/app/components/app/log/__tests__/filter.spec.tsx (modified, +1/-1)
  • web/app/components/app/overview/app-card-sections.tsx (modified, +32/-38)
  • web/app/components/app/overview/customize/__tests__/index.spec.tsx (modified, +1/-1)
  • web/app/components/app/overview/customize/index.tsx (modified, +1/-1)
  • web/app/components/app/switch-app-modal/__tests__/index.spec.tsx (modified, +9/-0)
  • web/app/components/app/switch-app-modal/index.tsx (modified, +15/-4)
  • web/app/components/app/workflow-log/__tests__/detail.spec.tsx (modified, +5/-8)
  • web/app/components/app/workflow-log/__tests__/filter.spec.tsx (modified, +2/-10)
  • web/app/components/app/workflow-log/detail.tsx (modified, +10/-5)
  • web/app/components/app/workflow-log/list.tsx (modified, +7/-2)
  • web/app/components/base/__tests__/alert.spec.tsx (modified, +2/-3)
  • web/app/components/base/agent-log-modal/__tests__/detail.spec.tsx (modified, +3/-3)
  • web/app/components/base/agent-log-modal/__tests__/index.spec.tsx (modified, +1/-1)
  • web/app/components/base/agent-log-modal/detail.tsx (modified, +14/-4)
  • web/app/components/base/agent-log-modal/index.tsx (modified, +8/-3)
  • web/app/components/base/alert.tsx (modified, +9/-4)
  • web/app/components/base/app-icon-picker/__tests__/index.spec.tsx (modified, +2/-2)
  • web/app/components/base/audio-btn/index.tsx (modified, +2/-1)
  • web/app/components/base/audio-gallery/AudioPlayer.tsx (modified, +6/-4)
  • web/app/components/base/audio-gallery/__tests__/AudioPlayer.spec.tsx (modified, +23/-18)
  • web/app/components/base/chat/chat-with-history/__tests__/chat-wrapper.spec.tsx (modified, +2/-2)
  • web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx (modified, +4/-4)
  • web/app/components/base/chat/chat-with-history/header/__tests__/mobile-operation-dropdown.spec.tsx (modified, +6/-6)
  • web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx (modified, +10/-7)
  • web/app/components/base/chat/chat-with-history/sidebar/__tests__/item.spec.tsx (modified, +18/-18)
  • web/app/components/base/chat/chat/__tests__/chat-log-modals.spec.tsx (modified, +1/-1)
  • web/app/components/base/chat/chat/__tests__/question.spec.tsx (modified, +34/-34)
  • web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx (modified, +8/-8)
  • web/app/components/base/chat/chat/answer/human-input-content/__tests__/human-input-form.spec.tsx (modified, +1/-1)
  • web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx (modified, +0/-1)
  • web/app/components/base/chat/chat/answer/operation.tsx (modified, +1/-2)
  • web/app/components/base/chat/chat/chat-input-area/__tests__/index.spec.tsx (modified, +15/-15)
  • web/app/components/base/chat/chat/chat-input-area/__tests__/operation.spec.tsx (modified, +4/-5)
  • web/app/components/base/chat/chat/chat-input-area/operation.tsx (modified, +7/-4)
  • web/app/components/base/chat/chat/citation/__tests__/popup.spec.tsx (modified, +17/-15)
  • web/app/components/base/chat/chat/citation/popup.tsx (modified, +1/-2)
  • web/app/components/base/chat/chat/question.tsx (modified, +8/-6)
  • web/app/components/base/chat/embedded-chatbot/header/__tests__/index.spec.tsx (modified, +10/-10)
  • web/app/components/base/chat/embedded-chatbot/header/index.tsx (modified, +26/-10)
  • web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/index.spec.tsx (modified, +7/-7)
  • web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx (modified, +0/-3)
  • web/app/components/base/copy-feedback/__tests__/index.spec.tsx (modified, +10/-12)
  • web/app/components/base/copy-feedback/index.tsx (modified, +9/-9)
  • web/app/components/base/copy-icon/__tests__/index.spec.tsx (modified, +4/-9)
  • web/app/components/base/copy-icon/index.tsx (modified, +2/-2)
  • web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx (modified, +1/-4)
  • web/app/components/base/date-and-time-picker/date-picker/index.tsx (modified, +8/-1)
  • web/app/components/base/date-and-time-picker/time-picker/index.tsx (modified, +8/-1)
  • web/app/components/base/emoji-picker/Inner.tsx (modified, +42/-18)
  • web/app/components/base/emoji-picker/__tests__/Inner.spec.tsx (modified, +12/-12)
  • web/app/components/base/emoji-picker/__tests__/index.spec.tsx (modified, +1/-3)
  • web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx (modified, +5/-5)
  • web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx (modified, +6/-13)
  • web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx (modified, +5/-5)
  • web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx (modified, +6/-13)
  • web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx (modified, +8/-8)
  • web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx (modified, +6/-12)
RAW_BUFFERClick to expand / collapse

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • This is only for refactors or chores; if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
  • Please do not modify this template :) and fill in all the required fields.

Description

Refactor frontend unit and component integration tests so interactive UI is tested through user-facing semantics such as roles, labels, visible names, and dialog scope instead of implementation-only test IDs.

The refactor should also tighten obvious accessibility gaps surfaced by those tests, especially mouse-only controls, unnamed icon controls, and decorative icons that should be hidden from assistive technology. Existing visual appearance, hover behavior, focus behavior, and click targets should be preserved.

Motivation

Implementation-only test IDs can hide accessibility issues and make tests assert DOM details that users do not perceive. Semantic queries make tests more representative of real user behavior and help catch missing labels, incorrect control types, and keyboard access gaps earlier.

This is not a request to replace component tests with E2E tests. The goal is to keep valuable frontend tests, reduce implementation-detail assertions, and prefer behavior-focused component/integration coverage with fewer mocks where practical.

Reference: https://tkdodo.eu/blog/test-ids-are-an-a11y-smell

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#container setup#orchestration issue#cache issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

dify - ✅(Solved) Fix [Refactor/Chore] Align frontend tests with accessible UI semantics [1 pull requests, 1 participants]