Fix blue ring on shortcutsToggle and update shortcut used to enable/d…

…isable
jwplayer · Nov 15, 2019 · 019c381 · 019c381
1 parent 830efe7
commit 019c381
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/css/controls/imports/switch.less b/src/css/controls/imports/switch.less
@@ -13,6 +13,10 @@
         font-size: inherit;
         vertical-align: middle;
 
+        &.jw-tab-focus {
+            outline: @ui-focus;
+        }
+
         .jw-switch-knob {
             position: absolute;
             top: 2px;

diff --git a/src/js/view/controls/controls.js b/src/js/view/controls/controls.js
@@ -317,7 +317,7 @@ export default class Controls extends Events {
                     break;
                 case 13: // enter
                 case 32: // space
-                    if (document.activeElement.classList.contains('jw-switch') && evt.keyCode === 32) {
+                    if (document.activeElement.classList.contains('jw-switch') && evt.keyCode === 13) {
                         // Let event bubble up so the spacebar can control the toggle if focused on
                         return true;
                     }
@@ -382,13 +382,20 @@ export default class Controls extends Events {
         this.playerContainer.addEventListener('keydown', handleKeydown);
         this.keydownCallback = handleKeydown;
 
-        // keep controls active when navigating inside the player
         const handleKeyup = (evt) => {
-            const isTab = evt.keyCode === 9;
-            if (isTab) {
-                const insideContainer = this.playerContainer.contains(evt.target);
-                const activeTimeout = insideContainer ? 0 : ACTIVE_TIMEOUT;
-                this.userActive(activeTimeout);
+            switch (evt.keyCode) {
+                case 9: {
+                    // tab, keep controls active when navigating inside the player
+                    const insideContainer = this.playerContainer.contains(evt.target);
+                    const activeTimeout = insideContainer ? 0 : ACTIVE_TIMEOUT;
+                    this.userActive(activeTimeout);
+                    break;
+                }
+                case 32: // space
+                    evt.preventDefault();
+                    break;
+                default:
+                    break;
             }
         };
         this.playerContainer.addEventListener('keyup', handleKeyup);

diff --git a/src/js/view/controls/shortcuts-tooltip.js b/src/js/view/controls/shortcuts-tooltip.js
@@ -1,5 +1,6 @@
 import shortcutTooltipTemplate from 'view/controls/templates/shortcuts-tooltip';
 import { createElement, removeClass, addClass, prependChild } from 'utils/dom';
+import UI from 'utils/ui';
 import button from 'view/controls/components/button';
 import { cloneIcon } from 'view/controls/icons';
 import { STATE_PLAYING } from 'events/events';
@@ -67,11 +68,11 @@ export default function (container, api, model) {
         shortcutTooltipTemplate(getShortcuts(shortcuts), shortcuts.keyboardShortcuts)
     );
     const settingsInteraction = { reason: 'settingsInteraction' };
-    const shortcutToggle = template.querySelector('.jw-switch');
+    const shortcutToggleUi = new UI(template.querySelector('.jw-switch'));
 
     const open = () => {
-        shortcutToggle.setAttribute('aria-checked', model.get('enableShortcuts'));
-        shortcutToggle.addEventListener('click', toggleClickHandler);
+        shortcutToggleUi.el.setAttribute('aria-checked', model.get('enableShortcuts'));
+        shortcutToggleUi.on('click tap enter', toggleClickHandler);
 
         addClass(template, 'jw-open');
         lastState = model.get('state');
@@ -81,7 +82,7 @@ export default function (container, api, model) {
         api.pause(settingsInteraction);
     };
     const close = () => {
-        shortcutToggle.removeEventListener('click', toggleClickHandler);
+        shortcutToggleUi.off('click tap enter', toggleClickHandler);
         removeClass(template, 'jw-open');
         document.removeEventListener('click', documentClickHandler);
         container.focus();
@@ -109,9 +110,7 @@ export default function (container, api, model) {
         }
     };
     const render = () => {
-        const closeButton = button('jw-shortcuts-close', () => {
-            close();
-        }, model.get('localization').close, [cloneIcon('close')]);
+        const closeButton = button('jw-shortcuts-close', close, model.get('localization').close, [cloneIcon('close')]);
 
         //  Append close button to modal.
         prependChild(template, closeButton.element());