[video] fix AC-343

[captions] move role attr from li element to nested span (AC-343)

[video] fix failing tests for video captions (AC-343)

[video] couple more failing tests (AC-343)

[video] properly outline the focused caption (AC-343)

common/lib/xmodule/xmodule/css/video/display.scss

@@ -705,7 +705,7 @@
     .subtitles-menu {
       height: 100%;
       margin: 0;
-      padding: 0;
+      padding: 0 3px;
       list-style: none;
 
       li {
@@ -716,6 +716,10 @@
         color: #0074b5; // AA compliant
         line-height: lh();
 
+        span {
+          display: block;
+        }
+
         &.current {
           color: #333;
           font-weight: 700;

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

@@ -161,7 +161,7 @@
                     mousewheel: this.onMovement,
                     DOMMouseScroll: this.onMovement
                 })
-                .on(events, 'li[data-index]', this.onCaptionHandler);
+                .on(events, 'span[data-index]', this.onCaptionHandler);
                 this.container.on({
                     mouseenter: this.onContainerMouseEnter,
                     mouseleave: this.onContainerMouseLeave
@@ -739,16 +739,16 @@
             */
             buildCaptions: function(container, start, captions) {
                 var process = function(text, index) {
-                    var liEl = $('<li>', {
+                    var $spanEl = $('<span>', {
                         'role': 'link',
                         'data-index': index,
                         'data-start': start[index],
                         'tabindex': 0
                     });
 
-                    HtmlUtils.setHtml($(liEl), HtmlUtils.HTML(text.toString()));
+                    HtmlUtils.setHtml($($spanEl), HtmlUtils.HTML(text.toString()));
 
-                    return liEl[0];
+                    return $spanEl.wrap('<li>').parent()[0]; // safe-lint: disable=javascript-jquery-insertion
                 };
 
                 return AsyncProcess.array(captions, process).done(function(list) {
@@ -912,20 +912,21 @@
             */
             captionFocus: function(event) {
                 var caption = $(event.target),
+                    container = caption.parent(),
                     captionIndex = parseInt(caption.attr('data-index'), 10);
                 // If the focus comes from a mouse click, hide the outline, turn on
                 // automatic scrolling and set currentCaptionIndex to point outside of
                 // caption list (ie -1) to disable mouseenter, mouseleave behavior.
                 if (this.isMouseFocus) {
                     this.autoScrolling = true;
-                    caption.removeClass('focused');
+                    container.removeClass('focused');
                     this.currentCaptionIndex = -1;
                 }
                 // If the focus comes from tabbing, show the outline and turn off
                 // automatic scrolling.
                 else {
                     this.currentCaptionIndex = captionIndex;
-                    caption.addClass('focused');
+                    container.addClass('focused');
                     // The second and second to last elements turn automatic scrolling
                     // off again as it may have been enabled in captionBlur.
                     if (
@@ -945,9 +946,10 @@
             */
             captionBlur: function(event) {
                 var caption = $(event.target),
+                    container = caption.parent(),
                     captionIndex = parseInt(caption.attr('data-index'), 10);
 
-                caption.removeClass('focused');
+                container.removeClass('focused');
                 // If we are on first or last index, we have to turn automatic scroll
                 // on again when losing focus. There is no way to know in what
                 // direction we are tabbing. So we could be on the first element and
@@ -1057,11 +1059,12 @@
                         }
 
                         this.subtitlesEl
-                            .find("li[data-index='" + newIndex + "']")
+                            .find("span[data-index='" + newIndex + "']")
+                            .parent()
                             .addClass('current');
 
                         this.currentIndex = newIndex;
-                        this.captionDisplayEl.text(this.subtitlesEl.find("li[data-index='" + newIndex + "']").text());
+                        this.captionDisplayEl.text(this.subtitlesEl.find("span[data-index='" + newIndex + "']").text());
                         this.scrollCaption();
                     }
                 }

common/test/acceptance/pages/lms/video/video.py

@@ -32,8 +32,8 @@ CSS_CLASS_NAMES = {
     'captions_closed': '.video.closed',
     'captions_rendered': '.video.is-captions-rendered',
     'captions': '.subtitles',
-    'captions_text': '.subtitles li',
-    'captions_text_getter': '.subtitles li[role="link"][data-index="1"]',
+    'captions_text': '.subtitles li span',
+    'captions_text_getter': '.subtitles li span[role="link"][data-index="1"]',
     'closed_captions': '.closed-captions',
     'error_message': '.video .video-player .video-error',
     'video_container': '.video',

common/test/acceptance/pages/studio/video/video.py

@@ -277,7 +277,7 @@ class VideoComponentPage(VideoPage):
             line_number (int): caption line number
 
         """
-        caption_line_selector = ".subtitles li[data-index='{index}']".format(index=line_number - 1)
+        caption_line_selector = ".subtitles li span[data-index='{index}']".format(index=line_number - 1)
         self.q(css=caption_line_selector).results[0].send_keys(Keys.ENTER)
 
     def is_caption_line_focused(self, line_number):
@@ -288,10 +288,9 @@ class VideoComponentPage(VideoPage):
             line_number (int): caption line number
 
         """
-        caption_line_selector = ".subtitles li[data-index='{index}']".format(index=line_number - 1)
-        attributes = self.q(css=caption_line_selector).attrs('class')
-
-        return 'focused' in attributes
+        caption_line_selector = ".subtitles li span[data-index='{index}']".format(index=line_number - 1)
+        caption_container = self.q(css=caption_line_selector).results[0].find_element_by_xpath('..')
+        return 'focused' in caption_container.get_attribute('class').split()
 
     @property
     def is_slider_range_visible(self):