Fix: Restore visible focus state to the button-inside search field - #141

Description

Closes #140

Restores a visible keyboard focus state on the Search block when configured with the button inside the field.

Why?

When the Search block uses the button-inside layout, WordPress Core removes the default input outline (:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus { outline: none; }) without supplying a replacement focus state on the container. As a result, keyboard users navigating into the input field see no visible focus indicator, failing WCAG 2.4.7 (Focus Visible).

How?

• theme.json:
  • Added native focus ring styles to .wp-block-search__inside-wrapper when the child input receives focus (:has(.wp-block-search__input:focus)).
  • Uses outline: -webkit-focus-ring-color auto 1px (and standard AccentColor fallback) with 0 offset, matching the native browser focus indicator displayed on all other form fields throughout the theme without creating double outlines when tabbing onto the search button

Screencast

Before

After

Testing Instructions

1. Navigate to a page featuring a button-inside search block (e.g., search results at /?s=hello or the overlay menu).
2. Press Tab to navigate keyboard focus into the search input field.
3. Verify that the search container displays a visible, native focus ring.
4. Press Tab again to move focus onto the search button.
5. Verify that the outer container focus ring turns off and the button displays its own button focus state without double or nested focus rings.

Use of AI Tools

AI assistance: Yes
Tool(s): Antigravity
Model(s): Gemini
Used for: Reviewing the existing implementation and suggesting the changes. Final decisions and edits were made by me.