Skip to content

Instantly share code, notes, and snippets.

@arielsalminen

arielsalminen/outline.css

Last active June 24, 2019 09:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arielsalminen/6fe155e944bc4dd2ffcddb9355224d73 to your computer and use it in GitHub Desktop.
Save arielsalminen/6fe155e944bc4dd2ffcddb9355224d73 to your computer and use it in GitHub Desktop.
Download ZIP
Hide browser’s default focus outline when using mouse to click around, but show them when the user is using keyboard to browse the webpage.
Raw
outline.css
body:not(.user-is-tabbing) *:focus {
outline: none;
}
Raw
outline.js
// Handle first tab to set “user-is-tabbing” class for <body>
function handleFirstTab(e) {
if (e.keyCode === 9) {
document.body.classList.add("user-is-tabbing")
window.removeEventListener("keydown", handleFirstTab)
window.addEventListener("mousedown", handleMouseDownOnce)
}
}
// Handle the user switching back to using mouse
function handleMouseDownOnce() {
document.body.classList.remove("user-is-tabbing")
window.removeEventListener("mousedown", handleMouseDownOnce)
window.addEventListener("keydown", handleFirstTab)
}
// Listen for keydown events on load
window.addEventListener("keydown", handleFirstTab)
@arielsalminen
Copy link
Author

This will hide browser’s default focus outline when using mouse to click around, but show them when the user is using keyboard to browse the webpage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment