web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-04-15 11:56:32 +02:00
Code Releases Activity

Make the caption, subtitle, and chapter buttons more usable by screen reader users diff --git a/src/css/video-js.css b/src/css/video-js.css

Browse Source 
index daa7080..4ed6ea2 100644

Signed-off-by: Greg Kraus <gdkraus@ncsu.edu>
This commit is contained in:
Greg Kraus 2013-01-20 07:26:48 -05:00
parent 20e9a9feb5
commit e284c88afa
3 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/video-js.css
View File

@ -469,7 +469,7 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
overflow: auto;
}
.vjs-default-skin .vjs-menu-button:focus ul,
/*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }

5
src/js/controls.js vendored
View File

@ -1024,6 +1024,9 @@ vjs.MenuItem = function(player, options){
if (options['selected']) {
this.addClass('vjs-selected');
this.el_.setAttribute('aria-selected',true);
} else {
this.el_.setAttribute('aria-selected',false);
}
};
goog.inherits(vjs.MenuItem, vjs.Button);
@ -1042,7 +1045,9 @@ vjs.MenuItem.prototype.onClick = function(){
vjs.MenuItem.prototype.selected = function(selected){
if (selected) {
this.addClass('vjs-selected');
this.el_.setAttribute('aria-selected',true);
} else {
this.removeClass('vjs-selected');
this.el_.setAttribute('aria-selected',false);
}
};

57
src/js/tracks.js
View File

@ -813,16 +813,22 @@ vjs.TextTrackButton = function(player, options){
if (this.items.length === 0) {
this.hide();
}
this.on('keyup', this.onKeyPress);
this.el_.setAttribute('aria-haspopup',true);
this.el_.setAttribute('role','button');
};
goog.inherits(vjs.TextTrackButton, vjs.Button);
vjs.TextTrackButton.prototype.buttonPressed = false;
vjs.TextTrackButton.prototype.createMenu = function(){
var menu = new vjs.Menu(this.player_);
// Add a title list item to the top
menu.el().appendChild(vjs.createEl('li', {
className: 'vjs-menu-title',
innerHTML: vjs.capitalize(this.kind_)
innerHTML: vjs.capitalize(this.kind_),
tabindex: -1
}));
// Add an OFF menu item to turn all tracks off
@ -863,6 +869,11 @@ vjs.TextTrackButton.prototype.buildCSSClass = function(){
// Focus - Add keyboard functionality to element
vjs.TextTrackButton.prototype.onFocus = function(){
// This function is not needed anymore. Instead, the keyboard functionality is handled by
// treating the button as triggering a submenu. When the button is pressed, the submenu
// appears. Pressing the button again makes the submenu disappear.
/*
// Show the menu, and keep showing when the menu items are in focus
this.menu.lockShowing();
// this.menu.el_.style.display = 'block';
@ -871,6 +882,7 @@ vjs.TextTrackButton.prototype.onFocus = function(){
vjs.one(this.menu.el_.childNodes[this.menu.el_.childNodes.length - 1], 'blur', vjs.bind(this, function(){
this.menu.unlockShowing();
}));
*/
};
// Can't turn off list display that we turned on with focus, because list would go away.
vjs.TextTrackButton.prototype.onBlur = function(){};
@ -883,13 +895,51 @@ vjs.TextTrackButton.prototype.onClick = function(){
this.menu.unlockShowing();
this.el_.blur();
}));
if (this.buttonPressed){
this.unpressButton();
} else {
this.pressButton();
}
};
vjs.TextTrackButton.prototype.onKeyPress = function(event){
// Check for space bar (32) or enter (13) keys
if (event.which == 32 || event.which == 13) {
event.preventDefault();
if (this.buttonPressed){
this.unpressButton();
} else {
this.pressButton();
}
}
// Check for escape (27) key
if (event.which == 27){
event.preventDefault();
if (this.buttonPressed){
this.unpressButton();
}
}
};
vjs.TextTrackButton.prototype.pressButton = function(){
this.buttonPressed = true;
this.menu.lockShowing();
this.el_.setAttribute('aria-pressed',true);
this.el_.children[1].children[0].focus(); // set the focus to the title of the submenu
};
vjs.TextTrackButton.prototype.unpressButton = function(){
this.buttonPressed = false;
this.menu.unlockShowing();
this.el_.setAttribute('aria-pressed',false);
};
/**
* @constructor
*/
vjs.CaptionsButton = function(player, options, ready){
goog.base(this, player, options, ready);
this.el_.setAttribute('aria-label','Captions Menu');
};
goog.inherits(vjs.CaptionsButton, vjs.TextTrackButton);
vjs.CaptionsButton.prototype.kind_ = 'captions';
@ -901,6 +951,7 @@ vjs.CaptionsButton.prototype.className = 'vjs-captions-button';
*/
vjs.SubtitlesButton = function(player, options, ready){
goog.base(this, player, options, ready);
this.el_.setAttribute('aria-label','Subtitles Menu');
};
goog.inherits(vjs.SubtitlesButton, vjs.TextTrackButton);
vjs.SubtitlesButton.prototype.kind_ = 'subtitles';
@ -914,6 +965,7 @@ vjs.SubtitlesButton.prototype.className = 'vjs-subtitles-button';
*/
vjs.ChaptersButton = function(player, options, ready){
goog.base(this, player, options, ready);
this.el_.setAttribute('aria-label','Chapters Menu');
};
goog.inherits(vjs.ChaptersButton, vjs.TextTrackButton);
vjs.ChaptersButton.prototype.kind_ = 'chapters';
@ -961,7 +1013,8 @@ vjs.ChaptersButton.prototype.createMenu = function(){
menu.el_.appendChild(vjs.createEl('li', {
className: 'vjs-menu-title',
innerHTML: vjs.capitalize(this.kind_)
innerHTML: vjs.capitalize(this.kind_),
tabindex: -1
}));
if (chaptersTrack) {