Merge pull request #1398 from edx/jmclaus/bugfix_caption_a11y

Caption functionality announced when tabbing to list

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

@@ -432,14 +432,18 @@ function () {
         // outline has to be drawn (tabbing) or not (mouse click).
         this.videoCaption.isMouseFocus = false;
 
+        // Set top and bottom spacing heigh and make sure they are taken out of
+        // the tabbing order.
         this.videoCaption.subtitlesEl
             .prepend(
                 $('<li class="spacing">')
                     .height(this.videoCaption.topSpacingHeight())
+                    .attr('tabindex', -1)
             )
             .append(
                 $('<li class="spacing">')
                     .height(this.videoCaption.bottomSpacingHeight())
+                    .attr('tabindex', -1)
             );
 
         this.videoCaption.rendered = true;

lms/templates/video.html

@@ -85,7 +85,7 @@
             </section>
         </article>
 
-        <ol class="subtitles" tabindex="0" title="Captions"><li></li></ol>
+        <ol class="subtitles" tabindex="0" title="${_('Captions')}" role="group" aria-label="${_('Activating an item in this group will spool the video to the corresponding time point')}"><li></li></ol>
     </div>
 
     <div class="focus_grabber last"></div>