Updating video player controls with better accessibility
This commit is contained in:
Chris Rodriguez
@@ -2,7 +2,9 @@
|
||||
'use strict';
|
||||
define('video/04_video_full_screen.js', [], function () {
|
||||
var template = [
|
||||
'<button class="control add-fullscreen" aria-disabled="false">',
|
||||
'<button class="control add-fullscreen" aria-disabled="false" title="',
|
||||
gettext('Fill browser'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
|
||||
'<span class="sr control-text">',
|
||||
|
||||
@@ -7,7 +7,9 @@ define(
|
||||
[],
|
||||
function () {
|
||||
var template = [
|
||||
'<button class="control quality-control is-hidden" aria-disabled="false">',
|
||||
'<button class="control quality-control is-hidden" aria-disabled="false" title="',
|
||||
gettext('High Definition'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon icon-hd" aria-hidden="true">HD</span>', // "HD" is treated as a proper noun
|
||||
// Translator note:
|
||||
|
||||
@@ -89,7 +89,7 @@ function () {
|
||||
'aria-valuemax': state.videoPlayer.duration(),
|
||||
'aria-valuemin': '0',
|
||||
'aria-valuenow': state.videoPlayer.currentTime,
|
||||
'tabindex': '0'
|
||||
'tabindex': '0',
|
||||
'aria-label': gettext('Video position')
|
||||
});
|
||||
|
||||
|
||||
@@ -39,10 +39,13 @@ function() {
|
||||
|
||||
template: [
|
||||
'<div class="volume" role="application">',
|
||||
'<button class="control" aria-disabled="false" aria-label="',
|
||||
gettext('Volume: Click on this button to mute or unmute this video or press UP or ' +
|
||||
'DOWN buttons to increase or decrease volume level.'),
|
||||
'" aria-expanded="false">',
|
||||
'<p class="sr instructions" id="volume-instructions">',
|
||||
gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line
|
||||
'</p>',
|
||||
'<button class="control" aria-disabled="false" aria-describedby="volume-instructions"',
|
||||
'" aria-expanded="false" title="',
|
||||
gettext('Adjust video volume'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
|
||||
'<span class="sr control-text">',
|
||||
|
||||
@@ -30,10 +30,13 @@ function (Iterator) {
|
||||
SpeedControl.prototype = {
|
||||
template: [
|
||||
'<div class="speeds menu-container" role="application">',
|
||||
'<button class="control speed-button" aria-label="',
|
||||
/* jshint maxlen:200 */
|
||||
gettext('Speed: Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'),
|
||||
'" aria-disabled="false" aria-expanded="false">',
|
||||
'<p class="sr instructions" id="speed-instructions">',
|
||||
gettext('Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'), // jshint ignore: line
|
||||
'</p>',
|
||||
'<button class="control speed-button" aria-disabled="false" aria-expanded="false"',
|
||||
'title="',
|
||||
gettext('Adjust video speed'),
|
||||
'" aria-describedby="speed-instructions">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-caret-right" aria-hidden="true"></span>',
|
||||
'<span class="sr control-text">',
|
||||
|
||||
@@ -25,7 +25,9 @@ define('video/09_play_pause_control.js', [], function() {
|
||||
|
||||
PlayPauseControl.prototype = {
|
||||
template: [
|
||||
'<button class="control video_control play" aria-disabled="false">',
|
||||
'<button class="control video_control play" aria-disabled="false" title="',
|
||||
gettext('Play'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-play" aria-hidden="true"></span>',
|
||||
'<span class="sr control-text">',
|
||||
@@ -77,6 +79,7 @@ define('video/09_play_pause_control.js', [], function() {
|
||||
this.el
|
||||
.addClass('pause')
|
||||
.removeClass('play')
|
||||
.attr('title', gettext('Pause'))
|
||||
.find('.icon')
|
||||
.removeClass('fa-play')
|
||||
.addClass('fa-pause');
|
||||
@@ -90,6 +93,7 @@ define('video/09_play_pause_control.js', [], function() {
|
||||
this.el
|
||||
.removeClass('pause')
|
||||
.addClass('play')
|
||||
.attr('title', gettext('Play'))
|
||||
.find('.icon')
|
||||
.removeClass('fa-pause')
|
||||
.addClass('fa-play');
|
||||
|
||||
@@ -25,7 +25,9 @@ define('video/09_play_skip_control.js', [], function() {
|
||||
|
||||
PlaySkipControl.prototype = {
|
||||
template: [
|
||||
'<button class="control video_control play play-skip-control">',
|
||||
'<button class="control video_control play play-skip-control" title="',
|
||||
gettext('Play'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-play" aria-hidden="true"></span>',
|
||||
'<span class="text control-text">',
|
||||
@@ -78,6 +80,7 @@ define('video/09_play_skip_control.js', [], function() {
|
||||
this.el
|
||||
.removeClass('play')
|
||||
.addClass('skip')
|
||||
.attr('title', gettext('Skip'))
|
||||
.find('.icon')
|
||||
.removeClass('fa-play')
|
||||
.addClass('fa-step-forward')
|
||||
|
||||
@@ -28,7 +28,9 @@ function() {
|
||||
|
||||
SkipControl.prototype = {
|
||||
template: [
|
||||
'<button class="control video_control skip skip-control" aria-disabled="false">',
|
||||
'<button class="control video_control skip skip-control" aria-disabled="false" title="',
|
||||
gettext('Do not show again'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
|
||||
'<span class="text control-text">',
|
||||
|
||||
@@ -95,7 +95,12 @@
|
||||
'</span>',
|
||||
'</button>',
|
||||
'<div class="lang menu-container" role="application">',
|
||||
'<button class="control language-menu" aria-label="" aria-disabled="false">',
|
||||
'<p class="sr instructions" id="lang-instructions"></p>',
|
||||
'<button class="control language-menu" aria-disabled="false"',
|
||||
'aria-describedby="lang-instructions" ',
|
||||
'title="',
|
||||
gettext('Open language menu'),
|
||||
'">',
|
||||
'<span class="icon-fallback-img">',
|
||||
'<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
|
||||
'<span class="sr control-text"></span>',
|
||||
@@ -759,8 +764,8 @@
|
||||
self.subtitlesEl.find('.transcript-end')
|
||||
.text(gettext('End of transcript. Skip to the start.'));
|
||||
|
||||
self.container.find('.menu-container .language-menu')
|
||||
.attr('aria-label', gettext('Language: Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
|
||||
self.container.find('.menu-container .instructions')
|
||||
.text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
|
||||
|
||||
self.container.find('.menu-container .control .control-text')
|
||||
.text(gettext('Open language menu.'));
|
||||
@@ -1115,6 +1120,7 @@
|
||||
|
||||
this.captionControlEl
|
||||
.addClass('is-active')
|
||||
.attr('title', gettext('Hide closed captions'))
|
||||
.find('.control-text')
|
||||
.text(gettext('Hide closed captions'));
|
||||
|
||||
@@ -1138,6 +1144,7 @@
|
||||
|
||||
this.captionControlEl
|
||||
.removeClass('is-active')
|
||||
.attr('title', gettext('Turn on closed captioning'))
|
||||
.find('.control-text')
|
||||
.text(gettext('Turn on closed captioning'));
|
||||
|
||||
@@ -1194,6 +1201,7 @@
|
||||
|
||||
transcriptControlEl
|
||||
.removeClass('is-active')
|
||||
.attr('title', gettext(text))
|
||||
.find('.control-text')
|
||||
.text(gettext(text));
|
||||
} else {
|
||||
@@ -1207,6 +1215,7 @@
|
||||
|
||||
transcriptControlEl
|
||||
.addClass('is-active')
|
||||
.attr('title', gettext(text))
|
||||
.find('.control-text')
|
||||
.text(gettext(text));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user