diff --git a/CHANGELOG.md b/CHANGELOG.md index d728d6fd6..d4c85b478 100644 --- a/CHANGELOG.md +++ b/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)) -------------------- diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss index 8a3a54cb9..f74dc4c3e 100644 --- a/src/css/components/_control-bar.scss +++ b/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: ""; } }