ItemGroup: Update button focus styles to be more consistent #51576
Conversation
mikachan
added
[Type] Enhancement
|
Flaky tests detected in f8df8e3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5313799757
|
|
Thanks for reviewing, @juanfra! I've updated the CHANGELOG now too. |
There was a problem hiding this comment.
👋 Thank you for working on this!
cc'ing @jasmussen in case he had any feedback on this style change
| @@ -23,6 +23,16 @@ export const unstyledButton = css` | |||
| &:hover { | |||
| color: ${ COLORS.ui.theme }; | |||
| } | |||
|
|
|||
| &:focus { | |||
There was a problem hiding this comment.
Have you considered using :focus-visible instead, so that the focus ring only shows when interacting with the keyboard?
There was a problem hiding this comment.
Yes, actually I initially was going to use :focus-visible, but it looks like the other buttons in the editor mostly use :focus. This doesn't mean it's the best way, but I was mainly trying to keep the styling consistent between the other editor buttons. Maybe all the buttons could be updated to use :focus-visible?
There was a problem hiding this comment.
That could be something to keep in mind, yes. Let's wait for Joen's feedback , in case 😄
There was a problem hiding this comment.
Hey, thanks for the ping! Just for clarity, here's before:
Here's after:
In the after state, the focus style is now the correct color and the correct width (1.5px) in both places. However to Marco's point, it also now adds sticks the focus style when mouse navigating, which is especially jarring in these drilldown situations. I'd lean towards using focus visible here, it's already being applied for the back button in the site view, despite that lingering tooltip.
There was a problem hiding this comment.
Thanks both! I agree that :focus-visible makes more sense here, I've opened up a small follow-up PR: #51787
…s#51576) * Update item-group focus styles * Update test snapshot * Update changelog * Update changelog entry
What?
Small update to make the focus styles of
ItemGroupcomponent consistent with other button focus styles in the editor.Why?
Resolves this comment: #50757 (comment)
How?
Copies the button focus styles used in the block settings panel.
Testing Instructions
Compare the focus states of the buttons in the Pattern Inserter and the Global Styles panel. The focus states should include a styled border.
Screenshots or screencast