Fix : "Set featured image" button border flashes on focus

[Vrishabhsk]

What?

• Add box-shadow style for :focus:not(:disabled) state of "Set featured image" button.

Why?

• "Set featured image" button border flashes on focus #65299

There is a lag between the focus ring appearing and the normal border disappearing.

Fixes #65299

How?

• The box-shadow inset property isn't affected by the transition delay
• To prevent this, the style was implemented as per the steps mentioned here : #66007

Screenshots or screencast

Original

Screen.Recording.2024-10-14.at.4.14.16.PM.mov

Improved

Screen.Recording.2024-10-14.at.4.16.01.PM.mov

[github-actions]

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: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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

[t-hamano]

Thanks for the PR!

I noticed that the moment the button was focused, the border changed to black.

See the slow motion video below:

8ad8e1d05bf8758e58904ad525842158.mp4

I looked for the cause and found that these three styles were affecting it. Since appropriate styles were already provided, it seemed safe to remove them.

Below is the slow motion video after removing these three styles:

f9c6dc6aef898cd64fc5ba858355caa0.mp4

[Vrishabhsk]

Thanks @t-hamano for the catch.

• Instead of removing all three styles, I instead removed only the transition line
• This prevents the black border which appeared for a split-second before the transition was complete.
• Also removing all three styles, does change the border color quite a bit from the original
• Here is the preview of that, slowed down

Screen.Recording.2024-10-15.at.11.16.59.AM.mov

Let me know your thoughts on this. Thanks

[t-hamano]

Thanks for the update!

Also removing all three styles, does change the border color quite a bit from the original

Does this have to do with this box-shadow? This style is always supposed to be overridden here, so I'm wondering why it's affecting the transition 🤔

[Vrishabhsk]

Hi @t-hamano,

• As per computed styles for the buttton, it has the following styles

    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;

• This style is overridden by the .components-button selector, which sets border: 0
• The transition used is applied on for all CSS properties.
• Hence, it takes the border also into account, and it appears for a split second
• This is also why removing that transition prevents the black border from appearing at all

[t-hamano]

LGTM!

One last thing: what do you think about removing this mixin? Since this mixin exists in the Button component itself, it seems safe to remove it.

[Vrishabhsk]

Hi @t-hamano 👋, I have removed the redundant mixin. Thanks for pointing that out.