@chrisauclair Make controls visible for accessibility reasons. closes #3237

CHANGELOG.md

@@ -4,6 +4,7 @@ CHANGELOG
 ## HEAD (Unreleased)
 * @nickygerritsen Pass tech options to source handlers ([view](https://github.com/videojs/video.js/pull/3245))
 * @gkatsev Use fonts 2.0 that do not require wrapping codepoints ([view](https://github.com/videojs/video.js/pull/3252))
+* @chrisauclair Make controls visible for accessibility reasons ([view](https://github.com/videojs/video.js/pull/3237))
 
 --------------------
 

src/css/components/_control-bar.scss

@@ -20,13 +20,22 @@
   @include transition($trans);
 }
 
+// IE 8 hack for media queries
+$ie8screen: "\\0screen";
+
 // Video has started playing AND user is inactive
 .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
-  visibility: hidden;
+  // Remain visible for screen reader and keyboard users
+  visibility: visible;
   opacity: 0;
 
   $trans: visibility 1.0s, opacity 1.0s;
   @include transition($trans);
+
+  // Make controls hidden in IE8 for now
+  @media #{$ie8screen} {
+    visibility: hidden;
+  }
 }
 
 .vjs-controls-disabled .vjs-control-bar,
@@ -42,11 +51,11 @@
   visibility: visible;
 }
 
+
 // IE8 is flakey with fonts, and you have to change the actual content to force
 // fonts to show/hide properly.
 // - "\9" IE8 hack didn't work for this
 // Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
-$ie8screen: "\\0screen";
 .vjs-user-inactive.vjs-playing .vjs-control-bar :before {
   @media #{$ie8screen} { content: ""; }
 }