├── outline.gif ├── package.json ├── LICENSE ├── focus-outline-manager.js └── README.md /outline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladimirsiljkovic/focus-outline-manager/HEAD/outline.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "focus-outline-manager", 3 | "version": "1.0.2", 4 | "description": "Watch users keyboard input and manage the focus outline visibility", 5 | "main": "focus-outline-manager.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/vladimirsiljkovic/focus-outline-manager.git" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "keywords": [ 14 | "focus", 15 | "outline" 16 | ], 17 | "author": "Vladimirs", 18 | "license": "BSD-3-Clause" 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2015 The Chromium Authors, Vladimirs. All rights reserved. 2 | 3 | Redistribution and use in source and binary forms, with or without 4 | modification, are permitted provided that the following conditions are 5 | met: 6 | 7 | * Redistributions of source code must retain the above copyright 8 | notice, this list of conditions and the following disclaimer. 9 | * Redistributions in binary form must reproduce the above 10 | copyright notice, this list of conditions and the following disclaimer 11 | in the documentation and/or other materials provided with the 12 | distribution. 13 | * Neither the name of Google Inc. nor the names of its 14 | contributors may be used to endorse or promote products derived from 15 | this software without specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 18 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 19 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 20 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 21 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 22 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 23 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 24 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 25 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /focus-outline-manager.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2012 The Chromium Authors, Vladimirs. All rights reserved. 2 | // Use of this source code is governed by a BSD-style license that can be 3 | // found in the LICENSE file. 4 | 5 | /** 6 | * focus-outline-manager 7 | * 8 | * Watch users keyboard input and manage the focus outline visibility 9 | */ 10 | 11 | /** 12 | * The class name to set on the document element. 13 | * @const 14 | */ 15 | var CLASS_NAME = 'focus-outline-hidden'; 16 | 17 | /** 18 | * This class sets a CSS class name on the HTML element when a user presses the 19 | * tab key. It removes the class name when the user clicks anywhere. 20 | * 21 | * This allows you to write CSS like this: 22 | * 23 | * html.focus-outline-hidden *:focus { 24 | * outline: none; 25 | * } 26 | * 27 | * And the outline will only be shown if the user uses the keyboard to get to it. 28 | * 29 | * @constructor 30 | */ 31 | function FocusOutlineManager () { 32 | var that = this; 33 | 34 | document.addEventListener('keydown', function (e) { 35 | that.focusByKeyboard = true; 36 | }, true); 37 | 38 | document.addEventListener('mousedown', function (e) { 39 | that.focusByKeyboard = false; 40 | }, true); 41 | 42 | document.addEventListener('focus', function (event) { 43 | // Update visibility only when focus is actually changed. 44 | that.updateVisibility(); 45 | }, true); 46 | 47 | document.addEventListener('focusout', function (event) { 48 | window.setTimeout(function () { 49 | if (!document.hasFocus()) { 50 | that.focusByKeyboard = true; 51 | that.updateVisibility(); 52 | } 53 | }, 0); 54 | }); 55 | 56 | this.updateVisibility(); 57 | } 58 | 59 | FocusOutlineManager.prototype = { 60 | /** 61 | * Whether focus change is triggered by TAB key. 62 | * @type {boolean} 63 | * @private 64 | */ 65 | focusByKeyboard: true, 66 | 67 | updateVisibility: function () { 68 | this.hidden = !this.focusByKeyboard; 69 | }, 70 | 71 | /** 72 | * Whether the focus outline should be hidden. 73 | * @type {boolean} 74 | */ 75 | set hidden(hidden) { 76 | document.documentElement.classList.toggle(CLASS_NAME, hidden); 77 | }, 78 | 79 | get hidden() { 80 | return document.documentElement.classList.contains(CLASS_NAME); 81 | } 82 | }; 83 | 84 | new FocusOutlineManager(); 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # focus-outline-manager 2 | 3 | > Watch users keyboard input and manage the focus outline visibility 4 | 5 | [![NPM version](https://badge.fury.io/js/focus-outline-manager.svg)](https://www.npmjs.com/package/focus-outline-manager) 6 | 7 | > **NOTICE:** This library is no longer needed in most cases. Modern browsers added this behavior by default for most focusable elements, except for text `` and `