Skip to content

Commit 9be3825

Browse files
andreancardonamcking65
andreancardona
and
mcking65
authored
Menu button pattern and 4 examples: Set aria-expanded to false when menus 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]>
1 parent 33b54fc commit 9be3825

13 files changed

+78
-84
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,9 @@ class MenuButtonActionsActiveDescendant {
162162

163163
closePopup() {
164164
if (this.isOpen()) {
165-
this.buttonNode.removeAttribute('aria-expanded');
165+
this.buttonNode.setAttribute('aria-expanded', 'false');
166166
this.menuNode.setAttribute('aria-activedescendant', '');
167-
for (var i = 0; i < this.menuitemNodes.length; i++) {
167+
for (let i = 0; i < this.menuitemNodes.length; i++) {
168168
this.menuitemNodes[i].classList.remove('focus');
169169
}
170170
this.menuNode.style.display = 'none';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ class MenuButtonActions {
156156

157157
closePopup() {
158158
if (this.isOpen()) {
159-
this.buttonNode.removeAttribute('aria-expanded');
159+
this.buttonNode.setAttribute('aria-expanded', 'false');
160160
this.menuNode.style.display = 'none';
161161
}
162162
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ class MenuButtonLinks {
153153

154154
closePopup() {
155155
if (this.isOpen()) {
156-
this.buttonNode.removeAttribute('aria-expanded');
156+
this.buttonNode.setAttribute('aria-expanded', 'false');
157157
this.menuNode.style.display = 'none';
158158
}
159159
}

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

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ <h2 id="ex_label">Example</h2>
5252
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
5353
<div id="ex1">
5454
<div class="menu-button-actions">
55-
<button type="button" id="menubutton1" aria-haspopup="true" aria-controls="menu1">
55+
<button type="button" id="menubutton1" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
5656
Actions
5757
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
5858
<polygon points="1 0, 11 0, 6 8" />
@@ -198,7 +198,7 @@ <h3 id="rps1_label">Menu Button</h3>
198198
<tbody>
199199
<tr data-test-id="button-aria-haspopup">
200200
<td></td>
201-
<th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
201+
<th scope="row"><code>aria-haspopup="true"</code></th>
202202
<td>
203203
<code>button</code>
204204
</td>
@@ -214,7 +214,7 @@ <h3 id="rps1_label">Menu Button</h3>
214214
</tr>
215215
<tr data-test-id="button-aria-controls">
216216
<td></td>
217-
<th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
217+
<th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
218218
<td>
219219
<code>button</code>
220220
</td>
@@ -225,21 +225,17 @@ <h3 id="rps1_label">Menu Button</h3>
225225
</ul>
226226
</td>
227227
</tr>
228+
<tr data-test-id="button-aria-expanded-false">
229+
<td></td>
230+
<th scope="row"><code>aria-expanded="false"</code></th>
231+
<td><code>button</code></td>
232+
<td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
233+
</tr>
228234
<tr data-test-id="button-aria-expanded">
229235
<td></td>
230-
<th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
236+
<th scope="row"><code>aria-expanded="true"</code></th>
231237
<td><code>button</code></td>
232-
<td>
233-
<ul>
234-
<li>Added when the menu is open.</li>
235-
<li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
236-
<li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
237-
<li>
238-
Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
239-
Keyboard users cannot focus the menu button when the menu is open.
240-
</li>
241-
</ul>
242-
</td>
238+
<td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
243239
</tr>
244240
</tbody>
245241
</table>
@@ -268,7 +264,7 @@ <h3 id="rps2_label">Menu</h3>
268264
<td>
269265
<code></code>
270266
</td>
271-
<th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
267+
<th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
272268
<td>
273269
<code>ul</code>
274270
</td>
@@ -281,7 +277,7 @@ <h3 id="rps2_label">Menu</h3>
281277
</tr>
282278
<tr data-test-id="menu-tabindex">
283279
<td></td>
284-
<th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
280+
<th scope="row"><code>tabindex="-1"</code></th>
285281
<td>
286282
<code>ul</code>
287283
</td>
@@ -298,14 +294,14 @@ <h3 id="rps2_label">Menu</h3>
298294
</tr>
299295
<tr data-test-id="menu-aria-activedescendant">
300296
<td></td>
301-
<th scope="row"><code>aria-activedescendant=&quot;IDREF&quot;</code></th>
297+
<th scope="row"><code>aria-activedescendant="ID_REFERENCE"</code></th>
302298
<td>
303299
<code>ul</code>
304300
</td>
305301
<td>
306302
<ul>
307303
<li>Refers to the descendant <code>menuitem</code> element that is visually indicated as focused.</li>
308-
<li>The <code>IDREF</code> value is updated when keys that move the focus indicator among menu items are pressed.</li>
304+
<li>The <code>ID_REFERENCE</code> value is updated when keys that move the focus indicator among menu items are pressed.</li>
309305
<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>
310306
<li>
311307
For more information about this focus management technique, see

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h2>About This Example</h2>
3535
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.
3636
</p>
3737
<p>
38-
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.
38+
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.
3939
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>
4040
</p>
4141
<p>Similar examples include:</p>
@@ -52,7 +52,7 @@ <h2 id="ex_label">Example</h2>
5252
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
5353
<div id="ex1">
5454
<div class="menu-button-actions">
55-
<button type="button" id="menubutton1" aria-haspopup="true" aria-controls="menu1">
55+
<button type="button" id="menubutton1" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
5656
Actions
5757
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
5858
<polygon points="1 0, 11 0, 6 8" />
@@ -199,7 +199,7 @@ <h3 id="rps1_label">Menu Button</h3>
199199
<tbody>
200200
<tr data-test-id="menu-button-aria-haspopup">
201201
<td></td>
202-
<th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
202+
<th scope="row"><code>aria-haspopup="true"</code></th>
203203
<td>
204204
<code>button</code>
205205
</td>
@@ -215,7 +215,7 @@ <h3 id="rps1_label">Menu Button</h3>
215215
</tr>
216216
<tr data-test-id="menu-button-aria-controls">
217217
<td></td>
218-
<th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
218+
<th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
219219
<td>
220220
<code>button</code>
221221
</td>
@@ -226,21 +226,17 @@ <h3 id="rps1_label">Menu Button</h3>
226226
</ul>
227227
</td>
228228
</tr>
229+
<tr data-test-id="button-aria-expanded-false">
230+
<td></td>
231+
<th scope="row"><code>aria-expanded="false"</code></th>
232+
<td><code>button</code></td>
233+
<td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
234+
</tr>
229235
<tr data-test-id="menu-button-aria-expanded">
230236
<td></td>
231-
<th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
237+
<th scope="row"><code>aria-expanded="true"</code></th>
232238
<td><code>button</code></td>
233-
<td>
234-
<ul>
235-
<li>Added when the menu is open.</li>
236-
<li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
237-
<li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
238-
<li>
239-
Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
240-
Keyboard users cannot focus the menu button when the menu is open.
241-
</li>
242-
</ul>
243-
</td>
239+
<td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
244240
</tr>
245241
</tbody>
246242
</table>
@@ -269,7 +265,7 @@ <h3 id="rps2_label">Menu</h3>
269265
<td>
270266
<code></code>
271267
</td>
272-
<th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
268+
<th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
273269
<td>
274270
<code>ul</code>
275271
</td>
@@ -297,7 +293,7 @@ <h3 id="rps2_label">Menu</h3>
297293
</tr>
298294
<tr data-test-id="menuitem-tabindex">
299295
<td></td>
300-
<th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
296+
<th scope="row"><code>tabindex="-1"</code></th>
301297
<td>
302298
<code>li</code>
303299
</td>

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h2 id="ex_label">Example</h2>
5757
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
5858
<div id="ex1">
5959
<div class="menu-button-links">
60-
<button type="button" id="menubutton" aria-haspopup="true" aria-controls="menu2">
60+
<button type="button" id="menubutton" aria-haspopup="true" aria-controls="menu2" aria-expanded="false">
6161
WAI-ARIA Quick Links
6262
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
6363
<polygon points="1 0, 11 0, 6 8" />
@@ -209,7 +209,7 @@ <h3 id="rps1_label">Menu Button</h3>
209209
<tbody>
210210
<tr data-test-id="button-aria-haspopup">
211211
<td></td>
212-
<th scope="row"><code>aria-haspopup=&quot;true&quot;</code></th>
212+
<th scope="row"><code>aria-haspopup="true"</code></th>
213213
<td>
214214
<code>button</code>
215215
</td>
@@ -225,7 +225,7 @@ <h3 id="rps1_label">Menu Button</h3>
225225
</tr>
226226
<tr data-test-id="button-aria-controls">
227227
<td></td>
228-
<th scope="row"><code>aria-controls=&quot;IDREF&quot;</code></th>
228+
<th scope="row"><code>aria-controls="ID_REFERENCE"</code></th>
229229
<td>
230230
<code>button</code>
231231
</td>
@@ -236,21 +236,17 @@ <h3 id="rps1_label">Menu Button</h3>
236236
</ul>
237237
</td>
238238
</tr>
239+
<tr data-test-id="button-aria-expanded-false">
240+
<td></td>
241+
<th scope="row"><code>aria-expanded="false"</code></th>
242+
<td><code>button</code></td>
243+
<td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
244+
</tr>
239245
<tr data-test-id="button-aria-expanded">
240246
<td></td>
241-
<th scope="row"><code>aria-expanded=&quot;true&quot;</code></th>
247+
<th scope="row"><code>aria-expanded="true"</code></th>
242248
<td><code>button</code></td>
243-
<td>
244-
<ul>
245-
<li>Added when the menu is open.</li>
246-
<li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
247-
<li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
248-
<li>
249-
Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
250-
Keyboard users cannot focus the menu button when the menu is open.
251-
</li>
252-
</ul>
253-
</td>
249+
<td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
254250
</tr>
255251
</tbody>
256252
</table>
@@ -281,7 +277,7 @@ <h3 id="rps2_label">Menu</h3>
281277
<td>
282278
<code></code>
283279
</td>
284-
<th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
280+
<th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
285281
<td>
286282
<code>ul</code>
287283
</td>
@@ -326,7 +322,7 @@ <h3 id="rps2_label">Menu</h3>
326322
</tr>
327323
<tr data-test-id="menuitem-tabindex">
328324
<td></td>
329-
<th scope="row"><code>tabindex=&quot;-1&quot;</code></th>
325+
<th scope="row"><code>tabindex="-1"</code></th>
330326
<td>
331327
<code>a</code>
332328
</td>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,7 @@ <h2>WAI-ARIA Roles, States, and Properties</h2>
5757
<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>
5858
<li>
5959
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>.
60-
When the menu is hidden, it is recommended that <code>aria-expanded</code> is not present.
61-
If <code>aria-expanded</code> is specified when the menu is hidden, it is set to <code>false</code>.
60+
When the menu is hidden, <code>aria-expanded</code> is set to <code>false</code>.
6261
</li>
6362
<li>
6463
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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,6 @@ FontMenu.prototype.close = function (force) {
242242
(!this.hasFocus && !this.hasHover && !this.controller.hasHover)
243243
) {
244244
this.domNode.style.display = 'none';
245-
this.controller.domNode.removeAttribute('aria-expanded');
245+
this.controller.domNode.setAttribute('aria-expanded', 'false');
246246
}
247247
};

‎content/patterns/toolbar/examples/toolbar.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h2 id="ex_label">Example</h2>
8989
<button type="button" class="item cut" aria-disabled="true" tabindex="-1">Cut</button>
9090
</div>
9191
<div class="menu-popup group">
92-
<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">
92+
<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">
9393
SANS-SERIF
9494
<span></span>
9595
</button>
@@ -773,21 +773,17 @@ <h3 id="rps_label_5">Menu Button (Font Family)</h3>
773773
</ul>
774774
</td>
775775
</tr>
776-
<tr data-test-id="toolbar-menubutton-aria-expanded">
776+
<tr data-test-id="toolbar-menubutton-aria-expanded-false">
777+
<td></td>
778+
<th scope="row"><code>aria-expanded="false"</code></th>
779+
<td><code>button</code></td>
780+
<td>Indicates the menu is not displayed and that activating the menu button opens the menu.</td>
781+
</tr>
782+
<tr data-test-id="toolbar-menubutton-aria-expanded-true">
777783
<td></td>
778784
<th scope="row"><code>aria-expanded="true"</code></th>
779785
<td><code>button</code></td>
780-
<td>
781-
<ul>
782-
<li>Added when the menu is open.</li>
783-
<li>Indicates that the menu is displayed and that activating the menu button closes the menu.</li>
784-
<li>The <code>aria-expanded</code> attribute is removed when the menu is closed.</li>
785-
<li>
786-
Included to support touch devices where screen reader users can touch the menu button when the menu is displayed.
787-
Keyboard users cannot focus the menu button when the menu is open.
788-
</li>
789-
</ul>
790-
</td>
786+
<td>Indicates the menu is displayed and that activating the menu button closes the menu.</td>
791787
</tr>
792788
</tbody>
793789
</table>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@ ariaTest(
8585
return document.querySelector(selector).hasAttribute('aria-expanded');
8686
}, ex.menubuttonSelector);
8787

88-
t.false(
88+
t.true(
8989
hasAttribute,
90-
'The menuitem should not have the "aria-expanded" attribute if the popup is closed'
90+
'The menuitem should have the "aria-expanded is false" attribute if the popup is closed'
9191
);
9292

9393
t.false(

0 commit comments

Comments
 (0)