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

Jump to bottom

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
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite
Milestone
pkgsite/frontend

Comments

@emmanuelay
Copy link

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 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 added the NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. label Nov 13, 2020
@julieqiu julieqiu modified the milestones: Unreleased, pkgsite/frontend Nov 13, 2020
@julieqiu
Copy link
Member

/cc @jamalc

@jamalc
Copy link

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 as completed Nov 13, 2020
@emmanuelay
Copy link
Author

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 jamalc mentioned this issue Nov 18, 2020
Closed
@jamalc
Copy link

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.

@golang golang locked and limited conversation to collaborators Nov 18, 2021
@hyangah hyangah added the pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development label May 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
FrozenDueToAge NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. pkgsite/frontend Issues related to pkgsite HTML/CSS/JavaScript and frontend development pkgsite
Projects
None yet
Milestone
pkgsite/frontend
Development

No branches or pull requests
5 participants
@emmanuelay @hyangah @julieqiu @gopherbot @jamalc