Merge pull request #12430 from edx/clrux/ac-408

AC-408 converting video slider controls from a to div

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

@@ -417,6 +417,7 @@
           margin-left: -($baseline / 8); // center-center causes the control to be beyond the end of the sider
           border: 0;
           border-radius: ($baseline / 5);
+          padding: 0;
           background: rgb(203, 89, 141); // UXPL secondary base
           box-shadow: none;
 
@@ -680,9 +681,11 @@
                 @include left(-5px);
                 height: 15px;
                 width: 15px;
-                background: rgb(203, 89, 141); // UXPL secondary base
                 border: 0;
                 border-radius: ($baseline / 5);
+                padding: 0;
+                background: rgb(203, 89, 141); // UXPL secondary base
+                box-shadow: none;
 
                 &:hover,
                 &:focus {

common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js

@@ -40,7 +40,7 @@
                 });
 
                 it('add ARIA attributes to time control', function () {
-                    var timeControl = $('div.slider > a');
+                    var timeControl = $('div.slider > .progress-handle');
 
                     expect(timeControl).toHaveAttrs({
                         'role': 'slider',

common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js

@@ -79,7 +79,7 @@ function () {
         // ARIA
         // We just want the knob to be selectable with keyboard
         state.videoProgressSlider.el.attr('tabindex', -1);
-        // Let screen readers know that this anchor, representing the slider
+        // Let screen readers know that this div, representing the slider
         // handle, behaves as a slider named 'video position'.
         state.videoProgressSlider.handle.attr({
             'role': 'slider',
@@ -89,7 +89,8 @@ function () {
                 .slider.slider('option', 'value')),
             'aria-valuemax': state.videoPlayer.duration(),
             'aria-valuemin': '0',
-            'aria-valuenow': state.videoPlayer.currentTime
+            'aria-valuenow': state.videoPlayer.currentTime,
+            'tabindex': '0'
         });
 
         state.el.on('destroy', state.videoProgressSlider.destroy);
@@ -103,6 +104,9 @@ function () {
     // ***************************************************************
 
     function buildSlider() {
+        this.videoProgressSlider.el
+            .append('<div class="ui-slider-handle progress-handle"></div>');
+
         this.videoProgressSlider.slider = this.videoProgressSlider.el
             .slider({
                 range: 'min',

common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js

@@ -121,6 +121,9 @@ function() {
          */
         render: function() {
             var container = this.el.find('.volume-slider');
+            
+            container
+                .append('<div class="ui-slider-handle volume-handle"></div>');
 
             this.volumeSlider = container.slider({
                 orientation: 'vertical',
@@ -133,7 +136,7 @@ function() {
             // We provide an independent behavior to adjust volume level.
             // Therefore, we do not need redundant focusing on slider in TAB
             // order.
-            container.find('a').attr('tabindex', -1);
+            container.find('.volume-handle').attr('tabindex', -1);
             this.state.el.find('.secondary-controls').append(this.el);
         },
 

common/test/acceptance/tests/video/test_studio_video_module.py

@@ -356,7 +356,6 @@ class CMSVideoA11yTest(CMSVideoBaseTest):
 
         # limit the scope of the audit to the video player only.
         self.outline.a11y_audit.config.set_scope(
-            include=["div.video"],
-            exclude=["a.ui-slider-handle"]
+            include=["div.video"]
         )
         self.outline.a11y_audit.check_for_accessibility_errors()

common/test/acceptance/tests/video/test_video_module.py

@@ -1270,7 +1270,6 @@ class LMSVideoModuleA11yTest(VideoBaseTest):
 
         # limit the scope of the audit to the video player only.
         self.video.a11y_audit.config.set_scope(
-            include=["div.video"],
-            exclude=["a.ui-slider-handle"]
+            include=["div.video"]
         )
         self.video.a11y_audit.check_for_accessibility_errors()