fix(fuselage): use :focus-visible instead of :focus for AccordionItem focus styling#1889
Open
vmridul wants to merge 3 commits intoRocketChat:mainfrom
Open
fix(fuselage): use :focus-visible instead of :focus for AccordionItem focus styling#1889vmridul wants to merge 3 commits intoRocketChat:mainfrom
vmridul wants to merge 3 commits intoRocketChat:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 7743363 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dougfabris
changed the title
Member
|
@vmridul Thanks for the contribution. I will run some tests, can u add a changeset? |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Changes
Updates the focus styling of
AccordionItemheaders to use:focus-visibleinstead of:focus.Issue
The accordion header applies a focus border when interacted with. In some dialogs (such as Create Channel / Create Team) the border can remain visible after interaction (see the 3rd screen recording), making the accordion appear permanently highlighted.
Result
-Prevents the focus border from appearing after mouse interaction.
-Preserves focus indication for keyboard navigation.
-Improves visual consistency across the UI.
Testing
Tested in:
-Storybook Accordion component
Screen Recordings
Accordion behavior in Storybook before the change
https://github.com/user-attachments/assets/32bb55f1-ea30-4a24-8ed7-c3c0102703bf
Accordion behavior in Storybook after the change
https://github.com/user-attachments/assets/a8b20499-155e-4dc9-9a09-8c5e0d5e91d0
Accordion in Create Channel dialog demonstrating the issue
https://github.com/user-attachments/assets/8508492e-f51b-4f76-97e4-df8681252ff5
Issue(s)
Further comments