Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
emmanuelay opened this issue Nov 13, 2020 · 4 comments
Closed

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

emmanuelay opened this issue Nov 13, 2020 · 4 comments

Comments

@emmanuelay
Copy link

@emmanuelay emmanuelay commented Nov 13, 2020

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

Skärmavbild 2020-11-13 kl  15 28 57

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.

@gopherbot gopherbot added the pkgsite label Nov 13, 2020
@gopherbot gopherbot added this to the Unreleased milestone Nov 13, 2020
@emmanuelay emmanuelay changed the title x/pkgsite: x/pkgsite: Blue outline around search bar when using Safari Nov 13, 2020
@julieqiu julieqiu changed the title x/pkgsite: Blue outline around search bar when using Safari x/pkgsite: blue outline around search bar when using Safari Nov 13, 2020
@julieqiu julieqiu modified the milestones: Unreleased, pkgsite/frontend Nov 13, 2020
@julieqiu
Copy link
Contributor

@julieqiu julieqiu commented Nov 13, 2020

/cc @jamalc

@jamalc
Copy link
Member

@jamalc jamalc commented Nov 13, 2020

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.

@jamalc jamalc closed this Nov 13, 2020
@emmanuelay
Copy link
Author

@emmanuelay emmanuelay commented Nov 16, 2020

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
Copy link
Member

@jamalc jamalc commented Nov 18, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants