From f08394ac2c6e52a58d891755b46356e5ba9b7d16 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Wed, 7 Aug 2013 15:28:30 +0300
Subject: [PATCH] Volume and speeds dialogs are fully extended.

When the controls receive focus not via mouse click or mouse hover, their appropriate
slider and selection menu are fully extended and shown to the user.
---
 .../xmodule/xmodule/css/videoalpha/display.scss  |  1 -
 .../js/src/videoalpha/07_video_volume_control.js | 13 +++++++++++++
 .../js/src/videoalpha/08_video_speed_control.js  | 16 ++++++++++++----
 lms/templates/videoalpha.html                    | 10 +++++-----
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index 85425c1b01..93c387315a 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -421,7 +421,6 @@ div.videoalpha {
 
         a.hide-subtitles {
           background: url('../images/cc.png') center no-repeat;
-          /* display: block; */
           float: left;
           font-weight: 800;
           line-height: 46px; //height of play pause buttons
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
index b778a2cbd0..ac2857b027 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/07_video_volume_control.js
@@ -61,6 +61,11 @@ function () {
             slide: state.videoVolumeControl.onChange
         });
 
+        // Make sure that we can't focus the actual volume slider while Tabing.
+        state.videoVolumeControl.volumeSliderEl.find('a').each(function (index, value) {
+            $(value).attr('tabindex', '-1');
+        });
+
         state.videoVolumeControl.el.toggleClass('muted', state.videoVolumeControl.currentVolume === 0);
     }
 
@@ -74,9 +79,17 @@ function () {
             $(this).addClass('open');
         });
 
+        state.videoVolumeControl.buttonEl.on('focus', function() {
+            $(this).parent().addClass('open');
+        });
+
         state.videoVolumeControl.el.on('mouseleave', function() {
             $(this).removeClass('open');
         });
+
+        state.videoVolumeControl.buttonEl.on('blur', function() {
+            $(this).parent().removeClass('open');
+        });
     }
 
     // ***************************************************************
diff --git a/common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js b/common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
index a13aa03f4f..5e0685a550 100644
--- a/common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
+++ b/common/lib/xmodule/xmodule/js/src/videoalpha/08_video_speed_control.js
@@ -46,9 +46,9 @@ function () {
         $.each(state.videoSpeedControl.speeds, function(index, speed) {
 
             //var link = $('<a href="#">' + speed + 'x</a>');
-            var link = '<a href="#">' + speed + 'x</a>';
+            var link = '<a tabindex="-1" href="#">' + speed + 'x</a>';
 
-            state.videoSpeedControl.videoSpeedsEl.prepend($('<li data-speed="' + speed + '">' + link + '</li>'));
+            state.videoSpeedControl.videoSpeedsEl.prepend($('<li tabindex="-1" data-speed="' + speed + '">' + link + '</li>'));
         });
 
         state.videoSpeedControl.setSpeed(state.speed);
@@ -77,6 +77,14 @@ function () {
                     event.preventDefault();
                     $(this).removeClass('open');
                 });
+
+            state.videoSpeedControl.el.children('a')
+                .on('focus', function () {
+                    $(this).parent().addClass('open');
+                })
+                .on('blur', function () {
+                    $(this).parent().removeClass('open');
+                });
         }
     }
 
@@ -120,9 +128,9 @@ function () {
             var link, listItem;
 
             //link = $('<a href="#">' + speed + 'x</a>');
-            link = '<a href="#">' + speed + 'x</a>';
+            link = '<a tabindex="-1" href="#">' + speed + 'x</a>';
 
-            listItem = $('<li data-speed="' + speed + '">' + link + '</li>');
+            listItem = $('<li tabindex="-1" data-speed="' + speed + '">' + link + '</li>');
 
             if (speed === params.currentSpeed) {
                 listItem.addClass('active');
diff --git a/lms/templates/videoalpha.html b/lms/templates/videoalpha.html
index e0e0a6c0d9..fd11f2248f 100644
--- a/lms/templates/videoalpha.html
+++ b/lms/templates/videoalpha.html
@@ -49,15 +49,15 @@
                     <div class="secondary-controls">
                         <div class="speeds">
                             <a href="#" tabindex="0" title="Speeds">
-                                <h3>${_('Speed')}</h3>
-                                <p class="active"></p>
+                                <h3 tabindex="-1">${_('Speed')}</h3>
+                                <p tabindex="-1" class="active"></p>
                             </a>
-                            <ol class="video_speeds"></ol>
+                            <ol tabindex="-1" 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 tabindex="-1" class="volume-slider-container">
+                                <div tabindex="-1" class="volume-slider"></div>
                             </div>
                         </div>
                         <a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>