From a3db5da9946cba18aaede76f019ca280a5a0df86 Mon Sep 17 00:00:00 2001 From: jmclaus Date: Tue, 1 Oct 2013 11:57:57 +0200 Subject: [PATCH] Code cleanup --- .../xmodule/js/src/video/04_video_control.js | 27 ++++++------ .../js/src/video/05_video_quality_control.js | 14 +++--- .../js/src/video/06_video_progress_slider.js | 20 ++++----- .../js/src/video/07_video_volume_control.js | 43 +++++++++++-------- .../js/src/video/08_video_speed_control.js | 16 +++---- .../xmodule/js/src/video/09_video_caption.js | 14 +++--- 6 files changed, 68 insertions(+), 66 deletions(-) diff --git a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js b/common/lib/xmodule/xmodule/js/src/video/04_video_control.js index 5272a3fb64..a322ba82e3 100644 --- a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/04_video_control.js @@ -67,20 +67,23 @@ function () { // ARIA // Let screen readers know that: - // these anchors behaves like buttons - state.videoControl.playPauseEl.attr('role', gettext('button')); - state.videoControl.fullScreenEl.attr('role', gettext('button')); - // and this one as a slider - state.videoControl.sliderEl.find('.ui-slider-handle').attr('role', gettext('slider')); + // These anchors behaves like buttons, named 'Play' or 'Pause', and + // 'Fill screen' (the title attribute is set in video.html template). + state.videoControl.playPauseEl.attr({ + 'role': gettext('button'), + 'aria-disabled': 'false' + }); - // what their names are: (title attribute are set in video.html template): - // Play, Pause - // Fill browser - state.videoControl.sliderEl.find('.ui-slider-handle').attr('title', gettext('video slider')); + state.videoControl.fullScreenEl.attr({ + 'role': gettext('button'), + 'aria-disabled': 'false' + }); - // what their states are: - state.videoControl.playPauseEl.attr('aria-disabled', 'false'); - state.videoControl.fullScreenEl.attr('aria-disabled', 'false'); + // This anchor behaves as a slider named 'video slider'. + state.videoControl.sliderEl.find('.ui-slider-handle').attr({ + 'role': gettext('slider'), + 'title': gettext('video slider') + }); } // function _bindHandlers(state) diff --git a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js b/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js index 5788cd6291..c5beaf5b5b 100644 --- a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js @@ -47,14 +47,12 @@ function () { // ARIA // Let screen readers know that: - // this anchor behaves like a button - state.videoQualityControl.el.attr('role', gettext('button')); - - // what its name is: (title attribute is set in video.html template): - // HD - - // what its state is: - state.videoQualityControl.el.attr('aria-disabled', 'false'); + // This anchor behaves as a button named 'HD'. + // (the title attribute is set in video.html template). + state.videoQualityControl.el.attr({ + 'role': gettext('button'), + 'aria-disabled': 'false' + }); } // function _bindHandlers(state) 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 7741f6eadb..b3fe1ce3d3 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 @@ -54,18 +54,16 @@ function () { function _buildHandle(state) { state.videoProgressSlider.handle = state.videoProgressSlider.el.find('.ui-slider-handle'); - + // ARIA - // Let screen readers know that this anchor behaves like a slider, is - // named 'video position' and give its state + // Let screen readers know that: + + // This anchor behaves as a button named 'video position'. state.videoProgressSlider.handle.attr({ 'role': gettext('slider'), 'title': 'video position', 'aria-disabled': 'false', 'aria-valuetext': getTimeDescription(state.videoProgressSlider.slider.slider('option', 'value')) - //'aria-valuenow': state.videoProgressSlider.slider.slider('option', 'value'), - //'aria-valuemin': state.videoProgressSlider.slider.slider('option', 'min'), - //'aria-valuemax': state.videoProgressSlider.slider.slider('option', 'max') }); } @@ -89,8 +87,9 @@ function () { this.trigger('videoPlayer.onSlideSeek', {'type': 'onSlideSeek', 'time': ui.value}); // ARIA - this.videoProgressSlider.handle.attr('aria-valuetext', - getTimeDescription(this.videoPlayer.currentTime)); + this.videoProgressSlider.handle.attr( + 'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime) + ); } function onStop(event, ui) { @@ -101,8 +100,9 @@ function () { this.trigger('videoPlayer.onSlideSeek', {'type': 'onSlideSeek', 'time': ui.value}); // ARIA - this.videoProgressSlider.handle.attr('aria-valuetext', - getTimeDescription(this.videoPlayer.currentTime)); + this.videoProgressSlider.handle.attr( + 'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime) + ); setTimeout(function() { _this.videoProgressSlider.frozen = false; 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 d7116f24dc..5d2d2f56e5 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 @@ -66,25 +66,26 @@ function () { // ARIA // Let screen readers know that: - // this anchor behaves like a button - state.videoVolumeControl.buttonEl.attr('role', gettext('button')); + // This anchor behaves as a button named 'Volume'. + // (the title attribute is set in video.html template). + state.videoVolumeControl.buttonEl.attr({ + 'role': gettext('button'), + 'aria-label': gettext('Volume'), // Doesn't read the title attribute, why? + 'aria-disabled': 'false' + }); + //state.videoVolumeControl.buttonEl.attr(); - // what its name is: (title attribute is set in video.html template): - state.videoVolumeControl.buttonEl.attr('aria-label', gettext('Volume')); - - // what its state is: - state.videoVolumeControl.buttonEl.attr('aria-disabled', 'false'); - - // Volume slider + // The anchor representing the slider handle behaves as a slider named + // volume. state.videoVolumeControl.volumeSliderHandleEl = state.videoVolumeControl.volumeSliderEl.find('.ui-slider-handle'); state.videoVolumeControl.volumeSliderHandleEl.attr({ 'role': gettext('slider'), 'title': 'volume', 'aria-disabled': 'false', - 'aria-valuetext': getVolumeDescription(state.videoVolumeControl.slider.slider('option', 'value')), - 'aria-valuenow': state.videoVolumeControl.slider.slider('option', 'value'), 'aria-valuemin': state.videoVolumeControl.slider.slider('option', 'min'), - 'aria-valuemax': state.videoVolumeControl.slider.slider('option', 'max') + 'aria-valuemax': state.videoVolumeControl.slider.slider('option', 'max'), + 'aria-valuenow': state.videoVolumeControl.slider.slider('option', 'value'), + 'aria-valuetext': getVolumeDescription(state.videoVolumeControl.slider.slider('option', 'value')) }); } @@ -171,9 +172,12 @@ function () { }); this.trigger('videoPlayer.onVolumeChange', ui.value); + // ARIA - this.videoVolumeControl.volumeSliderHandleEl.attr('aria-valuenow', ui.value); - this.videoVolumeControl.volumeSliderHandleEl.attr('aria-valuetext', getVolumeDescription(ui.value)); + this.videoVolumeControl.volumeSliderHandleEl.attr({ + 'aria-valuenow': ui.value, + 'aria-valuetext': getVolumeDescription(ui.value) + }); } function toggleMute(event) { @@ -183,21 +187,22 @@ function () { this.videoVolumeControl.previousVolume = this.videoVolumeControl.currentVolume; this.videoVolumeControl.slider.slider('option', 'value', 0); // ARIA - state.videoVolumeControl.volumeSliderHandleEl.attr({ + this.videoVolumeControl.volumeSliderHandleEl.attr({ + 'aria-valuenow': 0, 'aria-valuetext': getVolumeDescription(0), - 'aria-valuenow': 0 }); } else { this.videoVolumeControl.slider.slider('option', 'value', this.videoVolumeControl.previousVolume); // ARIA - state.videoVolumeControl.volumeSliderHandleEl.attr({ - 'aria-valuetext': getVolumeDescription(this.videoVolumeControl.previousVolume), - 'aria-valuenow': this.videoVolumeControl.previousVolume + this.videoVolumeControl.volumeSliderHandleEl.attr({ + 'aria-valuenow': this.videoVolumeControl.previousVolume, + 'aria-valuetext': getVolumeDescription(this.videoVolumeControl.previousVolume) }); } } // ARIA + // Returns a string describing the level of volume. function getVolumeDescription(vol) { if (vol === 0) { return 'silent'; diff --git a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js index 0ec9a5a96f..434edac3f2 100644 --- a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js +++ b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js @@ -80,17 +80,15 @@ function () { state.videoSpeedControl.setSpeed(state.speed); - // ARIA + // ARIA // Let screen readers know that: - // this anchor behaves like a button - state.videoSpeedControl.el.children('a').attr('role', gettext('button')); - - // what its name is: (title attribute is set in video.html template): - state.videoSpeedControl.el.children('a').attr('aria-label', 'Speeds'); - - // what its state is: - state.videoSpeedControl.el.children('a').attr('aria-disabled', 'false'); + // This anchor behaves as a button named 'Speeds'. + // (the title attribute is set in video.html template). + state.videoSpeedControl.el.children('a').attr({ + 'role': gettext('button'), + 'aria-disabled': 'false' + }); } /** diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js index d606245420..5a5c9a9e43 100644 --- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js +++ b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js @@ -109,14 +109,12 @@ function () { // ARIA // Let screen readers know that: - // this anchor behaves like a button - this.videoCaption.hideSubtitlesEl.attr('role', gettext('button')); - // what its name is: - // what its name is: (title attribute is set in video.html template): - // Speeds - - // what its state is: - this.videoCaption.hideSubtitlesEl.attr('aria-disabled', 'false'); + // This anchor behaves as a button named 'CC'. + // (the title attribute is set in video.html template). + this.videoCaption.hideSubtitlesEl.attr({ + 'role': gettext('button'), + 'aria-disabled': 'false' + }); } // function bindHandlers()