| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> |
| <title>Menu Button Pattern</title> |
| |
| <!-- Core JS and CSS shared by all patterns --> |
| <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css"> |
| <link rel="stylesheet" href="../../shared/css/core.css"> |
| <script src="../../shared/js/highlight.pack.js"></script> |
| <script src="../../shared/js/app.js"></script> |
| <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script> |
| </head> |
| <body> |
| <main> |
| <h1>Menu Button Pattern</h1> |
| |
| <section id="about"> |
| <h2>About This Pattern</h2> |
| <p> |
| A menu button is a <a href="../button/button-pattern.html">button</a> that opens a menu as described in the <a href="../menubar/menu-and-menubar-pattern.html">Menu and Menubar Pattern</a>. |
| It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu. |
| </p> |
| </section> |
| |
| <section id="examples"> |
| <img alt="" src="../../images/pattern-menu-button.svg"> |
| <h2>Examples</h2> |
| <ul> |
| <li><a href="examples/menu-button-actions-active-descendant.html">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</li> |
| <li><a href="examples/menu-button-actions.html">Action Menu Button Example Using element.focus()</a>: A menu button made from an HTML <code>button</code> element that opens a menu of actions or commands where focus in the menu is managed using <code>element.focus()</code>.</li> |
| <li><a href="examples/menu-button-links.html">Navigation Menu Button</a>: A menu button made from an HTML <code>a</code> element that opens a menu of items that behave as links.</li> |
| </ul> |
| </section> |
| |
| <section id="keyboard_interaction"> |
| <h2>Keyboard Interaction</h2> |
| <ul> |
| <li> |
| With focus on the button: |
| <ul> |
| <li><kbd>Enter</kbd>: opens the menu and places focus on the first menu item.</li> |
| <li><kbd>Space</kbd>: Opens the menu and places focus on the first menu item.</li> |
| <li>(Optional) <kbd>Down Arrow</kbd>: opens the menu and moves focus to the first menu item.</li> |
| <li>(Optional) <kbd>Up Arrow</kbd>: opens the menu and moves focus to the last menu item.</li> |
| </ul> |
| </li> |
| <li>The keyboard behaviors needed after the menu is open are described in the <a href="../menubar/menu-and-menubar-pattern.html">Menu and Menubar Pattern</a>.</li> |
| </ul> |
| </section> |
| |
| <section id="roles_states_properties"> |
| <h2>WAI-ARIA Roles, States, and Properties</h2> |
| <ul> |
| <li>The element that opens the menu has role <a href="#button" class="role-reference">button</a>.</li> |
| <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, <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>. |
| </li> |
| <li> |
| Optionally, the element with role <code>button</code> has a value specified for <a href="#aria-controls" class="property-reference">aria-controls</a> that refers to the element with role <code>menu</code>. |
| </li> |
| <li>Additional roles, states, and properties needed for the menu element are described in the <a href="../menubar/menu-and-menubar-pattern.html">Menu and Menubar Pattern</a>.</li> |
| </ul> |
| </section> |
| </main> |
| </body> |
| </html> |
