diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 7dc08904c8..116818fb08 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/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 { diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js index 32cf02ba74..31b0b9885a 100644 --- a/common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js +++ b/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', diff --git a/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js b/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js index d5c5439e47..bb19d45596 100644 --- a/common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js +++ b/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('
'); + this.videoProgressSlider.slider = this.videoProgressSlider.el .slider({ range: 'min', diff --git a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js index aff29a4459..40bdded324 100644 --- a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js +++ b/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('
'); 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); }, diff --git a/common/test/acceptance/tests/video/test_studio_video_module.py b/common/test/acceptance/tests/video/test_studio_video_module.py index ef0fa267b6..cc2fd9e766 100644 --- a/common/test/acceptance/tests/video/test_studio_video_module.py +++ b/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() diff --git a/common/test/acceptance/tests/video/test_video_module.py b/common/test/acceptance/tests/video/test_video_module.py index 33ba38f32e..05c88ae287 100644 --- a/common/test/acceptance/tests/video/test_video_module.py +++ b/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()