From 53d690c21270462da7868ba83b65d5b061f498de Mon Sep 17 00:00:00 2001 From: Ryan Plessner Date: Fri, 19 Sep 2014 13:58:19 -0400 Subject: [PATCH 1/3] 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 cd2be602d6..5c349ac701 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 b3a634397f..f50eb5b116 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 55558a9c0c..a1b73b4026 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); }; - From 757c592b4aa43e0a072eddfc430cc480f7593bae Mon Sep 17 00:00:00 2001 From: Ryan Plessner Date: Tue, 23 Sep 2014 15:26:09 -0400 Subject: [PATCH 2/3] reverted the submenu behavior. it now needs to activated before it menuitems become tab targets. The volume control bar now uses the vjs-lock-showing class instead of new class. --- src/css/video-js.less | 10 +++++++++- src/js/control-bar/volume-menu-button.js | 4 ++-- src/js/menu.js | 8 -------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/css/video-js.less b/src/css/video-js.less index 5c349ac701..eb42aae5e8 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -733,6 +733,11 @@ easily in the skin designer. http://designer.videojs.com/ border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */ } +.vjs-default-skin .vjs-control-content .vjs-menu { + z-index: 0; + display: none; +} + /* Button Pop-up Menu */ .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content { display: block; @@ -750,9 +755,12 @@ easily in the skin designer. http://designer.videojs.com/ } .vjs-default-skin .vjs-menu-button:hover .vjs-menu, -.vjs-default-skin .vjs-menu-button .vjs-visible-menu { +.vjs-default-skin .vjs-menu-button .vjs-menu.vjs-lock-showing { z-index: 1; } +.vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing { + display: block; +} .vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index f50eb5b116..52797e4546 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -31,10 +31,10 @@ vjs.VolumeMenuButton.prototype.createMenu = function(){ }); var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({'vertical': true}, this.options_.volumeBar)); vc.on('focus', function() { - menu.addClass('vjs-visible-menu'); + menu.lockShowing(); }); vc.on('blur', function() { - menu.removeClass('vjs-visible-menu'); + menu.unlockShowing(); }); menu.addChild(vc); return menu; diff --git a/src/js/menu.js b/src/js/menu.js index a1b73b4026..4745debe4e 100644 --- a/src/js/menu.js +++ b/src/js/menu.js @@ -139,17 +139,9 @@ 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); } } From f53583e2757e01dbe535197720df8054c312fa81 Mon Sep 17 00:00:00 2001 From: Ryan Plessner Date: Thu, 25 Sep 2014 09:09:44 -0400 Subject: [PATCH 3/3] Hide the volume bar by setting its content's width to zero. --- src/css/video-js.less | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/css/video-js.less b/src/css/video-js.less index eb42aae5e8..bbe39d75bf 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -717,15 +717,18 @@ easily in the skin designer. http://designer.videojs.com/ } .vjs-default-skin .vjs-menu { - z-index: -1; - display: block; + display: none; position: absolute; bottom: 0; left: 0em; /* (Width of vjs-menu - width of button) / 2 */ width: 0em; height: 0em; margin-bottom: 3em; +} +.vjs-default-skin .vjs-menu, +.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu, +.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing { border-left: 2em solid transparent; border-right: 2em solid transparent; @@ -733,9 +736,10 @@ easily in the skin designer. http://designer.videojs.com/ border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */ } -.vjs-default-skin .vjs-control-content .vjs-menu { - z-index: 0; - display: none; +.vjs-default-skin .vjs-volume-menu-button .vjs-menu { + display: block; + width: 0px; + border: none; } /* Button Pop-up Menu */ @@ -753,11 +757,14 @@ easily in the skin designer. http://designer.videojs.com/ .background-color-with-alpha(@control-bg-color, @control-bg-alpha); .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2)); } - -.vjs-default-skin .vjs-menu-button:hover .vjs-menu, -.vjs-default-skin .vjs-menu-button .vjs-menu.vjs-lock-showing { - z-index: 1; +.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content { + width: 0px; +} +.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content, +.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content { + width: 10em; } +.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu, .vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing { display: block; }