Small tweaks to focus

2 files changed, 62 insertions, 90 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f2786a84..4af5ffa4 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -3969,18 +3969,11 @@
                 var play = player.togglePlay();
 
                 // Determine which buttons
-                var trigger = player.elements.buttons[play ? 'play' : 'pause'];
                 var target = player.elements.buttons[play ? 'pause' : 'play'];
 
                 // Transfer focus
-                if (target && trigger) {
-                    if (utils.hasClass(trigger, player.config.classNames.tabFocus)) {
-                        setTimeout(function() {
-                            target.focus();
-                            utils.toggleClass(trigger, player.config.classNames.tabFocus, false);
-                            utils.toggleClass(target, player.config.classNames.tabFocus, true);
-                        }, 0);
-                    }
+                if (target) {
+                    target.focus();
                 }
             }
 
@@ -3989,19 +3982,6 @@
                 return event.keyCode ? event.keyCode : event.which;
             }
 
-            // Detect tab focus
-            function checkTabFocus(focused) {
-                utils.toggleClass(
-                    getElements('.' + player.config.classNames.tabFocus),
-                    player.config.classNames.tabFocus,
-                    false
-                );
-
-                if (player.elements.container.contains(focused)) {
-                    utils.toggleClass(focused, player.config.classNames.tabFocus, true);
-                }
-            }
-
             // Keyboard shortcuts
             if (player.config.keyboard.focused) {
                 var last = null;
@@ -4193,32 +4173,25 @@
                 }
             }
 
-            // Focus/tab management
-            utils.on(window, 'keyup', function(event) {
-                var code = getKeyCode(event);
-                var focused = utils.getFocusElement();
+            // Detect tab focus
+            // Remove class on blur/focusout
+            utils.on(player.elements.container, 'focusout', function(event) {
+                utils.toggleClass(event.target, player.config.classNames.tabFocus, false);
+            });
 
-                if (code === 9) {
-                    checkTabFocus(focused);
+            // Add classname to tabbed elements
+            utils.on(player.elements.container, 'keydown', function(event) {
+                if (event.keyCode !== 9) {
+                    return;
                 }
-            });
 
-            utils.on(document.body, 'click', function() {
-                utils.toggleClass(
-                    getElement('.' + player.config.classNames.tabFocus),
-                    player.config.classNames.tabFocus,
-                    false
-                );
+                // Delay the adding of classname until the focus has changed
+                // This event fires before the focusin event
+                window.setTimeout(function () {
+                    utils.toggleClass(utils.getFocusElement(), player.config.classNames.tabFocus, true);
+                }, 0);
             });
 
-            for (var button in player.elements.buttons) {
-                utils.on(player.elements.buttons[button], 'blur', onBlur);
-            }
-
-            function onBlur(event) {
-                utils.toggleClass(event.target, player.config.classNames.tabFocus, false);
-            }
-
             // Trigger custom and default handlers
             var handlerProxy = function(event, customHandler, defaultHandler) {
                 if (utils.is.function(customHandler)) {
@@ -4367,7 +4340,6 @@
                     function(event) {
                         player.toggleControls(event);
                     },
-                    true,
                     true
                 );
             }
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 01fbc7e7..047c6867 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -16,7 +16,7 @@
 @keyframes plyr-popup {
     from {
         transform: translateY(10px);
-        opacity: .5;
+        opacity: 0.5;
     }
     to {
         transform: translateY(0);
@@ -35,7 +35,7 @@
     font-weight: @plyr-font-weight-normal;
     direction: ltr;
 
-    & when (@plyr-border-box = true) {
+    & when(@plyr-border-box = true) {
         // border-box everything
         // http://paulirish.com/2012/box-sizing-border-box-ftw/
         &,
@@ -46,7 +46,7 @@
         }
     }
 
-    & when (@plyr-touch-action = true) {
+    & when(@plyr-touch-action = true) {
         // Fix 300ms delay
         a,
         button,
@@ -57,7 +57,7 @@
     }
 
     // ARIA
-    [aria-hidden='true'] {
+    [aria-hidden="true"] {
         display: none;
     }
 
@@ -77,7 +77,7 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type='range'] {
+    input[type="range"] {
         display: block;
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
@@ -137,7 +137,7 @@
         &::-moz-focus-outer {
             border: 0;
         }
-        &.tab-focus:focus {
+        &.tab-focus {
             outline-offset: 3px;
         }
 
@@ -157,12 +157,12 @@
 }
 
 // Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
+.plyr--video input[type="range"].tab-focus {
     outline: 1px dotted fade(@plyr-video-control-color, 50%);
 }
 
 // Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
+.plyr--audio input[type="range"].tab-focus {
     outline: 1px dotted fade(@plyr-audio-control-color, 50%);
 }
 
@@ -172,14 +172,14 @@
     overflow: hidden;
 
     // !important is not always needed
-    & when (@plyr-sr-only-important = true) {
+    & when(@plyr-sr-only-important = true) {
         position: absolute !important;
         padding: 0 !important;
         border: 0 !important;
         height: 1px !important;
         width: 1px !important;
     }
-    & when (@plyr-sr-only-important = false) {
+    & when(@plyr-sr-only-important = false) {
         position: absolute;
         padding: 0;
         border: 0;
@@ -239,14 +239,14 @@
     width: 100%;
     padding: @plyr-control-spacing;
     transform: translateY(-(@plyr-control-spacing * 4));
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-small;
     text-align: center;
 
     span {
         border-radius: 2px;
-        padding: .2em .5em;
+        padding: 0.2em 0.5em;
         background: @plyr-captions-bg;
         box-decoration-break: clone;
         line-height: 170%;
@@ -345,7 +345,7 @@
     background: transparent;
     border-radius: 3px;
     cursor: pointer;
-    transition: background .3s ease, color .3s ease, opacity .3s ease;
+    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
     color: inherit;
 
     svg {
@@ -382,13 +382,13 @@
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
-    transition: opacity .3s ease;
+    transition: opacity 0.3s ease;
 
     .plyr__control {
         // Hover and tab focus
-        &.tab-focus:focus,
+        &.tab-focus,
         &:hover,
-        &[aria-expanded='true'] {
+        &[aria-expanded="true"] {
             background: @plyr-video-control-bg-hover;
             color: @plyr-video-control-color-hover;
         }
@@ -405,9 +405,9 @@
 
     .plyr__control {
         // Hover and tab focus
-        &.tab-focus:focus,
+        &.tab-focus,
         &:hover,
-        &[aria-expanded='true'] {
+        &[aria-expanded="true"] {
             background: @plyr-audio-control-bg-hover;
             color: @plyr-audio-control-color-hover;
         }
@@ -428,7 +428,7 @@
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     svg {
         position: relative;
@@ -461,11 +461,11 @@
 }
 
 // States
-.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr='play'] {
+.plyr__controls [data-plyr="pause"],
+.plyr--playing .plyr__controls [data-plyr="play"] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr='pause'] {
+.plyr--playing .plyr__controls [data-plyr="pause"] {
     display: inline-block;
 }
 
@@ -481,16 +481,16 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'],
-.plyr [data-plyr='pip'],
-.plyr [data-plyr='airplay'] {
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"],
+.plyr [data-plyr="pip"],
+.plyr [data-plyr="airplay"] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'],
-.plyr--pip-enabled [data-plyr='pip'],
-.plyr--airplay-enabled [data-plyr='airplay'] {
+.plyr--captions-enabled [data-plyr="captions"],
+.plyr--fullscreen-enabled [data-plyr="fullscreen"],
+.plyr--pip-enabled [data-plyr="pip"],
+.plyr--airplay-enabled [data-plyr="airplay"] {
     display: inline-block;
 }
 
@@ -501,9 +501,9 @@
 
     // Hide tooltip
     .plyr__control svg {
-        transition: transform .3s ease;
+        transition: transform 0.3s ease;
     }
-    .plyr__control[aria-expanded='true'] {
+    .plyr__control[aria-expanded="true"] {
         svg {
             transform: rotate(45deg);
         }
@@ -519,7 +519,7 @@
         bottom: 100%;
         right: -3px;
         margin-bottom: 10px;
-        animation: plyr-popup .2s ease;
+        animation: plyr-popup 0.2s ease;
 
         background: @plyr-menu-bg;
         border-radius: 4px;
@@ -531,7 +531,7 @@
 
         > div {
             overflow: hidden;
-            transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
+            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         // Arrow
@@ -662,13 +662,13 @@
     font-weight: 500;
     line-height: 1.3;
 
-    transform: translate(-50%, 10px) scale(.8);
+    transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
 
     &::before {
         // Arrows
-        content: '';
+        content: "";
         position: absolute;
         width: 0;
         height: 0;
@@ -684,7 +684,7 @@
     }
 }
 .plyr .plyr__control:hover .plyr__tooltip,
-.plyr .plyr__control.tab-focus:focus .plyr__tooltip,
+.plyr .plyr__control.tab-focus .plyr__tooltip,
 .plyr__tooltip--visible {
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
@@ -697,7 +697,7 @@
 .plyr__controls > .plyr__control:first-child .plyr__tooltip,
 .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
     left: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 0 100%;
 
     &::before {
@@ -708,7 +708,7 @@
 // Last tooltip
 .plyr__controls > .plyr__control:last-child .plyr__tooltip {
     right: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;
 
     &::before {
@@ -722,7 +722,7 @@
 .plyr__controls > .plyr__control:first-child + .plyr__control,
 .plyr__controls > .plyr__control:last-child {
     &:hover .plyr__tooltip,
-    &.tab-focus:focus .plyr__tooltip,
+    &.tab-focus .plyr__tooltip,
     .plyr__tooltip--visible {
         transform: translate(0, 0) scale(1);
     }
@@ -826,13 +826,13 @@
 }
 .plyr__progress--buffer {
     &::-webkit-progress-value {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-moz-progress-bar {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-ms-fill {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
 }
 .plyr--video .plyr__progress--buffer,
@@ -892,7 +892,7 @@
 
     // Add a slash in before
     &::before {
-        content: '\2044';
+        content: "\2044";
         margin-right: @plyr-control-spacing;
     }
 }
@@ -926,7 +926,7 @@
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
 .plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios [data-plyr="mute"] {
     display: none !important;
 }