Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AC-408 converting video slider controls from a to div

Browse Source
This commit is contained in:
Chris Rodriguez
2016-05-11 12:54:52 -04:00
parent e57777d3fb
commit e0da408f95
6 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -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 {

2
common/lib/xmodule/xmodule/js/spec/video/video_progress_slider_spec.js
View File

@@ -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',

8
common/lib/xmodule/xmodule/js/src/video/06_video_progress_slider.js
View File

@@ -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',

5
common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
View File

@@ -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);
},

3
common/test/acceptance/tests/video/test_studio_video_module.py
View File

@@ -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()

3
common/test/acceptance/tests/video/test_video_module.py
View File

@@ -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()