fix(a11y): leverage native :focus-visible in CSS

src/js/config/defaults.js

@@ -379,7 +379,6 @@ const defaults = {
       supported: 'plyr--airplay-supported',
       active: 'plyr--airplay-active',
     },
-    tabFocus: 'plyr__tab-focus',
     previewThumbnails: {
       // Tooltip thumbs
       thumbContainer: 'plyr__preview-thumb',

src/js/controls.js

@@ -1106,7 +1106,7 @@ const controls = {
   },
 
   // Focus the first menu item in a given (or visible) menu
-  focusFirstMenuItem(pane, tabFocus = false) {
+  focusFirstMenuItem(pane, focusVisible = false) {
     if (this.elements.settings.popup.hidden) {
       return;
     }
@@ -1119,7 +1119,7 @@ const controls = {
 
     const firstItem = target.querySelector('[role^="menuitem"]');
 
-    setFocus.call(this, firstItem, tabFocus);
+    setFocus.call(this, firstItem, focusVisible);
   },
 
   // Show/hide menu
@@ -1196,7 +1196,7 @@ const controls = {
   },
 
   // Show a panel in the menu
-  showMenuPanel(type = '', tabFocus = false) {
+  showMenuPanel(type = '', focusVisible = false) {
     const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
 
     // Nothing to show, bail
@@ -1247,7 +1247,7 @@ const controls = {
     toggleHidden(target, false);
 
     // Focus the first item
-    controls.focusFirstMenuItem.call(this, target, tabFocus);
+    controls.focusFirstMenuItem.call(this, target, focusVisible);
   },
 
   // Set the download URL

src/js/listeners.js

@@ -21,7 +21,6 @@ class Listeners {
 
     this.handleKey = this.handleKey.bind(this);
     this.toggleMenu = this.toggleMenu.bind(this);
-    this.setTabFocus = this.setTabFocus.bind(this);
     this.firstTouch = this.firstTouch.bind(this);
   }
 
@@ -194,57 +193,6 @@ class Listeners {
     toggleClass(elements.container, player.config.classNames.isTouch, true);
   };
 
-  setTabFocus = (event) => {
-    const { player } = this;
-    const { elements } = player;
-    const { key, type, timeStamp } = event;
-
-    clearTimeout(this.focusTimer);
-
-    // Ignore any key other than tab
-    if (type === 'keydown' && key !== 'Tab') {
-      return;
-    }
-
-    // Store reference to event timeStamp
-    if (type === 'keydown') {
-      this.lastKeyDown = timeStamp;
-    }
-
-    // Remove current classes
-    const removeCurrent = () => {
-      const className = player.config.classNames.tabFocus;
-      const current = getElements.call(player, `.${className}`);
-      toggleClass(current, className, false);
-    };
-
-    // Determine if a key was pressed to trigger this event
-    const wasKeyDown = timeStamp - this.lastKeyDown <= 20;
-
-    // Ignore focus events if a key was pressed prior
-    if (type === 'focus' && !wasKeyDown) {
-      return;
-    }
-
-    // Remove all current
-    removeCurrent();
-
-    // Delay the adding of classname until the focus has changed
-    // This event fires before the focusin event
-    if (type !== 'focusout') {
-      this.focusTimer = setTimeout(() => {
-        const focused = document.activeElement;
-
-        // Ignore if current focus element isn't inside the player
-        if (!elements.container.contains(focused)) {
-          return;
-        }
-
-        toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
-      }, 10);
-    }
-  };
-
   // Global window & document listeners
   global = (toggle = true) => {
     const { player } = this;
@@ -259,9 +207,6 @@ class Listeners {
 
     // Detect touch by events
     once.call(player, document.body, 'touchstart', this.firstTouch);
-
-    // Tab focus detection
-    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
   };
 
   // Container listeners

src/js/utils/elements.js

@@ -268,16 +268,11 @@ export function getElement(selector) {
 }
 
 // Set focus and tab focus class
-export function setFocus(element = null, tabFocus = false) {
+export function setFocus(element = null, focusVisible = false) {
   if (!is.element(element)) {
     return;
   }
 
   // Set regular focus
-  element.focus({ preventScroll: true });
-
-  // If we want to mimic keyboard focus via tab
-  if (tabFocus) {
-    toggleClass(element, this.config.classNames.tabFocus);
-  }
+  element.focus({ preventScroll: true, focusVisible });
 }