diff --git a/sandbox/focus-visible.html.example b/sandbox/focus-visible.html.example new file mode 100644 index 0000000000..dbb6bfe3f4 --- /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 f72a595008..9ca6b3bcdf 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; +}