Skip to content

Commit

Permalink
Tabs Pattern: Revise guidance on focusing tabpanel for issue 1164 (pull
Browse files Browse the repository at this point in the history
#1274)

Resolves #1164 by Changing the Tab key description in the keyboard subsection of the tabs pattern.
Guidance now suggests that the tabpanel should be focused unless the first element containing meaningful content in the tabpanel is focusable.

Co-authored-by: Matt King <a11yThinker@Gmail.com>
  • Loading branch information
jongund and mcking65 committed Jan 23, 2020
1 parent c59168a commit eb5bc34
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -1024,7 +1024,7 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
<li>The element that serves as an input and displays the combobox value has role <a href="#combobox" class="role-reference">combobox</a>.</li>
<li>
The combobox element has <a href="#aria-controls" class="property-reference">aria-controls</a> set to a value that refers to the element that serves as the popup.
Note that <code>aria-controls</code> only needs to be set when the popup is visible. However, it is valid to reference an element that is not visible.
Note that <code>aria-controls</code> only needs to be set when the popup is visible. However, it is valid to reference an element that is not visible.
</li>
<li>The popup is an element that has role <a href="#listbox" class="role-reference">listbox</a>, <a href="#tree" class="role-reference">tree</a>, <a href="#grid" class="role-reference">grid</a>, or <a href="#dialog" class="role-reference">dialog</a>.</li>
<li>
Expand Down Expand Up @@ -2632,8 +2632,11 @@ <h4>Keyboard Interaction</h4>
<p>For the tab list:</p>
<ul>
<li>
<kbd>Tab</kbd>: When focus moves into the tab list, places focus on the active <code>tab</code> element.
When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
<kbd>Tab</kbd>:
<ul>
<li>When focus moves into the tab list, places focus on the active <code>tab</code> element.</li>
<li>When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.</li>
</ul>
</li>
<li>When focus is on a tab element in a horizontal tab list:
<ul>
Expand Down

0 comments on commit eb5bc34

Please sign in to comment.