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

src/sass/components/control.scss

@@ -28,8 +28,8 @@
   }
 
   // Tab focus
-  &.plyr__tab-focus {
-    @include plyr-tab-focus;
+  &:focus-visible {
+    @include plyr-focus-visible;
   }
 }
 

src/sass/components/menus.scss

@@ -100,7 +100,7 @@
           right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
         &:hover::after {
           border-left-color: currentColor;
         }
@@ -132,7 +132,7 @@
           top: 100%;
         }
 
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
         &:hover::after {
           border-right-color: currentColor;
         }
@@ -181,7 +181,7 @@
         }
       }
 
-      &.plyr__tab-focus::before,
+      &:focus-visible::before,
       &:hover::before {
         background: rgba($plyr-color-gray-900, 0.1);
       }

src/sass/components/sliders.scss

@@ -83,17 +83,17 @@
     outline: 0;
   }
 
-  &.plyr__tab-focus {
+  &:focus-visible {
     &::-webkit-slider-runnable-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
     }
 
     &::-moz-range-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
     }
 
     &::-ms-track {
-      @include plyr-tab-focus;
+      @include plyr-focus-visible;
     }
   }
 }

src/sass/components/tooltips.scss

@@ -42,7 +42,7 @@
 
 // Displaying
 .plyr .plyr__control:hover .plyr__tooltip,
-.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
+.plyr .plyr__control:focus-visible .plyr__tooltip,
 .plyr__tooltip--visible {
   opacity: 1;
   transform: translate(-50%, 0) scale(1);
@@ -82,7 +82,7 @@
 .plyr__controls > .plyr__control:first-child + .plyr__control,
 .plyr__controls > .plyr__control:last-child {
   &:hover .plyr__tooltip,
-  &.plyr__tab-focus .plyr__tooltip,
+  &:focus-visible .plyr__tooltip,
   .plyr__tooltip--visible {
     transform: translate(0, 0) scale(1);
   }

src/sass/lib/mixins.scss

@@ -4,8 +4,8 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
-  outline: $color dotted 3px;
+@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {
+  outline: 2px dashed $color;
   outline-offset: 2px;
 }
 

src/sass/settings/cosmetics.scss

@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-focus-visible-color: var(--plyr-focus-visible-color, var(--plyr-color-main, $plyr-color-main)) !default;

src/sass/types/audio.scss

@@ -17,7 +17,7 @@
 
 // Control elements
 .plyr--audio .plyr__control {
-  &.plyr__tab-focus,
+  &:focus-visible,
   &:hover,
   &[aria-expanded='true'] {
     background: $plyr-audio-control-background-hover;

src/sass/types/video.scss

@@ -87,8 +87,7 @@ $embed-padding: (math.div(100, 16) * 9);
 
 // Control elements
 .plyr--video .plyr__control {
-  // Hover and tab focus
-  &.plyr__tab-focus,
+  &:focus-visible,
   &:hover,
   &[aria-expanded='true'] {
     background: $plyr-video-control-background-hover;