Outline styling of search button in the Search Block during a focus state is not applied #52615

Description

I want to add a focus state using the outline property to the search button block but it's not currently possible because of the search block's CSS use of overflow: hidden and how that CSS property works

I've been trying to add a focus state with CSS for the tabbable elements on a website and I am successful except when using
the search button block with the option that hides the input field until the user expands the input field (through clicking on the search button or pressing enter when keyboard focus is on the search button) This option in block markup is represented by "isSearchFieldHidden" attribute :true

Using the outline property as an indicator for focus tabbable elements is not uncommon as cited at https://www.sarasoueidan.com/blog/focus-indicators/ and in popular design systems like USDS

This issue is applicable to any theme using the search block

Video demonstrating the lack of outline along the search block(s) is below

When I disable the overflow: hidden property; the outline for the focus state appears, as demonstrated the video below.

As the HTML markup (with the button element as a child element, ) currently is, this is a
** CSS Issue and discussing how to solve this natively in CSS** is reported at w3c/csswg-drafts#3417 and w3c/csswg-drafts#4092

How to solve:
I'm not sure if there is a reasonable way ; one of the suggestions in the issues is to use padding on the child element (on the button element itself) but that introduces other cascading (pun intended) effects. I'm reporting to this for the record (in case anyone else comes across this issue) and to find out if there's a way that we can mitigate this. Theme modifiers may have to rely only on changing the background-color instead of using the outline property.

It is important to note that this issue exists even with the Chrome 114 with chrome's default styling.

,

Step-by-step reproduction instructions

To reproduce:
1 create a search block, configured with the button only .

1. added a couple buttons with links and plain links as well.

Example block markup:

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-only","buttonUseIcon":true,"isSearchFieldHidden":true} /-->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wordpress.test">links to a sample site</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-only","isSearchFieldHidden":true} /--></div>
<!-- /wp:group -->

Screenshots, screen recording, code snippet

No response

Environment info

This issue is applicable even if the focus state is used instead of focus-visible state and is reproducible across chrome and firefox and Gutenberg 16.1.2+

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes