Skip to content

Instantly share code, notes, and snippets.

@victornpb

victornpb/remove-outline-focus-ring.js

Last active February 6, 2020 00:32
Show Gist options
  • Save victornpb/0aa4aba6e15a2f156a53a7ba995a432e to your computer and use it in GitHub Desktop.
Save victornpb/0aa4aba6e15a2f156a53a7ba995a432e to your computer and use it in GitHub Desktop.
Download ZIP
Remove the focus outline ring when using mouse but keep it for keyboard users for a11y
Raw
remove-outline-focus-ring.js
/**
* Hide the uggly focus outline ring on UI elements for users using mouse
* as input device, but enable it as soon as the keyboard is being used.
* This is important for keyboard and a11y purposes.
* @author https://gist.github.com/victornpb/0aa4aba6e15a2f156a53a7ba995a432e
*/
(function () {
document.head.appendChild(document.createElement("style")).innerHTML =
"body.hide-focus-ring *:focus { outline: none !important; }";
var focusRing = true;
document.addEventListener("mousedown", function focusRingHandler() {
if (focusRing) document.body.classList.add("hide-focus-ring");
focusRing = false;
});
document.addEventListener("keydown", function focusRingHandler() {
if (!focusRing) document.body.classList.remove("hide-focus-ring");
focusRing = true;
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment