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

Volume slider announces its name and value to screen readers

Browse Source
This commit is contained in:
jmclaus
2013-09-29 01:50:34 +02:00
parent ce976a80c8
commit a9b2f2dea0
3 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,6 +109,7 @@ div.video {
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
tabindex: -1;
transition: transform 0.7s ease-in-out;
@include transform(scaleY(0.5) translate3d(0, 50%, 0));

3
common/lib/xmodule/xmodule/js/src/video/04_video_control.js
View File

@@ -70,10 +70,13 @@ function () {
// 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');

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

@@ -74,6 +74,18 @@ function () {
// what its state is:
state.videoVolumeControl.buttonEl.attr('aria-disabled', 'false');
// Volume slider
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')
});
}
/**
@@ -159,6 +171,9 @@ 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));
}
function toggleMute(event) {
@@ -167,8 +182,43 @@ function () {
if (this.videoVolumeControl.currentVolume > 0) {
this.videoVolumeControl.previousVolume = this.videoVolumeControl.currentVolume;
this.videoVolumeControl.slider.slider('option', 'value', 0);
// ARIA
state.videoVolumeControl.volumeSliderHandleEl.attr({
'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
});
}
}
// ARIA
function getVolumeDescription(vol) {
if (vol === 0) {
return 'silent';
}
else if (vol <= 20) {
return 'very low';
}
else if (vol <= 40) {
return 'low';
}
else if (vol <= 60) {
return 'average';
}
else if (vol <= 80) {
return 'loud';
}
else if (vol <= 99) {
return 'very loud';
}
else {
return 'maximum';
}
}