From f01940bd8bd1157800682b02701380a48bb2d901 Mon Sep 17 00:00:00 2001 From: Rob Dodson Date: Wed, 16 Aug 2017 16:33:40 -0700 Subject: [PATCH] Rename class to .js-focus-ring and update readme --- README.md | 12 +++++++----- src/focus-ring.js | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4071f01..157818e 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ by selecting for the case when the polyfill is loaded and `.focus-ring` is _not_ applied to the element: ```html -.focus-ring-enabled :focus:not(.focus-ring) { +.js-focus-ring :focus:not(.focus-ring) { outline-width: 0; } ``` @@ -124,8 +124,9 @@ having both would provide more flexibility for authors. The heuristic used to decide the current modality should not be defined normatively. An example heuristic is to update modality on each style recalc: -if the most recent user interaction was via the keyboard; and less than 100ms -has elapsed since the last input event; then the modality is keyboard. Otherwise, +if the most recent user interaction was via the keyboard; +and the key pressed was either `Tab` or `Shift + Tab`; +then the modality is keyboard. Otherwise, the modality is not keyboard. ## Implementation Prototype @@ -135,7 +136,7 @@ The tiny provides a prototype intended to achieve the goals we are proposing with technology that exists today in order for developers to be able to try it out, understand it and provide feedback. -It simply sets a `.focus-ring-enabled` class to the body element +It sets a `.js-focus-ring` class on the body element to provide a way to disable focus styles only when the polyfill is loaded. It also sets a `.focus-ring` class on the active element if the script determines that the keyboard is being used. @@ -150,7 +151,8 @@ rather than to provide a high-fidelity polyfill. ### How it works The script uses two heuristics to determine whether the keyboard is being used: -- a `focus` event immediately following a `keydown` event +- a `focus` event immediately following a `keydown` event where the key pressed was either `Tab` +or `Shift + Tab`. - focus moves into an element which requires keyboard interaction, such as a text field - _TODO: ideally, we also trigger keyboard modality diff --git a/src/focus-ring.js b/src/focus-ring.js index ec86576..5e7e19f 100644 --- a/src/focus-ring.js +++ b/src/focus-ring.js @@ -143,7 +143,7 @@ function init() { window.addEventListener('focus', onWindowFocus, true); window.addEventListener('blur', onWindowBlur, true); - document.body.classList.add('focus-ring-enabled'); + document.body.classList.add('js-focus-ring'); } /**