Editor Menubar Example: Fix tabindex management to ensure only the most recently opened menu is in the page tab sequence (Pull #3309)

Fixes bugs where using a combination of keyboard and mouse interactions caused multiple menu items to be in the page Tab sequence.

The following changes ensure that only the most recently opened menu is the only menu item in the page tab sequence regardless of how that menu item was opened or had originally received focus:
* Opening a menu via clicking now correctly updates the tabindex values of the menubar items (instead of the submenu items).
* Opening a menu via hover now correctly updates the tabindex values of the menubar items (instead of updating nothing due to erroneously passing in a menu rather than an ID).
* Opening a menu via Enter, Space, or Arrow Up/Down now updates the tabindex values of the menubar items, since it's possible for the parent menuitem to have received keyboard focus other than through a way that would have already updated the tabindex values (e.g. by pressing on it and dragging off it before releasing).

Author: alec-mitnik

content/patterns/menubar/examples/js/menubar-editor.js

@@ -514,6 +514,8 @@ class MenubarEditor {
       case ' ':
       case 'Enter':
         if (this.hasPopup(tgt)) {
+          // Need to update focus for the parent menu as well as the submenu
+          this.setFocusToMenuitem(menuId, tgt);
           popupMenuId = this.openPopup(tgt);
           this.setFocusToFirstMenuitem(popupMenuId);
         } else {
@@ -553,6 +555,8 @@ class MenubarEditor {
           flag = true;
         } else {
           if (this.hasPopup(tgt)) {
+            // Need to update focus for the parent menu as well as the submenu
+            this.setFocusToMenuitem(menuId, tgt);
             popupMenuId = this.openPopup(tgt);
             this.setFocusToFirstMenuitem(popupMenuId);
             flag = true;
@@ -599,6 +603,8 @@ class MenubarEditor {
           flag = true;
         } else {
           if (this.hasPopup(tgt)) {
+            // Need to update focus for the parent menu as well as the submenu
+            this.setFocusToMenuitem(menuId, tgt);
             popupMenuId = this.openPopup(tgt);
             this.setFocusToLastMenuitem(popupMenuId);
             flag = true;
@@ -644,7 +650,9 @@ class MenubarEditor {
       if (this.isOpen(tgt)) {
         this.closePopup(tgt);
       } else {
-        var menuId = this.openPopup(tgt);
+        this.openPopup(tgt);
+        // Need to update focus for the parent menu, not the submenu
+        var menuId = this.getMenuId(tgt);
         this.setFocusToMenuitem(menuId, tgt);
       }
     } else {
@@ -683,7 +691,8 @@ class MenubarEditor {
     var tgt = event.currentTarget;
 
     if (this.isAnyPopupOpen() && this.getMenu(tgt)) {
-      this.setFocusToMenuitem(this.getMenu(tgt), tgt);
+      var menuId = this.getMenuId(tgt);
+      this.setFocusToMenuitem(menuId, tgt);
     }
   }
 }