Skip to content

E
edx-platform
Commit 2a1d4d54 by Chris Rodriguez
Options

Updating video player controls with better accessibility

parent 721fffc9
Showing with 45 additions and 17 deletions
common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js
......@@ -2,7 +2,9 @@
'use strict';
define('video/04_video_full_screen.js', [], function () {
var template = [
'<button class="control add-fullscreen" aria-disabled="false">',
'<button class="control add-fullscreen" aria-disabled="false" title="',
gettext('Fill browser'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
'<span class="sr control-text">',
......
common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js
......@@ -7,7 +7,9 @@ define(
[],
function () {
var template = [
'<button class="control quality-control is-hidden" aria-disabled="false">',
'<button class="control quality-control is-hidden" aria-disabled="false" title="',
gettext('High Definition'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon icon-hd" aria-hidden="true">HD</span>', // "HD" is treated as a proper noun
// Translator note:
......
common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js
......@@ -89,7 +89,7 @@ function () {
'aria-valuemax': state.videoPlayer.duration(),
'aria-valuemin': '0',
'aria-valuenow': state.videoPlayer.currentTime,
'tabindex': '0'
'tabindex': '0',
'aria-label': gettext('Video position')
});
......
common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
......@@ -39,10 +39,13 @@ function() {
template: [
'<div class="volume" role="application">',
'<button class="control" aria-disabled="false" aria-label="',
gettext('Volume: Click on this button to mute or unmute this video or press UP or ' +
'DOWN buttons to increase or decrease volume level.'),
'" aria-expanded="false">',
'<p class="sr instructions" id="volume-instructions">',
gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line
'</p>',
'<button class="control" aria-disabled="false" aria-describedby="volume-instructions"',
'" aria-expanded="false" title="',
gettext('Adjust video volume'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
'<span class="sr control-text">',
......
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
......@@ -30,10 +30,13 @@ function (Iterator) {
SpeedControl.prototype = {
template: [
'<div class="speeds menu-container" role="application">',
'<button class="control speed-button" aria-label="',
/* jshint maxlen:200 */
gettext('Speed: Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'),
'" aria-disabled="false" aria-expanded="false">',
'<p class="sr instructions" id="speed-instructions">',
gettext('Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'), // jshint ignore: line
'</p>',
'<button class="control speed-button" aria-disabled="false" aria-expanded="false"',
'title="',
gettext('Adjust video speed'),
'" aria-describedby="speed-instructions">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-caret-right" aria-hidden="true"></span>',
'<span class="sr control-text">',
......
common/lib/xmodule/xmodule/js/src/video/09_play_pause_control.js
......@@ -25,7 +25,9 @@ define('video/09_play_pause_control.js', [], function() {
PlayPauseControl.prototype = {
template: [
'<button class="control video_control play" aria-disabled="false">',
'<button class="control video_control play" aria-disabled="false" title="',
gettext('Play'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="sr control-text">',
......@@ -77,6 +79,7 @@ define('video/09_play_pause_control.js', [], function() {
this.el
.addClass('pause')
.removeClass('play')
.attr('title', gettext('Pause'))
.find('.icon')
.removeClass('fa-play')
.addClass('fa-pause');
......@@ -90,6 +93,7 @@ define('video/09_play_pause_control.js', [], function() {
this.el
.removeClass('pause')
.addClass('play')
.attr('title', gettext('Play'))
.find('.icon')
.removeClass('fa-pause')
.addClass('fa-play');
......
common/lib/xmodule/xmodule/js/src/video/09_play_skip_control.js
......@@ -25,7 +25,9 @@ define('video/09_play_skip_control.js', [], function() {
PlaySkipControl.prototype = {
template: [
'<button class="control video_control play play-skip-control">',
'<button class="control video_control play play-skip-control" title="',
gettext('Play'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="text control-text">',
......@@ -78,6 +80,7 @@ define('video/09_play_skip_control.js', [], function() {
this.el
.removeClass('play')
.addClass('skip')
.attr('title', gettext('Skip'))
.find('.icon')
.removeClass('fa-play')
.addClass('fa-step-forward')
......
common/lib/xmodule/xmodule/js/src/video/09_skip_control.js
......@@ -28,7 +28,9 @@ function() {
SkipControl.prototype = {
template: [
'<button class="control video_control skip skip-control" aria-disabled="false">',
'<button class="control video_control skip skip-control" aria-disabled="false" title="',
gettext('Do not show again'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
'<span class="text control-text">',
......
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
......@@ -95,7 +95,12 @@
'</span>',
'</button>',
'<div class="lang menu-container" role="application">',
'<button class="control language-menu" aria-label="" aria-disabled="false">',
'<p class="sr instructions" id="lang-instructions"></p>',
'<button class="control language-menu" aria-disabled="false"',
'aria-describedby="lang-instructions" ',
'title="',
gettext('Open language menu'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
......@@ -759,8 +764,8 @@
self.subtitlesEl.find('.transcript-end')
.text(gettext('End of transcript. Skip to the start.'));
self.container.find('.menu-container .language-menu')
.attr('aria-label', gettext('Language: Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
self.container.find('.menu-container .instructions')
.text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
self.container.find('.menu-container .control .control-text')
.text(gettext('Open language menu.'));
......@@ -1115,6 +1120,7 @@
this.captionControlEl
.addClass('is-active')
.attr('title', gettext('Hide closed captions'))
.find('.control-text')
.text(gettext('Hide closed captions'));
......@@ -1138,6 +1144,7 @@
this.captionControlEl
.removeClass('is-active')
.attr('title', gettext('Turn on closed captioning'))
.find('.control-text')
.text(gettext('Turn on closed captioning'));
......@@ -1194,6 +1201,7 @@
transcriptControlEl
.removeClass('is-active')
.attr('title', gettext(text))
.find('.control-text')
.text(gettext(text));
} else {
......@@ -1207,6 +1215,7 @@
transcriptControlEl
.addClass('is-active')
.attr('title', gettext(text))
.find('.control-text')
.text(gettext(text));
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment