Search box active and focus styles

[adamwoodnz]

The focus, active, and focus+active states for the search box is missing.

Focus:

Focus + active, note that this also causes a layout shift:

Originally posted by @adamwoodnz in https://github.com/WordPress/wporg-developer/issues/342#issuecomment-1819790374

[ryelle]

Is this an issue just on specific pages or browsers? I see the focus state just fine when using search here https://developer.wordpress.org/plugins/, for example.

The state is set on focus-visible (which should be true for these cases), but that does mean if you're testing with dev tools, toggling :focus won't work.

I do see the layout shift on click, so that's an issue regardless.

[adamwoodnz]

I'm not sure how @jasmussen discovered it, so I'm not sure about behaviour for a typical user, but I can repro by long tapping with my trackpad:

And in devtools with active + focus:

[ryelle]

I must always just test with my keyboard, because you're right, clicking the button doesn't add the outline. Well, switching back to :focus for the button should fix that.