fix: FIT-145: Taxonomy items not visible dark mode using arrow keys #7576
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…avigates using Arrow keys
…cycling through them using arrow keys.
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
✅ Deploy Preview for heartex-docs canceled.
|
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
hlomzik
approved these changes
May 20, 2025
ricardoantoniocm
requested review from
Gondragos and
nick-skriabin
as code owners
robot-ci-heartex
deleted the
fb-fit-145/taxonomy-items-not-visible-dark-mode-using-arrow-keys
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reason for change
This PR addresses an issue where taxonomy items were not visible in Dark mode when navigating the taxonomy tree using arrow key hotkeys.
The changes primarily involve updates to
Taxonomy.scssto improve the visual feedback for active and hovered items:.ant-select-tree-treenode, ensuring only the node wrappers inside tree nodes are targeted..ant-select-tree-treenode-active), setting a distinct background color and text color to properly highlight the active node..ant-empty-description, setting its color to a subtler neutral content color for consistency.These modifications ensure that the active taxonomy item is clearly visible in Dark mode, resolving the reported accessibility and usability issue.
Screenshots
Before:
After:
Rollout strategy
This change does not require a specific rollout strategy beyond a standard deployment. It's a CSS fix that directly addresses a visual bug and does not introduce any new features or breaking changes.
Testing
The fix has been verified by following the steps to reproduce the original bug:
Risks
No significant risks are anticipated with this change. It is a targeted CSS adjustment and does not impact core functionality, security, or performance.
Reviewer notes
Please pay attention to the changes in
Taxonomy.scss, specifically the new styles for.ant-select-tree-treenode-activeand the more specific selector for hovered nodes. Ensure the visual changes align with expectations for Dark mode visibility.General notes
This PR directly addresses the reported bug and improves the user experience for users navigating taxonomy trees in Dark mode. The changes are confined to styling and do not alter any underlying logic.