Code cleanup
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user