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

demo/src/js/demo.js

@@ -4,7 +4,6 @@
 // Please see README.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
-import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
@@ -13,7 +12,6 @@ import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
 import sources from './sources';
-import toggleClass from './toggle-class';
 
 (() => {
   const production = 'plyr.io';
@@ -108,10 +106,10 @@ import toggleClass from './toggle-class';
 
     function render(type) {
       // Remove active classes
-      Array.from(buttons).forEach((button) => toggleClass(button.parentElement, 'active', false));
+      Array.from(buttons).forEach((button) => button.parentElement.classList.toggle('active', false));
 
       // Set active on parent
-      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+      document.querySelector(`[data-source="${type}"]`).classList.toggle('active', true);
 
       // Show cite
       Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {

demo/src/js/tab-focus.js

@@ -1,31 +0,0 @@
-// 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.key !== 'Tab') {
-    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);
-});

demo/src/js/toggle-class.js

@@ -1,5 +0,0 @@
-// Toggle class on an element
-const toggleClass = (element, className = '', toggle = false) =>
-  element && element.classList[toggle ? 'add' : 'remove'](className);
-
-export default toggleClass;

demo/src/sass/components/buttons.scss

@@ -44,8 +44,8 @@
     outline: 0;
   }
 
-  &.tab-focus {
-    @include tab-focus;
+  &:focus-visible {
+    @include focus-visible($color-button-background);
   }
 
   &:active {

demo/src/sass/components/links.scss

@@ -38,8 +38,8 @@ a {
     }
   }
 
-  &.tab-focus {
-    @include tab-focus;
+  &:focus-visible {
+    @include focus-visible($color-link);
   }
 
   &.no-border::after {

demo/src/sass/layout/core.scss

@@ -58,8 +58,8 @@ aside {
   a {
     color: $color-twitter;
 
-    &.tab-focus {
-      @include tab-focus($color-twitter);
+    &:focus-visible {
+      @include focus-visible($color-twitter);
     }
   }
 }

demo/src/sass/lib/mixins.scss

@@ -25,9 +25,9 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin tab-focus($color: $tab-focus-default-color) {
-  box-shadow: 0 0 0 3px rgba($color, 0.35);
-  outline: 0;
+@mixin focus-visible($color: $focus-default-color) {
+  outline: 2px dashed $color;
+  outline-offset: 2px;
 }
 
 // Use rems for font sizing

demo/src/sass/settings/colors.scss

@@ -39,4 +39,4 @@ $color-button-count-background: #fff;
 $color-button-count-text: $color-gray-600;
 
 // Focus
-$tab-focus-default-color: #fff;
+$focus-default-color: $color-brand-primary;

demo/src/sass/utilities/focus.scss

@@ -0,0 +1,4 @@
+*:focus-visible {
+  outline: 2px dotted $color-brand-primary;
+  outline-offset: 2px;
+}