From 9c8af9fe77ae7b7c16b1e5d60a07d8585555cca3 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Tue, 3 May 2016 10:40:39 -0400
Subject: [PATCH] AC-409 adding lang attribute to closed-captions, transcript,
 and skip links

---
 .../js/spec/video/video_caption_spec.js       | 19 +++++++++++++++++++
 .../xmodule/js/src/video/09_video_caption.js  | 17 +++++++++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

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 7442fdd8ff..f3293cf0e4 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
@@ -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 () {
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 e44b7397dc..27e47ba2be 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
@@ -108,7 +108,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('');
 
@@ -682,6 +682,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);
                     }
                 });
             },
@@ -754,10 +760,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 .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
@@ -1111,7 +1119,8 @@
 
                 this.captionDisplayEl
                     .show()
-                    .addClass('is-visible');
+                    .addClass('is-visible')
+                    .attr('lang', this.state.lang);
 
                 this.captionControlEl
                     .addClass('is-active')