x/pkgsite: blue outline around search bar when using Safari

[emmanuelay]

What is the URL of the page with the issue?

https://pkg.go.dev

What is your user agent?

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15

Screenshot

What did you do?

1. Select the search box
2. The blue outline appears (on Safari, Mac OS)

What did you expect to see?

The blue outline around the search field is asymmetrical and superfluous.
It is usually removed using styles.

What did you see instead?

I saw the blue outline.

[julieqiu]

/cc @jamalc

[jamalc]

The default styles and behaviors of focus indicators are set by your browser and intended to make websites more accessible to keyboard only users and users with reduced vision. We may restyle them in the future but they are a WCAG requirement so we will not remove them.

[emmanuelay]

Im aware of the WCAG requirement.
But applying no style to the input at all makes the focus look asymmetrical and not thought trough.
Id say the search bar is a critical feature and that this needs attention. It's a relatively easy thing to solve.
Also, adding a focus style is very good idea.

If you have a look at:
https://pkg.go.dev/search?q=http

...and the style named:

.Header-searchFormInput

...you will see that it's been styled before in the very same project.

[jamalc]

The outline was removed from the search bar. As I see it this does not meet the focus visibility requirement and should not have happened. We'd like to take a holistic approach to styling the focus indicators site-wide. Please use #42698 for any additional input.