Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

1 files changed, 31 insertions, 0 deletions

diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js
new file mode 100644
index 00000000..c1602cf0
--- /dev/null
+++ b/demo/src/js/tab-focus.js
@@ -0,0 +1,31 @@
+// Setup tab focus
+const container = document.getElementById('container');
+const tabClassName = 'tab-focus';
+
+// Remove class on blur
+document.addEventListener('focusout', event => {
+    if (!event.target.classList || container.contains(event.target)) {
+        return;
+    }
+
+    event.target.classList.remove(tabClassName);
+});
+
+// Add classname to tabbed elements
+document.addEventListener('keydown', event => {
+    if (event.keyCode !== 9) {
+        return;
+    }
+
+    // Delay the adding of classname until the focus has changed
+    // This event fires before the focusin event
+    setTimeout(() => {
+        const focused = document.activeElement;
+
+        if (!focused || !focused.classList || container.contains(focused)) {
+            return;
+        }
+
+        focused.classList.add(tabClassName);
+    }, 10);
+});