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.

Sign up for GitHub

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

SideNav's focus state is hard to see #1219

Closed
simurai opened this issue May 11, 2021 · 0 comments · Fixed by #1227
Closed

SideNav's focus state is hard to see #1219

simurai opened this issue May 11, 2021 · 0 comments · Fixed by #1227

Comments

@simurai
Copy link
Contributor

simurai commented May 11, 2021

Describe the bug

Focus state is hard to see in the SideNav component.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://primer.style/components/SideNav
  2. Click on the menu to focus
  3. Use tab key to change focus

Expected behavior
It should be easy to see which item has focus. The subtle change in background color might not be enough to draw attention.

Screenshots
Screen Shot 2021-05-11 at 18 02 40

Additional context
Primer CSS has a proposal to use the state-focus-shadow from Primitives to add that blue box-shadow instead of the subtle background color. See primer/css#1391.

image
stephenotalora added a commit to stephenotalora/components that referenced this issue May 14, 2021
@stephenotalora
SideNav: adding box-shadow under focus pseudo selector (primer#1219)
44bd734
@stephenotalora stephenotalora mentioned this issue May 14, 2021
Merged
6 tasks
stephenotalora added a commit to stephenotalora/components that referenced this issue May 14, 2021
@stephenotalora
changeset update for SideNav (primer#1219)
961c07e
colebemis added a commit that referenced this issue May 14, 2021
@colebemis
Merge pull request #1227 from stephenotalora/stephenotalora-sidenavfo…
11531a0 
…cus-1219

SideNav: adding box-shadow under focus pseudo selector (#1219)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

SideNav: adding box-shadow under focus pseudo selector (#1219) stephenotalora/components
1 participant
@simurai