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

gjanblaszczyk · gkatsev · commit e5e1e290fd7e · 2018-11-30T10:47:25.000-05:00
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;
 }

Original file line number	Diff line number	Diff line change
`@@ -43,13 +43,15 @@`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`.vjs-menu li.vjs-menu-item:focus,`
`46`		`-.vjs-menu li.vjs-menu-item:hover {`
	`46`	`+.vjs-menu li.vjs-menu-item:hover,`
	`47`	`+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {`
`47`	`48`	`@include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);`
`48`	`49`	`}`
`49`	`50`
`50`	`51`	`.vjs-menu li.vjs-selected,`
`51`	`52`	`.vjs-menu li.vjs-selected:focus,`
`52`		`-.vjs-menu li.vjs-selected:hover {`
	`53`	`+.vjs-menu li.vjs-selected:hover,`
	`54`	`+.js-focus-visible .vjs-menu li.vjs-selected:hover {`
`53`	`55`	`background-color: $primary-foreground-color;`
`54`	`56`	`color: $primary-background-color;`
`55`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,8 +56,11 @@`
`56`	`56`	`// The rule is needed for :focus-visible polyfill`
`57`	`57`	`.js-focus-visible .video-js *:focus:not(.focus-visible) {`
`58`	`58`	`outline: none;`
	`59`	`+ background: none;`
`59`	`60`	`}`
`60`	`61`
`61`		`-.video-js *:focus:not(:focus-visible) {`
	`62`	`+.video-js *:focus:not(:focus-visible),`
	`63`	`+.video-js .vjs-menu *:focus:not(:focus-visible) {`
`62`	`64`	`outline: none;`
	`65`	`+ background: none;`
`63`	`66`	`}`