updated code for updating which font size is selected and added docum…

…entation for the aria-disabled property
w3c · Aug 28, 2017 · d5089cb · d5089cb
1 parent b687462
commit d5089cb
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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>