From 53d690c21270462da7868ba83b65d5b061f498de Mon Sep 17 00:00:00 2001
From: Ryan Plessner <ryan.plessner@cantinaconsulting.com>
Date: Fri, 19 Sep 2014 13:58:19 -0400
Subject: [PATCH] Changed the MenuItem and the Volume Control bar to gain focus
when using tab navigation. 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 ).
---
src/css/video-js.less | 8 +++++---
src/js/control-bar/volume-menu-button.js | 6 ++++++
src/js/menu.js | 9 ++++++++-
3 files changed, 19 insertions(+), 4 deletions(-)
diff --git a/src/css/video-js.less b/src/css/video-js.less
index cd2be602d..5c349ac70 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -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;
diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js
index b3a634397..f50eb5b11 100644
--- a/src/js/control-bar/volume-menu-button.js
+++ b/src/js/control-bar/volume-menu-button.js
@@ -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;
};
diff --git a/src/js/menu.js b/src/js/menu.js
index 55558a9c0..a1b73b402 100644
--- a/src/js/menu.js
+++ b/src/js/menu.js
@@ -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);
};
-