Skip to content

Instantly share code, notes, and snippets.

@everdimension
Created November 11, 2016 22:38
Show Gist options
  • Save everdimension/3405368e76ea8172b9183c53717baa38 to your computer and use it in GitHub Desktop.
Save everdimension/3405368e76ea8172b9183c53717baa38 to your computer and use it in GitHub Desktop.
A simple trick (subject to improvement) to hide outline until the user starts interacting with the site with the keyboard.
/* global document */
import { KEY_CODES } from './data/constants';
export default function initTabSpy() {
document.body.classList.add('isUsingPointer');
document.addEventListener('keydown', (evt) => {
if (evt.which === KEY_CODES.TAB) { // or may be any keydown?
document.body.classList.remove('isUsingPointer');
}
});
document.addEventListener('click', () => {
document.body.classList.add('isUsingPointer');
});
}
/* layout.css
.isUsingPointer button:focus,
.isUsingPointer input:focus,
.isUsingPointer textarea:focus,
.isUsingPointer a:focus {
outline: none;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment