web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-17 21:18:27 +02:00
Code Releases Activity

Changed the MenuItem and the Volume Control bar to gain focus when using tab navigation.

Browse Source 
Previously, they could not be navigated to via the keyboard.
Fixs #1517.
Tested via manaul cross-browser tests using keyboard navigation (chrome, firefox, safari, and IE 11 ).
This commit is contained in:
Ryan Plessner 2014-09-19 13:58:19 -04:00
parent 4b64a92a2d
commit 53d690c212
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/video-js.less
View File

@ -717,7 +717,8 @@ easily in the skin designer. http://designer.videojs.com/
}
.vjs-default-skin .vjs-menu {
display: none;
z-index: -1;
display: block;
position: absolute;
bottom: 0;
left: 0em; /* (Width of vjs-menu - width of button) / 2 */
@ -748,8 +749,9 @@ easily in the skin designer. http://designer.videojs.com/
.box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
}
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
display: block;
.vjs-default-skin .vjs-menu-button:hover .vjs-menu,
.vjs-default-skin .vjs-menu-button .vjs-visible-menu {
z-index: 1;
}
.vjs-default-skin .vjs-menu-button ul li {
list-style: none;

6
src/js/control-bar/volume-menu-button.js
View File

@ -30,6 +30,12 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){
contentElType: 'div'
});
var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({'vertical': true}, this.options_.volumeBar));
vc.on('focus', function() {
menu.addClass('vjs-visible-menu');
});
vc.on('blur', function() {
menu.removeClass('vjs-visible-menu');
});
menu.addChild(vc);
return menu;
};

9
src/js/menu.js
View File

@ -139,9 +139,17 @@ vjs.MenuButton.prototype.createMenu = function(){
this.items = this['createItems']();
if (this.items) {
var focusHandler = function(){
menu.addClass('vjs-visible-menu');
};
var blurHandler = function() {
menu.removeClass('vjs-visible-menu');
};
// Add menu items to the menu
for (var i = 0; i < this.items.length; i++) {
menu.addItem(this.items[i]);
this.items[i].on('focus', focusHandler);
this.items[i].on('blur', blurHandler);
}
}
@ -213,4 +221,3 @@ vjs.MenuButton.prototype.unpressButton = function(){
this.menu.unlockShowing();
this.el_.setAttribute('aria-pressed', false);
};