Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Menu button pattern and 4 examples: Set aria-expanded to false when menus are closed #2839

Merged
merged 13 commits into from
Dec 17, 2023
Merged

Menu button pattern and 4 examples: Set aria-expanded to false when menus are closed #2839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2afb9dd
feat: udpate menu examples aria false
andreancardona Oct 17, 2023
0e0e04c
feat: update javascript
andreancardona Nov 7, 2023
04e20f3
feat: add aria-expanded false
andreancardona Nov 7, 2023
2d16041
Set initial state of aria-expanded
mcking65 Nov 28, 2023
03f572d
Simplify documentation of aria-expanded and move documentation of the…
mcking65 Nov 28, 2023
1d42435
Replace IDREF with ID_REFERENCE in documentation per issue #1258
mcking65 Nov 28, 2023
b7e3f07
Replace quote entity with quote character when inside code element
mcking65 Nov 28, 2023
eabaf0f
Set initial state of aria-expanded to false, simplify documentation o…
mcking65 Nov 28, 2023
56fefc4
Update pattern requirement for aria-expanded false
mcking65 Nov 28, 2023
1f2d047
feat: update regression tests
andreancardona Dec 4, 2023
45766ac
feat: update regression tests
andreancardona Dec 4, 2023
5238bcf
feat: update tests
andreancardona Dec 4, 2023
4f39928
chore: update tests again
andreancardona Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion content/patterns/menu-button/examples/js/menu-button-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
}
Expand Down
2 changes: 1 addition & 1 deletion content/patterns/menu-button/examples/js/menu-button-links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
}
Expand Down
34 changes: 15 additions & 19 deletions content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,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" />
Expand Down Expand Up @@ -197,7 +197,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>
Expand All @@ -213,7 +213,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>
Expand All @@ -224,21 +224,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>
Expand Down Expand Up @@ -267,7 +263,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>
Expand All @@ -280,7 +276,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>
Expand All @@ -297,14 +293,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
Expand Down
32 changes: 14 additions & 18 deletions content/patterns/menu-button/examples/menu-button-actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,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>
Expand All @@ -51,7 +51,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" />
Expand Down Expand Up @@ -198,7 +198,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>
Expand All @@ -214,7 +214,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>
Expand All @@ -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="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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -296,7 +292,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>
Expand Down
30 changes: 13 additions & 17 deletions content/patterns/menu-button/examples/menu-button-links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,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" />
Expand Down Expand Up @@ -208,7 +208,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>
Expand All @@ -224,7 +224,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>
Expand All @@ -235,21 +235,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>
Expand Down Expand Up @@ -280,7 +276,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>
Expand Down Expand Up @@ -325,7 +321,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>
Expand Down
3 changes: 1 addition & 2 deletions content/patterns/menu-button/menu-button-pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,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>.
Expand Down
2 changes: 1 addition & 1 deletion content/patterns/toolbar/examples/js/FontMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
};
22 changes: 9 additions & 13 deletions content/patterns/toolbar/examples/toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,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>
Expand Down Expand Up @@ -772,21 +772,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>
Expand Down
4 changes: 2 additions & 2 deletions test/tests/menu-button_actions-active-descendant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions test/tests/menu-button_actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions test/tests/menu-button_links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading
Loading