Merge pull request #12347 from edx/clrux/ac-409

AC-409 adding `lang` attribute to closed-captions and transcript skip links

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

@@ -37,6 +37,19 @@
                     state = jasmine.initializePlayer();
                     expect($('.video')).toContainElement('.subtitles');
                 });
+                
+                it('has appropriate lang attributes', function() {
+                    state = jasmine.initializePlayer();
+                    
+                    $('.video .toggle-captions').trigger('click');
+
+                    expect($('.video .subtitles-menu')).toHaveAttrs({
+                        'lang': 'en'
+                    });
+                    expect($('.video .closed-captions')).toHaveAttrs({
+                        'lang': 'en'
+                    });
+                });
 
                 it('add transcript control to video player', function () {
                     state = jasmine.initializePlayer();
@@ -247,6 +260,12 @@
                         expect(state.storage.setItem)
                             .toHaveBeenCalledWith('language', 'de');
                         expect($('.langs-list li.is-active').length).toBe(1);
+                        expect($('.subtitles .subtitles-menu')).toHaveAttrs({
+                            'lang': 'de'
+                        });
+                        expect($('.closed-captions')).toHaveAttrs({
+                            'lang': 'de'
+                        });
                     });
 
                     it('when clicking on link with current language', function () {

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

@@ -113,7 +113,7 @@
                 var template = [
                     '<div class="subtitles" role="region" id="transcript-' + this.state.id + '">',
                         '<h3 id="transcript-label-' + this.state.id + '" class="transcript-title sr"></h3>',
-                        '<ol id="transcript-captions" class="subtitles-menu"></ol>',
+                        '<ol id="transcript-captions" class="subtitles-menu" lang="' + this.state.lang + '"></ol>',
                     '</div>'
                 ].join('');
 
@@ -687,6 +687,12 @@
 
                         state.el.trigger('language_menu:change', [langCode]);
                         self.fetchCaption();
+                        
+                        // update the closed-captions lang attribute
+                        self.captionDisplayEl.attr('lang', langCode);
+                        
+                        // update the transcript lang attribute
+                        self.subtitlesMenuEl.attr('lang', langCode);
                     }
                 });
             },
@@ -759,10 +765,12 @@
                         .text(gettext('Video transcript'));
 
                     self.subtitlesEl.find('.transcript-start')
-                        .text(gettext('Start of transcript. Skip to the end.'));
+                        .text(gettext('Start of transcript. Skip to the end.'))
+                        .attr('lang', $('html').attr('lang'));
 
                     self.subtitlesEl.find('.transcript-end')
-                        .text(gettext('End of transcript. Skip to the start.'));
+                        .text(gettext('End of transcript. Skip to the start.'))
+                        .attr('lang', $('html').attr('lang'));
 
                     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
@@ -1116,7 +1124,8 @@
 
                 this.captionDisplayEl
                     .show()
-                    .addClass('is-visible');
+                    .addClass('is-visible')
+                    .attr('lang', this.state.lang);
 
                 this.captionControlEl
                     .addClass('is-active')