From bc503c88c6e089a9242a24f8c09a2628ec99f8f2 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 6 Aug 2013 14:23:48 +0300
Subject: [PATCH] Making it possible to tab to captions.

When a VideoAlpha is present on the page, if the user tries to tab through out the entire page, eventually he will land on the VideoAlpha controls. The tab index order has been set up so that all control receive focus eventually in the order from left to right. When a control receives focus, it is hilighted. The last tab focuses the captions dialog. When the captions dialog has focus, the Up and Down arrows can scroll it up and down.
---
 .../xmodule/css/videoalpha/display.scss       |  23 ++--
 lms/templates/videoalpha.html                 | 126 +++++++++---------
 2 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index 3b40809fa3..15ed6fb3b0 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -133,7 +133,6 @@ div.videoalpha {
             line-height: 46px;
             padding: 0 lh(.75);
             text-indent: -9999px;
-            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
             width: 14px;
             background: url('../images/vcr.png') 15px 15px no-repeat;
             outline: 0;
@@ -150,7 +149,7 @@ div.videoalpha {
             &.play {
               background-position: 17px -114px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
@@ -158,7 +157,7 @@ div.videoalpha {
             &.pause {
               background-position: 16px -50px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
@@ -382,7 +381,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:active, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -403,7 +402,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -432,7 +431,7 @@ div.videoalpha {
           -webkit-font-smoothing: antialiased;
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -442,9 +441,9 @@ div.videoalpha {
             opacity: 0.7;
           }
 
-          background-color: #444;
-          color: #fff;
-          text-decoration: none;
+          background-color: inherit;
+          color: #797979;
+          text-decoration: inherit;
         }
       }
     }
@@ -513,12 +512,6 @@ div.videoalpha {
       z-index: 1;
     }
 
-    article.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
-        background-color: inherit;
-        color: #797979;
-        text-decoration: inherit;
-    }
-
     article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
         height: 0px;
     }
diff --git a/lms/templates/videoalpha.html b/lms/templates/videoalpha.html
index 682c299e10..e0e0a6c0d9 100644
--- a/lms/templates/videoalpha.html
+++ b/lms/templates/videoalpha.html
@@ -1,82 +1,86 @@
 <%! from django.utils.translation import ugettext as _ %>
 
 % if display_name is not UNDEFINED and display_name is not None:
-  <h2> ${display_name} </h2>
+    <h2> ${display_name} </h2>
 % endif
 
 <div
-  id="video_${id}"
-      class="videoalpha"
+    id="video_${id}"
+    class="videoalpha"
 
-  % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
-  data-streams="${youtube_streams}"
-  % endif
+    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
+        data-streams="${youtube_streams}"
+    % endif
 
-  ${'data-sub="{}"'.format(sub) if sub else ''}
-      ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
-  % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
-  ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
-  ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
-  ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
-  % endif
+    ${'data-sub="{}"'.format(sub) if sub else ''}
+    ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
 
-  data-caption-data-dir="${data_dir}"
-  data-show-captions="${show_captions}"
-  data-start="${start}"
-  data-end="${end}"
-  data-caption-asset-path="${caption_asset_path}"
-  data-autoplay="${autoplay}"
+    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
+        ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
+        ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
+        ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
+    % endif
+
+    data-caption-data-dir="${data_dir}"
+    data-show-captions="${show_captions}"
+    data-start="${start}"
+    data-end="${end}"
+    data-caption-asset-path="${caption_asset_path}"
+    data-autoplay="${autoplay}"
 >
-<div class="tc-wrapper">
-  <article class="video-wrapper">
-        <div class="video-player-pre"></div>
-    <section class="video-player">
-      <div id="${id}"></div>
-    </section>
-        <div class="video-player-post"></div>
-        <section class="video-controls">
-          <div class="slider"></div>
-            <div>
-                <ul class="vcr">
-                    <li><a class="video_control" href="#" title="${_('Play')}"></a></li>
-                    <li><div class="vidtime">0:00 / 0:00</div></li>
-                </ul>
-                <div class="secondary-controls">
-                    <div class="speeds">
-                        <a href="#">
-                            <h3>${_('Speed')}</h3>
-                            <p class="active"></p>
-                        </a>
-                        <ol class="video_speeds"></ol>
-                    </div>
-                    <div class="volume">
-                        <a href="#"></a>
-                        <div class="volume-slider-container">
-                            <div class="volume-slider"></div>
+    <div class="tc-wrapper">
+        <article class="video-wrapper">
+            <div class="video-player-pre"></div>
+
+            <section class="video-player">
+                <div id="${id}"></div>
+            </section>
+
+            <div class="video-player-post"></div>
+
+            <section class="video-controls">
+                <div class="slider" tabindex="0" title="Video position"></div>
+
+                <div>
+                    <ul class="vcr">
+                        <li><a class="video_control" href="#" tabindex="0" title="${_('Play')}"></a></li>
+                        <li><div class="vidtime">0:00 / 0:00</div></li>
+                    </ul>
+                    <div class="secondary-controls">
+                        <div class="speeds">
+                            <a href="#" tabindex="0" title="Speeds">
+                                <h3>${_('Speed')}</h3>
+                                <p class="active"></p>
+                            </a>
+                            <ol class="video_speeds"></ol>
                         </div>
+                        <div class="volume">
+                            <a href="#" tabindex="0" title="Volume"></a>
+                            <div class="volume-slider-container">
+                                <div class="volume-slider"></div>
+                            </div>
+                        </div>
+                        <a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>
+                        <a href="#" class="quality_control" tabindex="0" title="${_('HD')}">${_('HD')}</a>
+
+                        <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
                     </div>
-                    <a href="#" class="add-fullscreen" title="${_('Fill browser')}">${_('Fill browser')}</a>
-                    <a href="#" class="quality_control" title="${_('HD')}">${_('HD')}</a>
-
-                    <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
                 </div>
-            </div>
-        </section>
-  </article>
+            </section>
+        </article>
 
-      <ol class="subtitles"><li></li></ol>
-
-</div>
+        <ol class="subtitles" tabindex="0" title="Captions"><li></li></ol>
+    </div>
 </div>
 
 % if sources.get('main'):
-<div class="video-sources">
-  <p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
-</div>
+    <div class="video-sources">
+        <p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
+    </div>
 % endif
 
 % if track:
-<div class="video-tracks">
-  <p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
-</div>
+    <div class="video-tracks">
+        <p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
+    </div>
 % endif