Menu button pattern and 4 examples: Set aria-expanded to false when m…

…enus are closed (pull #2839)

Closes issues #697 and #2834 with the following changes:
* Revise menu button pattern to specify that aria-expanded is set to false when the menu is not displayed.
* Revise JS and documentation for 3 menu button examples and the toolbar example to set aria-expanded false when their menus are closed.
* Adjusts corresponding regression tests to ensure the state of expanded is true when the menus are open and false when the menus are closed.

---------

Co-authored-by: Matt King <[email protected]>

content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js

@@ -162,9 +162,9 @@ class MenuButtonActionsActiveDescendant {
 
   closePopup() {
     if (this.isOpen()) {
-      this.buttonNode.removeAttribute('aria-expanded');
+      this.buttonNode.setAttribute('aria-expanded', 'false');
       this.menuNode.setAttribute('aria-activedescendant', '');
-      for (var i = 0; i < this.menuitemNodes.length; i++) {
+      for (let i = 0; i < this.menuitemNodes.length; i++) {
         this.menuitemNodes[i].classList.remove('focus');
       }
       this.menuNode.style.display = 'none';

content/patterns/menu-button/examples/js/menu-button-actions.js

@@ -156,7 +156,7 @@ class MenuButtonActions {
 
   closePopup() {
     if (this.isOpen()) {
-      this.buttonNode.removeAttribute('aria-expanded');
+      this.buttonNode.setAttribute('aria-expanded', 'false');
       this.menuNode.style.display = 'none';
     }
   }

content/patterns/menu-button/examples/js/menu-button-links.js

@@ -153,7 +153,7 @@ class MenuButtonLinks {
 
   closePopup() {
     if (this.isOpen()) {
-      this.buttonNode.removeAttribute('aria-expanded');
+      this.buttonNode.setAttribute('aria-expanded', 'false');
       this.menuNode.style.display = 'none';
     }
   }

content/patterns/menu-button/examples/menu-button-actions-active-descendant.html

@@ -52,7 +52,7 @@ <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="menu-button-actions">
-            <button type="button" id="menubutton1" aria-haspopup="true" aria-controls="menu1">
+            <button type="button" id="menubutton1" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
               Actions
               <svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
                 <polygon points="1 0, 11 0, 6 8" />
@@ -198,7 +198,7 @@ <h3 id="rps1_label">Menu Button</h3>
           <tbody>
             <tr data-test-id="button-aria-haspopup">
               <td></td>
-              <th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-haspopup="true"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -214,7 +214,7 @@ <h3 id="rps1_label">Menu Button</h3>
             </tr>
             <tr data-test-id="button-aria-controls">
               <td></td>
-              <th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -225,21 +225,17 @@ <h3 id="rps1_label">Menu Button</h3>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="button-aria-expanded-false">
+              <td></td>
+              <th scope="row"><code>aria-expanded="false"</code></th>
+              <td><code>button</code></td>
+              <td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
+            </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
-              <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-expanded="true"</code></th>
               <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>Added when the menu is open.</li>
-                  <li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
-                  <li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
-                  <li>
-                    Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
-                    Keyboard users cannot focus the menu button when the menu is open.
-                  </li>
-                </ul>
-              </td>
+              <td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
             </tr>
           </tbody>
         </table>
@@ -268,7 +264,7 @@ <h3 id="rps2_label">Menu</h3>
               <td>
                 <code></code>
               </td>
-              <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
               <td>
                 <code>ul</code>
               </td>
@@ -281,7 +277,7 @@ <h3 id="rps2_label">Menu</h3>
             </tr>
             <tr data-test-id="menu-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
+              <th scope="row"><code>tabindex="-1"</code></th>
               <td>
                 <code>ul</code>
               </td>
@@ -298,14 +294,14 @@ <h3 id="rps2_label">Menu</h3>
             </tr>
             <tr data-test-id="menu-aria-activedescendant">
               <td></td>
-              <th scope="row"><code>aria-activedescendant=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-activedescendant="ID_REFERENCE"</code></th>
               <td>
                 <code>ul</code>
               </td>
               <td>
                 <ul>
                   <li>Refers to the descendant <code>menuitem</code> element that is visually indicated as focused.</li>
-                  <li>The <code>IDREF</code> value is updated when keys that move the focus indicator among menu items are pressed.</li>
+                  <li>The <code>ID_REFERENCE</code> value is updated when keys that move the focus indicator among menu items are pressed.</li>
                   <li>Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the <code>ul</code> element with role <code>menu</code>.</li>
                   <li>
                     For more information about this focus management technique, see

content/patterns/menu-button/examples/menu-button-actions.html

@@ -35,7 +35,7 @@ <h2>About This Example</h2>
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
         </p>
         <p>
-          In this implementation, each item in the menu is made focusable by setting <code>tabindex=&quot;-1&quot;</code> so the JavaScript can use <code>element.focus()</code> to set focus in response to events that trigger focus movement inside the menu.
+          In this implementation, each item in the menu is made focusable by setting <code>tabindex="-1"</code> so the JavaScript can use <code>element.focus()</code> to set focus in response to events that trigger focus movement inside the menu.
           An alternative technique for managing focus movement among menu items is demonstrated in <a href="menu-button-actions-active-descendant.html">the action menu button example that uses aria-activedescendant.</a>
         </p>
         <p>Similar examples include:</p>
@@ -52,7 +52,7 @@ <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="menu-button-actions">
-            <button type="button" id="menubutton1" aria-haspopup="true" aria-controls="menu1">
+            <button type="button" id="menubutton1" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
               Actions
               <svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
                 <polygon points="1 0, 11 0, 6 8" />
@@ -199,7 +199,7 @@ <h3 id="rps1_label">Menu Button</h3>
           <tbody>
             <tr data-test-id="menu-button-aria-haspopup">
               <td></td>
-              <th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-haspopup="true"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -215,7 +215,7 @@ <h3 id="rps1_label">Menu Button</h3>
             </tr>
             <tr data-test-id="menu-button-aria-controls">
               <td></td>
-              <th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -226,21 +226,17 @@ <h3 id="rps1_label">Menu Button</h3>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="button-aria-expanded-false">
+              <td></td>
+              <th scope="row"><code>aria-expanded="false"</code></th>
+              <td><code>button</code></td>
+              <td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
+            </tr>
             <tr data-test-id="menu-button-aria-expanded">
               <td></td>
-              <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-expanded="true"</code></th>
               <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>Added when the menu is open.</li>
-                  <li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
-                  <li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
-                  <li>
-                    Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
-                    Keyboard users cannot focus the menu button when the menu is open.
-                  </li>
-                </ul>
-              </td>
+              <td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
             </tr>
           </tbody>
         </table>
@@ -269,7 +265,7 @@ <h3 id="rps2_label">Menu</h3>
               <td>
                 <code></code>
               </td>
-              <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
               <td>
                 <code>ul</code>
               </td>
@@ -297,7 +293,7 @@ <h3 id="rps2_label">Menu</h3>
             </tr>
             <tr data-test-id="menuitem-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
+              <th scope="row"><code>tabindex="-1"</code></th>
               <td>
                 <code>li</code>
               </td>

content/patterns/menu-button/examples/menu-button-links.html

@@ -57,7 +57,7 @@ <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="menu-button-links">
-            <button type="button" id="menubutton" aria-haspopup="true" aria-controls="menu2">
+            <button type="button" id="menubutton" aria-haspopup="true" aria-controls="menu2" aria-expanded="false">
               WAI-ARIA Quick Links
               <svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
                 <polygon points="1 0, 11 0, 6 8" />
@@ -209,7 +209,7 @@ <h3 id="rps1_label">Menu Button</h3>
           <tbody>
             <tr data-test-id="button-aria-haspopup">
               <td></td>
-              <th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-haspopup="true"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -225,7 +225,7 @@ <h3 id="rps1_label">Menu Button</h3>
             </tr>
             <tr data-test-id="button-aria-controls">
               <td></td>
-              <th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
               <td>
                 <code>button</code>
               </td>
@@ -236,21 +236,17 @@ <h3 id="rps1_label">Menu Button</h3>
                 </ul>
               </td>
             </tr>
+            <tr data-test-id="button-aria-expanded-false">
+              <td></td>
+              <th scope="row"><code>aria-expanded="false"</code></th>
+              <td><code>button</code></td>
+              <td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
+            </tr>
             <tr data-test-id="button-aria-expanded">
               <td></td>
-              <th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
+              <th scope="row"><code>aria-expanded="true"</code></th>
               <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>Added when the menu is open.</li>
-                  <li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
-                  <li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
-                  <li>
-                    Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
-                    Keyboard users cannot focus the menu button when the menu is open.
-                  </li>
-                </ul>
-              </td>
+              <td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
             </tr>
           </tbody>
         </table>
@@ -281,7 +277,7 @@ <h3 id="rps2_label">Menu</h3>
               <td>
                 <code></code>
               </td>
-              <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
+              <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
               <td>
                 <code>ul</code>
               </td>
@@ -326,7 +322,7 @@ <h3 id="rps2_label">Menu</h3>
             </tr>
             <tr data-test-id="menuitem-tabindex">
               <td></td>
-              <th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
+              <th scope="row"><code>tabindex="-1"</code></th>
               <td>
                 <code>a</code>
               </td>

content/patterns/menu-button/menu-button-pattern.html

@@ -57,8 +57,7 @@ <h2>WAI-ARIA Roles, States, and Properties</h2>
           <li>The element with role <code>button</code> has <a href="#aria-haspopup" class="property-reference">aria-haspopup</a> set to either <code>menu</code> or <code>true</code>.</li>
           <li>
             When the menu is displayed, the element with role <code>button</code> has <a href="#aria-expanded" class="state-reference">aria-expanded</a> set to <code>true</code>.
-            When the menu is hidden, it is recommended that <code>aria-expanded</code> is not present.
-            If <code>aria-expanded</code> is specified when the menu is hidden, it is set to <code>false</code>.
+            When the menu is hidden, <code>aria-expanded</code> is set to <code>false</code>.
           </li>
           <li>
             The element that contains the menu items displayed by activating the button has role <a href="#menu" class="role-reference">menu</a>.

content/patterns/toolbar/examples/js/FontMenu.js

@@ -242,6 +242,6 @@ FontMenu.prototype.close = function (force) {
     (!this.hasFocus && !this.hasHover && !this.controller.hasHover)
   ) {
     this.domNode.style.display = 'none';
-    this.controller.domNode.removeAttribute('aria-expanded');
+    this.controller.domNode.setAttribute('aria-expanded', 'false');
   }
 };

content/patterns/toolbar/examples/toolbar.html

@@ -89,7 +89,7 @@ <h2 id="ex_label">Example</h2>
               <button type="button" class="item cut" aria-disabled="true" tabindex="-1">Cut</button>
             </div>
             <div class="menu-popup group">
-              <button type="button" aria-haspopup="true" aria-controls="menu1" class="item menu-button" tabindex="-1" aria-label="Font: Sans-serif" style="text-align: left; width: 140px; font-family: sans-serif">
+              <button type="button" aria-haspopup="true" aria-expanded="false" aria-controls="menu1" class="item menu-button" tabindex="-1" aria-label="Font: Sans-serif" style="text-align: left; width: 140px; font-family: sans-serif">
                 SANS-SERIF
                 <span></span>
               </button>
@@ -773,21 +773,17 @@ <h3 id="rps_label_5">Menu Button (Font Family)</h3>
                   </ul>
                 </td>
               </tr>
-              <tr data-test-id="toolbar-menubutton-aria-expanded">
+              <tr data-test-id="toolbar-menubutton-aria-expanded-false">
+                <td></td>
+                <th scope="row"><code>aria-expanded="false"</code></th>
+                <td><code>button</code></td>
+                <td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
+              </tr>
+              <tr data-test-id="toolbar-menubutton-aria-expanded-true">
                 <td></td>
                 <th scope="row"><code>aria-expanded="true"</code></th>
                 <td><code>button</code></td>
-                <td>
-                  <ul>
-                    <li>Added when the menu is open.</li>
-                    <li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
-                    <li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
-                    <li>
-                      Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
-                      Keyboard users cannot focus the menu button when the menu is open.
-                    </li>
-                  </ul>
-                </td>
+                <td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
               </tr>
             </tbody>
           </table>

test/tests/menu-button_actions-active-descendant.js

@@ -85,9 +85,9 @@ ariaTest(
       return document.querySelector(selector).hasAttribute('aria-expanded');
     }, ex.menubuttonSelector);
 
-    t.false(
+    t.true(
       hasAttribute,
-      'The menuitem should not have the "aria-expanded" attribute if the popup is closed'
+      'The menuitem should have the "aria-expanded is false" attribute if the popup is closed'
     );
 
     t.false(

test/tests/menu-button_actions.js

@@ -69,9 +69,9 @@ ariaTest(
       return document.querySelector(selector).hasAttribute('aria-expanded');
     }, ex.menubuttonSelector);
 
-    t.false(
+    t.true(
       hasAttribute,
-      'The menuitem should not have the "aria-expanded" attribute if the popup is closed'
+      'The menuitem should have the "aria-expanded is false" attribute if the popup is closed'
     );
 
     t.false(

test/tests/menu-button_links.js

@@ -98,9 +98,9 @@ ariaTest(
       return document.querySelector(selector).hasAttribute('aria-expanded');
     }, ex.menubuttonSelector);
 
-    t.false(
+    t.true(
       hasAttribute,
-      'The menuitem should not have the "aria-expanded" attribute if the popup is closed'
+      'The menuitem should have the "aria-expanded is false" attribute if the popup is closed'
     );
 
     t.false(