feat: make menu background respect :focus-visible (#5558)

videojs · Nov 30, 2018 · e5e1e290fd7e31763461aba5d10b3cdcc98b07f9 · e5e1e29
1 parent 4842201
commit e5e1e290fd7e31763461aba5d10b3cdcc98b07f9
Unified Split

Showing with 8 additions and 3 deletions.

+4 −2 src/css/components/menu/_menu.scss

+4 −1 src/css/video-js.scss
diff --git a/src/css/components/menu/_menu.scss b/src/css/components/menu/_menu.scss
@@ -43,13 +43,15 @@
 }
 
 .vjs-menu li.vjs-menu-item:focus,
-.vjs-menu li.vjs-menu-item:hover {
+.vjs-menu li.vjs-menu-item:hover,
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
   @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
 }
 
 .vjs-menu li.vjs-selected,
 .vjs-menu li.vjs-selected:focus,
-.vjs-menu li.vjs-selected:hover {
+.vjs-menu li.vjs-selected:hover,
+.js-focus-visible .vjs-menu li.vjs-selected:hover {
   background-color: $primary-foreground-color;
   color: $primary-background-color;
 }

diff --git a/src/css/video-js.scss b/src/css/video-js.scss
@@ -56,8 +56,11 @@
 // 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 *:focus:not(:focus-visible),
+.video-js .vjs-menu *:focus:not(:focus-visible) {
   outline: none;
+  background: none;
 }