focus-outline-manager
Version:
Watch users keyboard input and manage the focus outline visibility
85 lines (71 loc) • 2.1 kB
JavaScript
// Copyright (c) 2012 The Chromium Authors, Vladimirs. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* focus-outline-manager
*
* Watch users keyboard input and manage the focus outline visibility
*/
/**
* The class name to set on the document element.
* @const
*/
var CLASS_NAME = 'focus-outline-hidden';
/**
* This class sets a CSS class name on the HTML element when a user presses the
* tab key. It removes the class name when the user clicks anywhere.
*
* This allows you to write CSS like this:
*
* html.focus-outline-hidden *:focus {
* outline: none;
* }
*
* And the outline will only be shown if the user uses the keyboard to get to it.
*
* @constructor
*/
function FocusOutlineManager () {
var that = this;
document.addEventListener('keydown', function (e) {
that.focusByKeyboard = true;
}, true);
document.addEventListener('mousedown', function (e) {
that.focusByKeyboard = false;
}, true);
document.addEventListener('focus', function (event) {
// Update visibility only when focus is actually changed.
that.updateVisibility();
}, true);
document.addEventListener('focusout', function (event) {
window.setTimeout(function () {
if (!document.hasFocus()) {
that.focusByKeyboard = true;
that.updateVisibility();
}
}, 0);
});
this.updateVisibility();
}
FocusOutlineManager.prototype = {
/**
* Whether focus change is triggered by TAB key.
* @type {boolean}
* @private
*/
focusByKeyboard: true,
updateVisibility: function () {
this.hidden = !this.focusByKeyboard;
},
/**
* Whether the focus outline should be hidden.
* @type {boolean}
*/
set hidden(hidden) {
document.documentElement.classList.toggle(CLASS_NAME, hidden);
},
get hidden() {
return document.documentElement.classList.contains(CLASS_NAME);
}
};
new FocusOutlineManager();