add aria-label in video caption control

common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js

@@ -63,7 +63,13 @@
                     state = jasmine.initializePlayer();
                     $captionControl = $('.toggle-transcript');
                     expect($captionControl).toHaveAttrs({
-                        'aria-disabled': 'false'
+                        'aria-disabled': 'false',
+                        'aria-label': 'Turn off transcripts'
+                    });
+                    $captionControl.click();
+                    expect($captionControl).toHaveAttrs({
+                        'aria-disabled': 'false',
+                        'aria-label': 'Turn on transcripts'
                     });
                 });
 
@@ -73,6 +79,21 @@
                     expect($('.video')).toContainElement('.closed-captions');
                 });
 
+                it('add ARIA attributes to caption control', function() {
+                    var $toggleCaption;
+                    state = jasmine.initializePlayer();
+                    $toggleCaption = $('.toggle-captions');
+                    expect($toggleCaption).toHaveAttrs({
+                        'aria-disabled': 'false',
+                        'aria-label': 'Turn on closed captioning'
+                    });
+                    $toggleCaption.click();
+                    expect($toggleCaption).toHaveAttrs({
+                        'aria-disabled': 'false',
+                        'aria-label': 'Hide closed captions'
+                    });
+                });
+
                 it('fetch the transcript in HTML5 mode', function(done) {
                     var transcriptURL = '/transcript/translation/en',
                         transcriptCall;

common/lib/xmodule/xmodule/js/src/video/09_video_caption.js

@@ -1180,6 +1180,7 @@
             },
 
             showClosedCaptions: function() {
+                var text = gettext('Hide closed captions');
                 this.state.el.addClass('has-captions');
 
                 this.captionDisplayEl
@@ -1189,7 +1190,8 @@
 
                 this.captionControlEl
                     .addClass('is-active')
-                    .attr('title', gettext('Hide closed captions'));
+                    .attr('title', text)
+                    .attr('aria-label', text);
 
                 if (this.subtitlesEl.find('.current').text()) {
                     this.captionDisplayEl
@@ -1203,6 +1205,7 @@
             },
 
             hideClosedCaptions: function() {
+                var text = gettext('Turn on closed captioning');
                 this.state.el.removeClass('has-captions');
 
                 this.captionDisplayEl
@@ -1211,7 +1214,8 @@
 
                 this.captionControlEl
                     .removeClass('is-active')
-                    .attr('title', gettext('Turn on closed captioning'));
+                    .attr('title', text)
+                    .attr('aria-label', text);
 
                 this.state.el.trigger('captions:hide');
             },
@@ -1266,7 +1270,8 @@
 
                     transcriptControlEl
                         .removeClass('is-active')
-                        .attr('title', gettext(text));
+                        .attr('title', gettext(text))
+                        .attr('aria-label', text);
                 } else {
                     state.captionsHidden = false;
                     state.el.removeClass('closed');
@@ -1278,7 +1283,8 @@
 
                     transcriptControlEl
                         .addClass('is-active')
-                        .attr('title', gettext(text));
+                        .attr('title', gettext(text))
+                        .attr('aria-label', text);
                 }
 
                 if (state.resizer) {