Menubar Example: Change Space Bar Behavior (pull #340)

This commit includes changes made by @jongund for issue #324.

It includes the following changes.

1. Behavior of space bar: 
When focus is on menuitemradio or menuitemcheckbox, space will now  activate the item without closing the menu.
Enter and click still activate and close the menu.
2. Removed the initialization javascript from the html file and put it into a new file -- menubar-2-init.js.
3. Add documentation to the keyboard table in the html file about the optional space bar behavior.

These changes were originally part of pull #332, but merging 332 was too complicated due to conflicts with files outside of the menubar pattern.
So, @mcking65 copied the menubar pattern changes into a fresh branch made from the latest master and created pull #340.
Pull #348 added additional commits before the squash and merge.

examples/menubar/menubar-2/css/menubarAction.css

@@ -1,6 +1,8 @@
 ul[role="menubar"] {
-  margin: 10px;
-  padding: 10px;
+  margin: 0;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding: 0.25em;
   font-size: 110%;
   list-style: none;
   background-color: #EEEEEE;
@@ -82,16 +84,16 @@ ul[role="menubar"] [role="menu"] [role="separator"]:hover {
 ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true'],
 ul[role="menubar"] [role="menuitemradio"][aria-checked='true'] {
   padding-left: 0.5em;
+  padding-right: 1.25em;
 }
 
 ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true']:before,
 ul[role="menubar"] [role="menuitemradio"][aria-checked='true']:before {
   content: url('../images/check-brown.png');
-  padding-right: 0.25em;
+  padding-right: 0.3em;
 }
 
 
-
 /*
 * Text area styles
 */

examples/menubar/menubar-2/js/MenubarAction.js

@@ -63,9 +63,11 @@ var MenubarAction = function (domNode) {
 *       Traverse menubar children for A elements to configure each A element as a ARIA menuitem
 *       and populate menuitems array. Initialize firstItem and lastItem properties.
 */
-MenubarAction.prototype.init = function () {
+MenubarAction.prototype.init = function (actionManager) {
   var menubarItem, childElement, menuElement, textContent, numItems;
 
+  this.actionManager = actionManager;
+
   this.domNode.setAttribute('role', 'menubar');
 
   // Traverse the element children of menubarNode: configure each with
@@ -100,12 +102,10 @@ MenubarAction.prototype.init = function () {
 MenubarAction.prototype.setFocusToItem = function (newItem) {
   var flag = false;
   var newItem;
-  console.log(newItem);
   for (var i = 0; i < this.menubarItems.length; i++) {
     var mbi = this.menubarItems[i];
     if (mbi.domNode.tabIndex == 0) {
       flag = mbi.domNode.getAttribute('aria-expanded') === 'true';}
-    console.log(flag);
     mbi.domNode.tabIndex = -1;
     if (mbi.popupMenu) {
       mbi.popupMenu.close();

examples/menubar/menubar-2/js/MenubarItemAction.js

@@ -78,7 +78,7 @@ MenubarItemAction.prototype.init = function () {
   var nextElement = this.domNode.nextElementSibling;
 
   if (nextElement && nextElement.tagName === 'UL') {
-    this.popupMenu = new PopupMenuAction(nextElement, this);
+    this.popupMenu = new PopupMenuAction(nextElement, this, this.menubar.actionManager);
     this.popupMenu.init();
   }
 

examples/menubar/menubar-2/js/PopupMenuAction.js

@@ -32,7 +32,7 @@
 *          domNode has responded to a mouseover event with no subsequent
 *          mouseout event having occurred.
 */
-var PopupMenuAction = function (domNode, controllerObj) {
+var PopupMenuAction = function (domNode, controllerObj, actionManager) {
   var elementChildren,
       msgPrefix = 'PopupMenu constructor argument domNode ';
 
@@ -58,6 +58,7 @@ var PopupMenuAction = function (domNode, controllerObj) {
 
   this.domNode = domNode;
   this.controller = controllerObj;
+  this.actionManager = actionManager;
 
   this.menuitems = []; // see PopupMenu init method
   this.firstChars = []; // see PopupMenu init method
@@ -119,6 +120,30 @@ PopupMenuAction.prototype.init = function () {
   }
 };
 
+PopupMenuAction.prototype.updateMenuStates = function () {
+
+  var item = this.domNode.querySelector('[rel="font-larger"]');
+  if (item) {
+    if (this.actionManager.isMaxFontSize()) {
+      item.setAttribute('aria-disabled', 'true');
+    }
+    else {
+      item.setAttribute('aria-disabled', 'false');
+    }
+  }
+
+  var item = this.domNode.querySelector('[rel="font-smaller"]');
+  if (item) {
+    if (this.actionManager.isMinFontSize()) {
+      item.setAttribute('aria-disabled', 'true');
+    }
+    else {
+      item.setAttribute('aria-disabled', 'false');
+    }
+  }
+
+};
+
 /* EVENT HANDLERS */
 
 PopupMenuAction.prototype.handleMouseover = function (event) {

examples/menubar/menubar-2/js/MenuItemAction.js → examples/menubar/menubar-2/js/PopupMenuItemAction.js

@@ -61,6 +61,58 @@ MenuItem.prototype.init = function () {
 
 };
 
+MenuItem.prototype.activateMenuitem = function (node) {
+
+  var role  = node.getAttribute('role');
+  var value = node.textContent;
+  var option = node.getAttribute('rel');
+  var item;
+  // flag is used to signal whether a menu should close or not
+  var flag = true;
+
+  if (typeof option !== 'string') {
+    option = node.parentNode.getAttribute('rel');
+  }
+
+  if (role === 'menuitem') {
+    this.menu.actionManager.setOption(option, value);
+  }
+  else {
+    if (role === 'menuitemcheckbox') {
+      if (node.getAttribute('aria-checked') == 'true') {
+        this.menu.actionManager.setOption(option, false);
+        node.setAttribute('aria-checked', 'false');
+      }
+      else {
+        this.menu.actionManager.setOption(option, true);
+        node.setAttribute('aria-checked', 'true');
+      }
+      flag = false;
+    }
+    else {
+      if (role === 'menuitemradio') {
+
+        this.menu.actionManager.setOption(option, value);
+
+        item = node.parentNode.firstElementChild;
+        while (item) {
+          if (item.getAttribute('role') === 'menuitemradio') {
+            item.setAttribute('aria-checked', 'false');
+          }
+          item = item.nextElementSibling;
+        }
+        node.setAttribute('aria-checked', 'true');
+        flag = false;
+      }
+    }
+  }
+
+  this.menu.updateMenuStates();
+
+  return flag;
+
+};
+
 /* EVENT HANDLERS */
 
 MenuItem.prototype.handleKeydown = function (event) {
@@ -76,23 +128,10 @@ MenuItem.prototype.handleKeydown = function (event) {
   switch (event.keyCode) {
     case this.keyCode.SPACE:
     case this.keyCode.RETURN:
-      // Create simulated mouse event to mimic the behavior of ATs
-      // and let the event handler handleClick do the housekeeping.
-      try {
-        clickEvent = new MouseEvent('click', {
-          'view': window,
-          'bubbles': true,
-          'cancelable': true
-        });
-      }
-      catch (err) {
-        if (document.createEvent) {
-          // DOM Level 3 for IE 9+
-          clickEvent = document.createEvent('MouseEvents');
-          clickEvent.initEvent('click', true, true);
-        }
+      if (this.activateMenuitem(tgt)) {
+        this.menu.setFocusToController();
+        this.menu.close(true);
       }
-      tgt.dispatchEvent(clickEvent);
       flag = true;
       break;
 
@@ -156,6 +195,7 @@ MenuItem.prototype.handleKeydown = function (event) {
 };
 
 MenuItem.prototype.handleClick = function (event) {
+  this.activateMenuitem(event.currentTarget);
   this.menu.setFocusToController();
   this.menu.close(true);
 };