gatsby: :focus not working in safari and firefox....

Trying to add some buttons to my site, this time using the navigate thing from reach router to create links on the same page, like so:

<JobButton
  tabindex="0"
  onClick={() => {navigate('#office-manager')}}
>
  Office Manager
</JobButton>

and the links on the same page are working fine. Then I tried to add a :focus style in the styled-component, like so:

const JobButton = styled.button`
  background: #aaa;
  border: 1px solid grey;
  border: none;
  padding: 0.5rem;
  margin: 0;

  :active {
    background: #333;
  }

  :focus {
    background: #333;
    color: white;
  }
`

…and it’s working fine in Chrome, but not in Safari or Firefox. I even added a tabindex, but that does not seem to have made it work either.

Does anybody have any idea as to why it might not working? Gatsby issue? React Router issue? Obviously a Safari and Firefox issue, but don’t know what to do…

Thanks!

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (4 by maintainers)

Most upvoted comments

this should help you in your use case this is the docs for styled-components if you scroll down a bit there is a section on styling a btn

https://www.styled-components.com/docs/basics#styling-any-component

ghost on Oct 19, 2019

Sounds doubtful to be a bug in Gatsby – do you have a repo somewhere to debug? That would really help to figure out what’s going on.

marcysutton on Oct 19, 2019

Hi there, are you on a new Mac? Because there are settings at the Operating System and browser level that have to be adjusted to allow focusing on some interactive controls.

Safari Preferences, under “Advanced” (see “Press tab to highlight each item on a page”): Safari prefs

OSX Preferences for Firefox, under Keyboard > Shortcuts (see “Full Keyboard access” > All controls): OSX keyboard prefs

I will also add that tabIndex alone is not enough to make something non-interactive into a custom button. I’d recommend using the <button> element for the stuff you get for free: focusability, the button role for assistive technologies, and keyboard events. https://marcysutton.github.io/gatsby-a11y-workshop/slides/38

marcysutton on Oct 18, 2019

hmm this is strange because everything looks fine in the code u sent up there ^^ do you get anything in inspect element via safari or firefox under the css section is there like a yellow exclamation point next to the :focus selector? if you hover over it it might say why its not working

ghost on Oct 18, 2019

Does the :active sudo-code work?

ghost on Oct 18, 2019