From d5089cb3921165eac6a353cff4b65828f96f3146 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Mon, 28 Aug 2017 17:04:57 -0500
Subject: [PATCH] updated code for updating which font size is selected and
 added documentation for the aria-disabled property

---
 .../menubar/menubar-2/js/PopupMenuAction.js   | 16 +++++++
 .../menubar-2/js/PopupMenuItemAction.js       | 17 -------
 examples/menubar/menubar-2/menubar-2.html     | 46 +++++++++++++++++--
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/examples/menubar/menubar-2/js/PopupMenuAction.js b/examples/menubar/menubar-2/js/PopupMenuAction.js
index d70ccfd9f7..a50bb256e0 100644
--- a/examples/menubar/menubar-2/js/PopupMenuAction.js
+++ b/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 */
diff --git a/examples/menubar/menubar-2/js/PopupMenuItemAction.js b/examples/menubar/menubar-2/js/PopupMenuItemAction.js
index 02a77d2985..24dc1c7762 100644
--- a/examples/menubar/menubar-2/js/PopupMenuItemAction.js
+++ b/examples/menubar/menubar-2/js/PopupMenuItemAction.js
@@ -76,23 +76,6 @@ MenuItem.prototype.activateMenuitem = function (node) {
 
   if (role === 'menuitem') {
     this.menu.actionManager.setOption(option, value);
-
-    if (option === 'font-smaller' || option === 'font-larger') {
-
-      var rbs = node.parentNode.querySelectorAll('[role=menuitemradio]');
-
-      for (var i = 0; i < rbs.length; i++) {
-        var rb = rbs[i];
-        
-        if(this.menu.actionManager.fontSize === rb.textContent.toLowerCase()) {
-          rb.setAttribute('aria-checked', 'true');
-        } 
-        else {
-          rb.setAttribute('aria-checked', 'false');          
-        }  
-      }
-    }
-
   }
   else {
     if (role === 'menuitemcheckbox') {
diff --git a/examples/menubar/menubar-2/menubar-2.html b/examples/menubar/menubar-2/menubar-2.html
index d269319213..266e2fa287 100644
--- a/examples/menubar/menubar-2/menubar-2.html
+++ b/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>