Updating video player controls with better accessibility

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));
                 }