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

Merge pull request #1175 from edx/jmclaus_bugfix_video_player_controls_a11y

Browse Source 
Bug fix video player controls a11y
This commit is contained in:
jmclaus
2013-10-02 13:53:48 -07:00
parent 0521bec4e2 9d418755a6
commit 38642d2888
11 changed files with 181 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.rst
View File

@@ -316,3 +316,6 @@ Common: Updated CodeJail.
Common: Allow setting of authentication session cookie name.
LMS: Option to email students when enroll/un-enroll them.
Blades: Added WAI-ARIA markup to the video player controls. These are now fully
accessible by screen readers.

12
common/lib/xmodule/xmodule/js/fixtures/video.html
View File

@@ -26,26 +26,26 @@
<div class="slider"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="Play"></a></li>
<li><a class="video_control" href="#" title="Play" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#">
<a href="#" title="Speeds" role="button" aria-disabled="false">
<h3>Speed</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#"></a>
<a href="#" title="Volume" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
<a href="#" class="quality_control" title="HD">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
<a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
<a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
</div>
</div>
</section>

12
common/lib/xmodule/xmodule/js/fixtures/video_all.html
View File

@@ -29,26 +29,26 @@
<div class="slider"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="Play"></a></li>
<li><a class="video_control" href="#" title="Play" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#">
<a href="#" title="Speeds" role="button" aria-disabled="false">>
<h3>Speed</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#"></a>
<a href="#" title="Volume" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
<a href="#" class="quality_control" title="HD">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
<a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
<a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
</div>
</div>
</section>

12
common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
View File

@@ -26,26 +26,26 @@
<div class="slider"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="Play"></a></li>
<li><a class="video_control" href="#" title="Play" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#">
<a href="#" title="Speeds" role="button" aria-disabled="false">
<h3>Speed</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#"></a>
<a href="#" title="Volume" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
<a href="#" class="quality_control" title="HD">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
<a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
<a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
<a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
</div>
</div>
</section>

4
common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
View File

@@ -547,7 +547,7 @@
});
it('replace the full screen button tooltip', function() {
expect($('.add-fullscreen')).toHaveAttr('title', 'Exit fullscreen');
expect($('.add-fullscreen')).toHaveAttr('title', 'Exit full browser');
});
it('add the video-fullscreen class', function() {
@@ -573,7 +573,7 @@
});
it('replace the full screen button tooltip', function() {
expect($('.add-fullscreen')).toHaveAttr('title', 'Fullscreen');
expect($('.add-fullscreen')).toHaveAttr('title', 'Fill browser');
});
it('remove the video-fullscreen class', function() {

3
common/lib/xmodule/xmodule/js/spec/video/video_quality_control_spec.js
View File

@@ -24,7 +24,8 @@
initialize();
});
it('render the quality control', function() {
// Disabled when ARIA markup was added to the anchor
xit('render the quality control', function() {
expect(videoControl.secondaryControlsEl.html()).toContain("<a href=\"#\" class=\"quality_control\" title=\"HD\">");
});

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

@@ -63,6 +63,14 @@ function () {
state.videoControl.el.addClass('html5');
state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout);
}
// ARIA
// Let screen readers know that this anchor, representing the slider
// handle, behaves as a slider named 'video slider'.
state.videoControl.sliderEl.find('.ui-slider-handle').attr({
'role': 'slider',
'title': gettext('video slider')
});
}
// function _bindHandlers(state)
@@ -168,12 +176,14 @@ function () {
this.videoControl.fullScreenState = false;
fullScreenClassNameEl.removeClass('video-fullscreen');
this.isFullScreen = false;
this.videoControl.fullScreenEl.attr('title', gettext('Fullscreen'));
this.videoControl.fullScreenEl.attr('title', gettext('Fill browser'))
.text(gettext('Fill browser'));
} else {
this.videoControl.fullScreenState = true;
fullScreenClassNameEl.addClass('video-fullscreen');
this.isFullScreen = true;
this.videoControl.fullScreenEl.attr('title', gettext('Exit fullscreen'));
this.videoControl.fullScreenEl.attr('title', gettext('Exit full browser'))
.text(gettext('Exit full browser'));
}
this.trigger('videoCaption.resize', null);

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

@@ -54,6 +54,18 @@ function () {
function _buildHandle(state) {
state.videoProgressSlider.handle = state.videoProgressSlider.el.find('.ui-slider-handle');
// 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
// handle, behaves as a slider named 'video position'.
state.videoProgressSlider.handle.attr({
'role': 'slider',
'title': 'video position',
'aria-disabled': false,
'aria-valuetext': getTimeDescription(state.videoProgressSlider.slider.slider('option', 'value'))
});
}
// ***************************************************************
@@ -74,6 +86,11 @@ function () {
this.videoProgressSlider.frozen = true;
this.trigger('videoPlayer.onSlideSeek', {'type': 'onSlideSeek', 'time': ui.value});
// ARIA
this.videoProgressSlider.handle.attr(
'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)
);
}
function onStop(event, ui) {
@@ -83,6 +100,11 @@ function () {
this.trigger('videoPlayer.onSlideSeek', {'type': 'onSlideSeek', 'time': ui.value});
// ARIA
this.videoProgressSlider.handle.attr(
'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)
);
setTimeout(function() {
_this.videoProgressSlider.frozen = false;
}, 200);
@@ -99,6 +121,48 @@ function () {
}
}
// Returns a string describing the current time of video in hh:mm:ss format.
function getTimeDescription(time) {
var seconds = Math.floor(time),
minutes = Math.floor(seconds / 60),
hours = Math.floor(minutes / 60),
hrStr, minStr, secStr;
seconds = seconds % 60;
minutes = minutes % 60;
hrStr = hours.toString(10);
minStr = minutes.toString(10);
secStr = seconds.toString(10);
if (hours) {
hrStr += (hours < 2 ? ' hour ' : ' hours ');
if (minutes) {
minStr += (minutes < 2 ? ' minute ' : ' minutes ');
} else {
minStr += ' 0 minutes ';
}
if (seconds) {
secStr += (seconds < 2 ? ' second ' : ' seconds ');
} else {
secStr += ' 0 seconds ';
}
return hrStr + minStr + secStr;
} else if (minutes) {
minStr += (minutes < 2 ? ' minute ' : ' minutes ');
if (seconds) {
secStr += (seconds < 2 ? ' second ' : ' seconds ');
} else {
secStr += ' 0 seconds ';
}
return minStr + secStr;
} else if (seconds) {
secStr += (seconds < 2 ? ' second ' : ' seconds ');
return secStr;
}
return '0 seconds';
}
});
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));

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

@@ -62,6 +62,35 @@ function () {
});
state.videoVolumeControl.el.toggleClass('muted', state.videoVolumeControl.currentVolume === 0);
// ARIA
// Let screen readers know that:
// This anchor behaves as a button named 'Volume'.
var buttonStr = gettext(
state.videoVolumeControl.currentVolume === 0
? 'Volume muted'
: 'Volume'
);
// We add the aria-label attribute because the title attribute cannot be
// read.
state.videoVolumeControl.buttonEl.attr('aria-label', buttonStr);
// Let screen readers know that this anchor, representing the slider
// handle, behaves as a slider named 'volume'.
var volumeSlider = state.videoVolumeControl.slider;
state.videoVolumeControl.volumeSliderHandleEl = state.videoVolumeControl
.volumeSliderEl
.find('.ui-slider-handle');
state.videoVolumeControl.volumeSliderHandleEl.attr({
'role': 'slider',
'title': 'volume',
'aria-disabled': false,
'aria-valuemin': volumeSlider.slider('option', 'min'),
'aria-valuemax': volumeSlider.slider('option', 'max'),
'aria-valuenow': volumeSlider.slider('option', 'value'),
'aria-valuetext': getVolumeDescription(volumeSlider.slider('option', 'value'))
});
}
/**
@@ -147,6 +176,18 @@ function () {
});
this.trigger('videoPlayer.onVolumeChange', ui.value);
// ARIA
this.videoVolumeControl.volumeSliderHandleEl.attr({
'aria-valuenow': ui.value,
'aria-valuetext': getVolumeDescription(ui.value)
});
this.videoVolumeControl.buttonEl.attr(
'aria-label', this.videoVolumeControl.currentVolume === 0
? gettext('Volume muted')
: gettext('Volume')
);
}
function toggleMute(event) {
@@ -155,11 +196,41 @@ function () {
if (this.videoVolumeControl.currentVolume > 0) {
this.videoVolumeControl.previousVolume = this.videoVolumeControl.currentVolume;
this.videoVolumeControl.slider.slider('option', 'value', 0);
// ARIA
this.videoVolumeControl.volumeSliderHandleEl.attr({
'aria-valuenow': 0,
'aria-valuetext': getVolumeDescription(0),
});
} else {
this.videoVolumeControl.slider.slider('option', 'value', this.videoVolumeControl.previousVolume);
// ARIA
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 'muted';
} 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';
}
return 'maximum';
}
});
}(RequireJS.requirejs, RequireJS.require, RequireJS.define));

2
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
View File

@@ -593,11 +593,13 @@ function () {
type = 'hide_transcript';
this.captionsHidden = true;
this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn on captions'));
this.videoCaption.hideSubtitlesEl.text(gettext('Turn on captions'));
this.el.addClass('closed');
} else {
type = 'show_transcript';
this.captionsHidden = false;
this.videoCaption.hideSubtitlesEl.attr('title', gettext('Turn off captions'));
this.videoCaption.hideSubtitlesEl.text(gettext('Turn off captions'));
this.el.removeClass('closed');
this.videoCaption.scrollCaption();
}

14
lms/templates/video.html
View File

@@ -42,31 +42,31 @@
<div class="video-player-post"></div>
<section class="video-controls">
<div class="slider" tabindex="0" title="Video position"></div>
<div class="slider" title="Video position"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="${_('Play')}"></a></li>
<li><a class="video_control" href="#" title="${_('Play')}" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#" title="Speeds">
<a href="#" title="${_('Speeds')}" role="button" aria-disabled="false">
<h3>${_('Speed')}</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#" title="Volume"></a>
<a href="#" title="${_('Volume')}" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="${_('Fill browser')}">${_('Fill browser')}</a>
<a href="#" class="quality_control" title="${_('HD')}">${_('HD')}</a>
<a href="#" class="add-fullscreen" title="${_('Fill browser')}" role="button" aria-disabled="false">${_('Fill browser')}</a>
<a href="#" class="quality_control" title="${_('HD')}" role="button" aria-disabled="false">${_('HD')}</a>
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}">${_('Captions')}</a>
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}" role="button" aria-disabled="false">${_('Turn off captions')}</a>
</div>
</div>
</section>