Skip to content

Commit

Permalink
Menu and Menubar Pattern: Clarify Tab key behavior (pull #2266)
Browse files Browse the repository at this point in the history 
Revised Menu and Menubar Design Pattern to resolve issue #2044.

Clarify that tab moves both into and out of menubar but only out of menu.
Menus are not part of the page Tab sequence; they must be opened by activating another element, e.g., menu button or menu item.

Co-authored-by: Matt King <[email protected]>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 authored May 16, 2022
1 parent 02ec4c3 commit 91dfa19
Showing 1 changed file with 32 additions and 19 deletions.
51 changes: 32 additions & 19 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2024,25 +2024,40 @@ <h4>Examples</h4>

<section class="notoc">
<h4>Keyboard Interaction</h4>
<p>The following description of keyboard behaviors assumes:</p>
<ol>
<li>A horizontal <code>menubar</code> containing several <code>menuitem</code>, <code>menuitemradio</code>, or <code>menuitemcheckbox</code> elements.</li>
<li>Some <code>menuitem</code> elements in the <code>menubar</code> have child submenus that contain vertically arranged items.</li>
<li>Some of the <code>menuitem</code> elements in the submenus have child submenus with items that are also vertically arranged.</li>
</ol>
<p>When reading the following descriptions, also keep in mind that:</p>
<ol>
<li>Focusable elements, which may have role <code>menuitem</code>, <code>menuitemradio</code>, or <code>menuitemcheckbox</code>, are referred to as items.</li>
<li>If a behavior applies to only certain types of items, e.g., <code>menuitem</code> elements, the specific role name is used.</li>
<li>Submenus, also known as popup menus, are elements with role <code>menu</code>.</li>
<li>Except where noted, menus opened from a menubutton behave the same as menus opened from a menubar.</li>
</ol>
<p>
The following description of keyboard behaviors assumes:</p>
<ol>
<li>A horizontal <code>menubar</code> containing several <code>menuitem</code>, <code>menuitemradio</code>, or <code>menuitemcheckbox</code> elements.</li>
<li>Some <code>menuitem</code> elements in the <code>menubar</code> have child submenus that contain vertically arranged items.</li>
<li>Some of the <code>menuitem</code> elements in the submenus have child submenus with items that are also vertically arranged.</li>
</ol>
<p>When reading the following descriptions, also keep in mind that:</p>
<ol>
<li>Focusable elements, which may have role <code>menuitem</code>, <code>menuitemradio</code>, or <code>menuitemcheckbox</code>, are referred to as items.</li>
<li>If a behavior applies to only certain types of items, e.g., <code>menuitem</code> elements, the specific role name is used.</li>
<li>Submenus, also known as popup menus, are elements with role <code>menu</code>.</li>
<li>Except where noted, menus opened from a menubutton behave the same as menus opened from a menubar.</li>
</ol>
When a <code>menu</code> opens, or when a <code>menubar</code> receives focus, keyboard focus is placed on the first item.
Because <code>menubar</code> and <code>menu</code> elements are composite widgets as described in <a href="#kbd_general_within"></a>,
<kbd>Tab</kbd> and <kbd>Shift + Tab</kbd> do not move focus among the items in the menu.
Instead, the keyboard commands described in this section enable users to move focus among the elements in a <code>menubar</code> or <code>menu</code>.
</p>
<ul>
<li>
When a <code>menu</code> opens, or when a <code>menubar</code> receives focus,
keyboard focus is placed on the first item.
All items are focusable as described in <a href="#kbd_general_within"></a>.
<li><kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>:
<ul>
<li>Move focus into a <code>menubar</code>:
<ul>
<li>If focus is moving into the <code>menubar</code> for the first time, focus is set on the first <code>menuitem</code>.</li>
<li>If the <code>menubar</code> has previously contained focus, focus is optionally set on the <code>menuitem</code> that last had focus. Otherwise, it is set on the first <code>menuitem</code> that is not disabled.</li>
</ul>
</li>
<li>When focus is on a <code>menuitem</code> in a <code>menu</code> or <code>menubar</code>, move focus out of the <code>menu</code> or <code>menubar</code>, and close all menus and submenus.</li>
<li>
Note that <kbd>Tab</kbd> and <kbd>Shift + Tab</kbd> do not move focus into a <code>menu</code>.
Unlike a <code>menubar</code>, a <code>menu</code> is not visually persistent, and authors are responsible for ensuring focus moves to an item inside of a <code>menu</code> when the <code>menu</code> opens.
</li>
</ul>
</li>
<li><kbd>Enter</kbd>:
<ul>
Expand Down Expand Up @@ -2107,8 +2122,6 @@ <h4>Keyboard Interaction</h4>
<li><kbd>End</kbd>: If arrow key wrapping is not supported, moves focus to the last item in the current <code>menu</code> or <code>menubar</code>.</li>
<li>Any key that corresponds to a printable character (Optional): Move focus to the next item in the current menu whose label begins with that printable character.</li>
<li><kbd>Escape</kbd>: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent <code>menuitem</code>, from which the menu was opened.</li>
<li><kbd>Tab</kbd>: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a <code>menubar</code>, closes its <code>menu</code> and all open parent <code>menu</code> containers.</li>
<li><kbd>Shift + Tab</kbd>: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a <code>menubar</code>, closes its <code>menu</code> and all open parent <code>menu</code> containers.</li>
</ul>
<ol class="note">
<li>Disabled menu items are focusable but cannot be activated. </li>
Expand Down

0 comments on commit 91dfa19

Please sign in to comment.