Code cleanup

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'));
-
-        // 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')); 
-        
-        // what their states are:
-        state.videoControl.playPauseEl.attr('aria-disabled', 'false');
-        state.videoControl.fullScreenEl.attr('aria-disabled', 'false');
+        // 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'
+        });
+
+        state.videoControl.fullScreenEl.attr({
+            'role': gettext('button'),
+            '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)

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)

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

@@ -56,16 +56,14 @@ function () {
         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;

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

common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js

@@ -83,14 +83,12 @@ function () {
          // 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'
+        });
     }
 
     /**

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