Navigation Menubar Example: Fix Tabbing Out (pull #510)

Fix the form of the bug in issue #346 where the submenus were not closing if the user tabs out of the menubar when focus is in the menubar itself.

examples/menubar/menubar-1/js/MenubarItemLinks.js

@@ -1,42 +1,10 @@
 /*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   MenubarItemLinks.js
-*
-*   Desc:   Menubar Menuitem widget that implements ARIA Authoring Practices
-*           for a menu of links
-*
-*   Author: Jon Gunderson, Ku Ja Eun and Nicholas Hoyt
-*/
-
-/*
-*   @constructor MenubarItem
-*
-*   @desc
-*       Object that configures menu item elements by setting tabIndex
-*       and registering itself to handle pertinent events.
-*
-*       While menuitem elements handle many keydown events, as well as
-*       focus and blur events, they do not maintain any state variables,
-*       delegating those responsibilities to its associated menu object.
-*
-*       Consequently, it is only necessary to create one instance of
-*       MenubarItem from within the menu object; its configure method
-*       can then be called on each menuitem element.
-*
-*   @param domNode
-*       The DOM element node that serves as the menu item container.
-*       The menuObj PopupMenu is responsible for checking that it has
-*       requisite metadata, e.g. role="menuitem".
-*
-*   @param menuObj
-*       The PopupMenu object that is a delegate for the menu DOM element
-*       that contains the menuitem element.
 */
 var MenubarItem = function (domNode, menuObj) {
 
-  this.menubar = menuObj;
+  this.menu = menuObj;
   this.domNode = domNode;
   this.popupMenu = false;
 
@@ -103,12 +71,12 @@ MenubarItem.prototype.handleKeydown = function (event) {
       break;
 
     case this.keyCode.LEFT:
-      this.menubar.setFocusToPreviousItem(this);
+      this.menu.setFocusToPreviousItem(this);
       flag = true;
       break;
 
     case this.keyCode.RIGHT:
-      this.menubar.setFocusToNextItem(this);
+      this.menu.setFocusToNextItem(this);
       flag = true;
       break;
 
@@ -122,19 +90,24 @@ MenubarItem.prototype.handleKeydown = function (event) {
 
     case this.keyCode.HOME:
     case this.keyCode.PAGEUP:
-      this.menubar.setFocusToFirstItem();
+      this.menu.setFocusToFirstItem();
       flag = true;
       break;
 
     case this.keyCode.END:
     case this.keyCode.PAGEDOWN:
-      this.menubar.setFocusToLastItem();
+      this.menu.setFocusToLastItem();
       flag = true;
       break;
 
+    case this.keyCode.TAB:
+      this.popupMenu.close(true);
+      break;
+
+
     default:
       if (isPrintableCharacter(char)) {
-        this.menubar.setFocusByFirstCharacter(this, char);
+        this.menu.setFocusByFirstCharacter(this, char);
         flag = true;
       }
       break;
@@ -156,11 +129,11 @@ MenubarItem.prototype.setExpanded = function (value) {
 };
 
 MenubarItem.prototype.handleFocus = function (event) {
-  this.menubar.hasFocus = true;
+  this.menu.hasFocus = true;
 };
 
 MenubarItem.prototype.handleBlur = function (event) {
-  this.menubar.hasFocus = false;
+  this.menu.hasFocus = false;
 };
 
 MenubarItem.prototype.handleMouseover = function (event) {

examples/menubar/menubar-1/js/MenubarLinks.js

@@ -1,24 +1,6 @@
 /*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   Menubar.js
-*
-*   Desc:   Menubar widget that implements ARIA Authoring Practices
-*
-*   Author: Jon Gunderson, Ku Ja Eun and Nicholas Hoyt
-*/
-
-/*
-*   @constructor Menubar
-*
-*   @desc
-*       Wrapper object for a menubar (with nested submenus of links)
-*
-*   @param domNode
-*       The DOM element node that serves as the menubar container. Each
-*       child element of menubarNode that represents a menubaritem must
-*       be an A element
 */
 
 var Menubar = function (domNode) {
@@ -45,6 +27,8 @@ var Menubar = function (domNode) {
     e = e.nextElementSibling;
   }
 
+  this.isMenubar = true;
+
   this.domNode = domNode;
 
   this.menubarItems = []; // See Menubar init method

examples/menubar/menubar-1/js/PopupMenuItemLinks.js

@@ -1,28 +1,6 @@
 /*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   MenuItem.js
-*
-*   Desc:   Popup Menu Menuitem widget that implements ARIA Authoring Practices
-*
-*   Author: Jon Gunderson, Ku Ja Eun and Nicholas Hoyt
-*/
-
-/*
-*   @constructor MenuItem
-*
-*   @desc
-*       Wrapper object for a simple menu item in a popup menu
-*
-*   @param domNode
-*       The DOM element node that serves as the menu item container.
-*       The menuObj PopupMenu is responsible for checking that it has
-*       requisite metadata, e.g. role="menuitem".
-*
-*   @param menuObj
-*       The object that is a wrapper for the PopupMenu DOM element that
-*       contains the menu item DOM element. See PopupMenu.js
 */
 var MenuItem = function (domNode, menuObj) {
 
@@ -66,7 +44,7 @@ MenuItem.prototype.init = function () {
   var nextElement = this.domNode.nextElementSibling;
 
   if (nextElement && nextElement.tagName === 'UL') {
-    this.popupMenu = new PopupMenu(nextElement, this.menu, this);
+    this.popupMenu = new PopupMenu(nextElement, this);
     this.popupMenu.init();
   }
 
@@ -119,12 +97,6 @@ MenuItem.prototype.handleKeydown = function (event) {
       flag = true;
       break;
 
-    case this.keyCode.ESC:
-      this.menu.setFocusToController();
-      this.menu.close(true);
-      flag = true;
-      break;
-
     case this.keyCode.UP:
       this.menu.setFocusToPreviousItem(this);
       flag = true;
@@ -142,6 +114,7 @@ MenuItem.prototype.handleKeydown = function (event) {
       break;
 
     case this.keyCode.RIGHT:
+      console.log('[MenuItem][handleKeydown]: ' + this.menu.controller.isMenubarItem);
       if (this.popupMenu) {
         this.popupMenu.open();
         this.popupMenu.setFocusToFirstItem();
@@ -165,9 +138,14 @@ MenuItem.prototype.handleKeydown = function (event) {
       flag = true;
       break;
 
-    case this.keyCode.TAB:
+    case this.keyCode.ESC:
       this.menu.setFocusToController();
       this.menu.close(true);
+      flag = true;
+      break;
+
+    case this.keyCode.TAB:
+      this.menu.setFocusToController();
       break;
 
     default:
@@ -200,16 +178,10 @@ MenuItem.prototype.handleClick = function (event) {
 
 MenuItem.prototype.handleFocus = function (event) {
   this.menu.hasFocus = true;
-  if (!this.menu.controller.isMenubarItem) {
-    this.menu.controller.hasFocus = true;
-  }
 };
 
 MenuItem.prototype.handleBlur = function (event) {
   this.menu.hasFocus = false;
-  if (!this.menu.controller.isMenubarItem) {
-    this.menu.controller.hasFocus = false;
-  }
   setTimeout(this.menu.close.bind(this.menu, false), 300);
 };