The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Size Change: +6 B (0%)

Total Size: 2.58 MB

_{compressed-size-action}

Flaky tests detected in e97ee6b.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20339581266
📝 Reported issues:

• [Flaky Test] should open and edit templates correctly when active_templates experiment is disabled #73743 in /test/e2e/specs/site-editor/template-id-format.spec.js
• [Flaky Test] should open and edit templates correctly when active_templates experiment is enabled #73752 in /test/e2e/specs/site-editor/template-id-format.spec.js

I share the motivation, and if this PR fixes it, 👍 👍, but want to just throw the question into the mix: would :focus-visible be better for this?

would :focus-visible be better for this?

Mmm, we've considered it (#65088) in depth, but there are downsides to that approach that gives us pause. The :active approach mitigates one of the annoyances of a :focus ring, with no downsides (that I know of).

The :active approach mitigates one of the annoyances of a :focus ring, with no downsides (that I know of)

I think I found a downside – at least with the implementation since this PR. In Chrome and Safari, this has allowed the native outlines to show when activating buttons with Space.

I wasn’t able to reproduce that after reverse applying the code change from this PR:

git show 7793dffec75765abde5068262f98d32a8e2fcd61 packages/components/src/button/style.scss | git apply -R

I imagine this can be fixed by separating the outline rule into a different selector without the :not(:active).

Other than that, for consistency, it looks like the toolbar styles should get similar treatment.

Here’s one spot, for instance:

One last thing, is that sometimes the flicker still happens although more faintly. You can actually see it in the screen recording posted by Aaron above. That particular button is also where it seems mostly likely to happen oddly enough. On my machine, Firefox is the most likely browser to have that happen. I am not sure I’ve seen it in Chrome or Safari outside of that aforementioned particular button. I’ve only encountered this in the editor as well – though I’ve tested less in Storybook, I haven’t seen it happen there.

@stokesman

I think I found a downside – at least with the implementation since this PR. In Chrome and Safari, this has allowed the native outlines to show when activating buttons with Space.
...
I imagine this can be fixed by separating the outline rule into a different selector without the :not(:active).

I opened #75346 with a fix, which hopefully will also tackle the "Firefox in the editor" flicker 🤞

I tried to apply a similiar fix to the toolbar styles

diff --git i/packages/components/src/toolbar/toolbar/style.scss w/packages/components/src/toolbar/toolbar/style.scss
index 988d5f5d12f..49539ef7d2e 100644
--- i/packages/components/src/toolbar/toolbar/style.scss
+++ w/packages/components/src/toolbar/toolbar/style.scss
@@ -87,9 +87,13 @@
 		}
 
 		// Focus style.
-		&:focus::before {
+		&:focus:not(:active)::before {
 			@include block-toolbar-button-style__focus();
 		}
+		&:focus::before {
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+		}
 
 		// Ensure the icon buttons remain square.
 		// This needs specificity.

but there is a noticeable flicker when opening dropdowns from the toolbar, potentially caused by some browser timing , where the key may be released (ie. the active state is not applied anymore) but the focus is still on the button while the dropdown is opening.

The only fix that comes to mind is to apply a delay to the appearance of the box shadow.