diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js index 9fd48b40f6..17cc31b7c8 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js +++ b/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; diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js index 122038d5bb..aa638cf938 100644 --- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js +++ b/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) {