CSS focus outline not removed with focus-visible polyfill

[aquaductape]

I'm using a focus-visible polyfill, that way mouse events on clickable elements such as button won't trigger the focus outline.

On nextjs, focus-visible successfully loads, because it's class and data attribute is added to the html tag, but the focus outline still appears when clicking on button elements.

focus-visible is loaded by _app.js page

import "focus-visible";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Tried loading focus-visible inside _document.js page, didn't make a difference.

The css used by both demos.

// removes outline when clicking
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

button {
  display: block;
  cursor: pointer;
  border: none;
  background: #ccc;
  margin: 10px 0;
}

// displays when focusing with keyboard
button.focus-visible {
  color: red;
}

Demo: focus-visible removes outline on create-react-app

Demo: focus-visible fails to remove outline on nextjs

[aquaductape]

I was able to find the solution.

The issue wasn't with NextJS but styled-jsx component.

The solution was using the one-off global selector.

For some reason using the Global style fails, but using the one-off global selector works.

Global style fails

<style jsx global>{`
  .js-focus-visible :focus:not(.focus-visible) {
    outline: none;
  }
`}</style>

But One-off global selector works

<style jsx>{`
  :global(.js-focus-visible) :focus:not(.focus-visible) {
    outline: none;
  }
`}</style>

[ysun62]

Hey there, came across this discussion and I'm just curious why you wanted to remove outline? No offence but I thought it was a bad practice because of accessibility, right?

[aquaductape]

The outline visual will still appear on navigation through keyboard, such as tabbing.

More information on what focus-visible is about

[ysun62]

Learned something new, thanks!