Search input focus outline doesn't include submit button

[maxdeviant]

Had someone point out to me that the focus outline for the search input is a bit wonky:

It would be nice if we could get the focus outline to encompass the submit button and be rounded on both sides.

Prior Art

It looks like crates.io solves this, so we can use them as a reference:

Unfocused

Focused

[hayleigh-dot-dev]

Just adding some context to this issue.

Screen.Recording.2023-10-21.at.12.15.14.mov

Currently we don't style focus at all (aka this is the native browser focus indicator). Although this looks a bit clunky, it's important that we visually signify the button as a separate focusable and interactive element.

If you look at crates.io they have no focus indicator for the button:

• Focus the search input
• Type whatever
• Press tab, now the button is focused but there is no change to the visual focus styles.

This is actually an accessibility failure!

---

I agree it would be nice if we styled focus indicators ourselves, but I leave this comment as a note for anyone interested in taking up this issue: it's important the submit button has its own distinct focus indicator too.