Improve the new tab focus style for Windows High Contrast Mode

[afercia]

Description

Follow-up to #46276

Thew new tab focus style moves the box-shadow from the button to a pseudo element so that it's displayed inside the button. So dar so food! It's also similar to the focus style used in the W3C tabs example so it's a well established pattern.

However, the transparent outline used to support Windows High Contrast Mode is still applied on the tab button. In some cases, for example in the settings sidebar, this makes the transparent outline cut-off because some ancestor element uses overflow: auto. In the screenshot below, I made the transparent outline red, to illustrate the problem:

I'd suggest to move the transparent outline to the inner pseudo element, together with the new box-shadow. Worth reminding in Windows High Contrast Mode the CSS box-shadows aren't visible. The outline is.

/Cc @jasmussen

Step-by-step reproduction instructions

• Use Windows and enable High Contrast Mode .
• Alternatively, alter the CSS to make the buttons transparent outline red.
• Edit a post and use the keyboard to navigate to the settings sidebar tabs.
• Observe the outline is cut-off.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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