fix: focus-visible shouldn't change background styles (#7113)

Only set background:none focus styles on menu
videojs · Mar 9, 2021 · 1b52e7b · 1b52e7b
1 parent 6336e57
commit 1b52e7b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/css/components/menu/_menu.scss b/src/css/components/menu/_menu.scss
@@ -56,6 +56,11 @@
   color: $primary-background-color;
 }
 
+.video-js .vjs-menu *:focus:not(:focus-visible),
+.js-focus-visible .vjs-menu *:focus:not(.focus-visible) {
+  background: none;
+}
+
 .vjs-menu li.vjs-menu-title {
   text-align: center;
   text-transform: uppercase;

diff --git a/src/css/video-js.scss b/src/css/video-js.scss
@@ -57,11 +57,8 @@
 // The rule is needed for :focus-visible polyfill
 .js-focus-visible .video-js *:focus:not(.focus-visible) {
   outline: none;
-  background: none;
 }
 
-.video-js *:focus:not(:focus-visible),
-.video-js .vjs-menu *:focus:not(:focus-visible) {
+.video-js *:focus:not(:focus-visible) {
   outline: none;
-  background: none;
 }