Editor Menubar Example: Add aria-disabled and additional documentation

Related to issue #409:

1. Add aria-disabled to menuitems for for increasing and decreasing font size. Disable larger when size is already largest and smaller when size is already smallest.
2. Add documentation to roles, states, and properties for aria-disabled.
3. Add documentation to roles, states, and properties for names calculated from content.

examples/menubar/menubar-1/js/PopupMenuLinks.js

@@ -241,7 +241,7 @@ PopupMenu.prototype.open = function () {
     this.domNode.style.zIndex = 100;
   }
 
-  this.controller.domNode.setAttribute('aria-expanded', 'true');
+  this.domNode.setAttribute('aria-expanded', 'true');
 
 };
 
@@ -256,6 +256,6 @@ PopupMenu.prototype.close = function (force) {
   if (force || (!this.hasFocus && !this.hasHover && !controllerHasHover)) {
     this.domNode.style.display = 'none';
     this.domNode.style.zIndex = 0;
-    this.controller.domNode.setAttribute('aria-expanded', 'false');
+    this.domNode.setAttribute('aria-expanded', 'false');
   }
 };

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

@@ -142,6 +142,22 @@ PopupMenuAction.prototype.updateMenuStates = function () {
     }
   }
 
+  // Update the radio buttons for font, in case they were updated using the larger 
+  // smaller font menu items
+
+  var rbs = this.domNode.querySelectorAll('[role=menuitemradio]');
+
+  for (var i = 0; i < rbs.length; i++) {
+    var rb = rbs[i];
+
+    if (this.actionManager.fontSize === rb.textContent.toLowerCase()) {
+      rb.setAttribute('aria-checked', 'true');
+    }
+    else {
+      rb.setAttribute('aria-checked', 'false');
+    }
+  }
+
 };
 
 /* EVENT HANDLERS */

examples/menubar/menubar-2/js/styleManager.js

@@ -51,7 +51,7 @@ StyleManager.prototype.setItalic = function (flag) {
     this.node.style.fontStyle = 'italic';
   }
   else {
-    this.node.style.fontStyle = 'none';
+    this.node.style.fontStyle = 'normal';
   }
 };
 

examples/menubar/menubar-2/menubar-2.html

@@ -90,8 +90,8 @@ <h2 id="ex1_label">Example</h2>
         <li role="menuitem" aria-haspopup="true" aria-expanded="false">
           <span>Size</span>
           <ul role="menu" aria-label="Size" >
-            <li role="menuitem" rel="font-smaller">Smaller</li>
-            <li role="menuitem" rel="font-larger">Larger</li>
+            <li role="menuitem" rel="font-smaller" aria-disabled="false">Smaller</li>
+            <li role="menuitem" rel="font-larger"  aria-disabled="false">Larger</li>
             <li role="separator"></li>
             <li>
               <ul role="group" rel="font-size" aria-label="Font Sizes">
@@ -366,7 +366,10 @@ <h3 id="rps1_label">Menubar</h3>
               <code>li</code>
             </td>
             <td>
-              Identifies the element as a menu item within the menubar.
+              <ul>
+                <li>Identifies the element as a menu item within the menubar.</li>
+                <li>Accessible name comes from the text content.</li>
+              </ul>  
             </td>
           </tr>
           <tr>
@@ -497,7 +500,10 @@ <h3 id="rps2_label">Submenu</h3>
             <code>li</code>
           </td>
           <td>
-            Identifies the element as an item in the submenu.
+            <ul>
+              <li>Identifies the element as an item in the submenu.</li>
+              <li>Accessible name comes from the text content.</li>
+            </ul>
           </td>
         </tr>
         <tr>
@@ -512,6 +518,30 @@ <h3 id="rps2_label">Submenu</h3>
             Makes the item focusable but <strong>not</strong> part of the page <kbd>tab</kbd> sequence.
           </td>
         </tr>
+        <tr>
+          <td></td>
+          <th scope="row">
+            <code>aria-disabled=&quot;false&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Used on the font size "Smaller" and "Larger" options to indicate they are active.
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <th scope="row">
+            <code>aria-disabled=&quot;true&quot;</code>
+          </th>
+          <td>
+            <code>li</code>
+          </td>
+          <td>
+            Used on the font size "Smaller" and "Larger" options to indicate one of the options is <strong>not</strong> active because the largest or smallest font has been selected.
+          </td>
+        </tr>
         <tr>
           <th scope="row">
             <code>menuitemcheckbox</code>
@@ -521,7 +551,10 @@ <h3 id="rps2_label">Submenu</h3>
             <code>li</code>
           </td>
           <td>
-            Identifies the element as a <code>menuitemcheckbox</code>.
+            <ul>
+              <li>Identifies the element as a <code>menuitemcheckbox</code>.</li>
+              <li>Accessible name comes from the text content.</li>
+            </ul>  
           </td>
         </tr>
         <tr>
@@ -610,6 +643,9 @@ <h3 id="rps2_label">Submenu</h3>
                 When all items in a submenu are members of the same radio group,
                 the group is defined by the <code>menu</code> element; a <code>group</code> element is not necessary.
               </li>
+              <li>
+                Accessible name comes from the text content.
+              </li>
             </ul>
           </td>
         </tr>