From b8fe624f9e19d98704ec880ab2ef0984bd01d82b Mon Sep 17 00:00:00 2001 From: Grzegorz Blaszczyk Date: Thu, 25 Oct 2018 21:23:13 +0200 Subject: [PATCH] fix: add support for :focus-visible selector (#5483) Add support for focus-visible so that mouse-users don't need to see focus outlines but keyboard and Screen Reader users still do. It includes both the standard selector and the selector intended to work with the polyfill: https://github.com/WICG/focus-visible. The polyfill is *not* included in Video.js and must be included on the page separately. Fixes #5474. --- sandbox/focus-visible.html.example | 41 ++++++++++++++++++++++++++++++ src/css/video-js.scss | 9 +++++++ 2 files changed, 50 insertions(+) create mode 100644 sandbox/focus-visible.html.example diff --git a/sandbox/focus-visible.html.example b/sandbox/focus-visible.html.example new file mode 100644 index 000000000..dbb6bfe3f --- /dev/null +++ b/sandbox/focus-visible.html.example @@ -0,0 +1,41 @@ + + + + + Video.js Sandbox + + + + + + + + + + +
+

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.

+ 
npm start will automatically copy these files over from .example if they don't already exist.
+ 
open http://localhost:9999/sandbox/focus-visible.html
+
+ + +

This demo shows how to implement polyfill for the :focus-visible selector. You can read more about the polyfill here.

+ + + + diff --git a/src/css/video-js.scss b/src/css/video-js.scss index f72a59500..9ca6b3bcd 100644 --- a/src/css/video-js.scss +++ b/src/css/video-js.scss @@ -52,3 +52,12 @@ border: none; z-index: -1000; } + +// The rule is needed for :focus-visible polyfill +.js-focus-visible .video-js *:focus:not(.focus-visible) { + outline: none; +} + +.video-js *:focus:not(:focus-visible) { + outline: none; +}