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.

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

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');
+        });
     }
 
     // ***************************************************************

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');

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>