From e5e1e290fd7e31763461aba5d10b3cdcc98b07f9 Mon Sep 17 00:00:00 2001
From: Grzegorz Blaszczyk <gjanblaszczyk@gmail.com>
Date: Fri, 30 Nov 2018 16:47:25 +0100
Subject: [PATCH] feat: make menu background respect :focus-visible (#5558)
---
src/css/components/menu/_menu.scss | 6 ++++--
src/css/video-js.scss | 5 ++++-
2 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/css/components/menu/_menu.scss b/src/css/components/menu/_menu.scss
index c7678bd25..6b981eb49 100644
--- 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
index 9ca6b3bcd..a7cf40914 100644
--- 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;
}