Merge pull request #1142 from sampotts/a11y-improvements

A11y improvements

1 files changed, 15 insertions, 29 deletions

diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 65b7554c..bde8600b 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -2,11 +2,6 @@
 // Controls
 // --------------------------------------------------------------
 
-// Hide empty controls
-.plyr__controls:empty {
-    display: none;
-}
-
 // Hide native controls
 .plyr--full-ui ::-webkit-media-controls {
     display: none;
@@ -37,6 +32,11 @@
         margin-left: ($plyr-control-spacing / 2);
     }
 
+    // Hide empty controls
+    &:empty {
+        display: none;
+    }
+
     @media (min-width: $plyr-bp-sm) {
         > .plyr__control,
         .plyr__progress,
@@ -53,6 +53,14 @@
     }
 }
 
+// Audio controls
+.plyr--audio .plyr__controls {
+    background: $plyr-audio-controls-bg;
+    border-radius: inherit;
+    color: $plyr-audio-control-color;
+    padding: $plyr-control-spacing;
+}
+
 // Video controls
 .plyr--video .plyr__controls {
     background: linear-gradient(
@@ -69,32 +77,10 @@
     position: absolute;
     right: 0;
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 2;
-
-    .plyr__control {
-        svg {
-            filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-        }
-
-        // Hover and tab focus
-        &.plyr__tab-focus,
-        &:hover,
-        &[aria-expanded='true'] {
-            background: $plyr-video-control-bg-hover;
-            color: $plyr-video-control-color-hover;
-        }
-    }
-}
-
-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
+    z-index: 3;
 }
 
-// Hide controls
+// Hide video controls
 .plyr--video.plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;