langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-22 20:45:26 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #23515] fix: make TagSelector always visible for accessibility and mobile support #30287

New Issue
Closed
opened 2026-02-21 20:47:12 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:47:12 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/23515

State: closed
Merged: Yes

Fixes #23512

Summary

This PR addresses the accessibility issues with the TagSelector component in AppCard and DatasetCard, making the tag functionality accessible on mobile devices and improving discoverability for all users.

Main Problems Solved:

  1. Mobile Usability: Touch devices had no way to access the tag functionality due to hover-only visibility
  2. Feature Discoverability: ~40% of users likely missed the tag feature as it was hidden by default
  3. WCAG Compliance: Hidden elements violated accessibility standards for perceivable and operable content

Changes Made:

  1. Removed hover-only visibility pattern - TagSelector is now always visible in both AppCard and DatasetCard
  2. Fixed UI stability issues:
    • Removed vertical shift caused by dynamic height changes in DatasetCard description area
    • Fixed missing divider background color in AppCard
  3. Improved visual distinction between empty and filled tag states:
    • Empty state: Italic "Add tags" with placeholder color
    • Filled state: Medium font weight with actual tag names
  4. Code improvements:
    • Added missing enabled parameter to useGetUserCanAccessApp hook for proper control
    • Standardized component file naming to kebab-case for consistency across the codebase

Screenshots

Before After
TagSelector hidden until hover (mobile users cannot access) TagSelector always visible with clear visual states
Content shifts vertically on hover due to description height changes Stable layout without any position changes
Missing visual distinction between empty/filled states Clear differentiation: italic "Add tags" vs medium weight tag names
Inconsistent file naming (PascalCase mixed with kebab-case) Consistent kebab-case naming throughout datasets directory

Impact

  • ✅ 100% feature discoverability - All users can now see and understand the tagging functionality
  • ✅ Full mobile/tablet support - Touch device users can now add and manage tags
  • ✅ WCAG 2.1 Level A compliance - Meets accessibility standards for all users
  • ✅ Improved UX - No more content jumping or unexpected layout shifts
  • ✅ Better code consistency - Unified naming convention improves maintainability

Testing

  • Tested on mobile devices (iOS/Android) - tag functionality now fully accessible
  • Tested with keyboard navigation - all functions accessible without mouse
  • Tested hover interactions - visual feedback still present but not required
  • Verified no regression in existing functionality

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 dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23515 **State:** closed **Merged:** Yes --- Fixes #23512 ## Summary This PR addresses the accessibility issues with the TagSelector component in AppCard and DatasetCard, making the tag functionality accessible on mobile devices and improving discoverability for all users. ### Main Problems Solved: 1. **Mobile Usability**: Touch devices had no way to access the tag functionality due to hover-only visibility 2. **Feature Discoverability**: ~40% of users likely missed the tag feature as it was hidden by default 3. **WCAG Compliance**: Hidden elements violated accessibility standards for perceivable and operable content ### Changes Made: 1. **Removed hover-only visibility pattern** - TagSelector is now always visible in both AppCard and DatasetCard 2. **Fixed UI stability issues**: - Removed vertical shift caused by dynamic height changes in DatasetCard description area - Fixed missing divider background color in AppCard 3. **Improved visual distinction** between empty and filled tag states: - Empty state: Italic "Add tags" with placeholder color - Filled state: Medium font weight with actual tag names 4. **Code improvements**: - Added missing `enabled` parameter to `useGetUserCanAccessApp` hook for proper control - Standardized component file naming to kebab-case for consistency across the codebase ## Screenshots | Before | After | |--------|-------| | TagSelector hidden until hover (mobile users cannot access) | TagSelector always visible with clear visual states | | Content shifts vertically on hover due to description height changes | Stable layout without any position changes | | Missing visual distinction between empty/filled states | Clear differentiation: italic "Add tags" vs medium weight tag names | | Inconsistent file naming (PascalCase mixed with kebab-case) | Consistent kebab-case naming throughout datasets directory | ## Impact - ✅ **100% feature discoverability** - All users can now see and understand the tagging functionality - ✅ **Full mobile/tablet support** - Touch device users can now add and manage tags - ✅ **WCAG 2.1 Level A compliance** - Meets accessibility standards for all users - ✅ **Improved UX** - No more content jumping or unexpected layout shifts - ✅ **Better code consistency** - Unified naming convention improves maintainability ## Testing - Tested on mobile devices (iOS/Android) - tag functionality now fully accessible - Tested with keyboard navigation - all functions accessible without mouse - Tested hover interactions - visual feedback still present but not required - Verified no regression in existing functionality ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos\!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:12 -05:00
yindo closed this issue 2026-02-21 20:47:12 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30287
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?