Skip to content

Commit

Permalink
Dialog Pattern: Clarify Description of Focus Movement
Browse files Browse the repository at this point in the history
I was reminded that some focusable elements are not in the tab sequence so the description of the keyboard behavior is not clear because it says that tab moves focus to next focusable element.

So, for issue w3c#325, made the following changes.

Added the following paragraph to the beginning of the keyboard subsection:

> In the following description, the term “tabbable element” refers to any element with a tabindex value of zero or greater.
> Note that values greater than 0 are strongly discouraged.

Added the following to the keyboard interaction description as the first item in the list:

> When a dialog opens, focus moves to an element inside the dialog. See notes below regarding initial focus placement.

In the subsequent bullet items in the keyboard description, replaced the word "focusable" with "tabbable".
  • Loading branch information
mcking65 committed Apr 27, 2017
1 parent 07da839 commit 1ace662
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -511,17 +511,19 @@ <h3>Dialog (Modal)</h3>
</p>
<section class="notoc">
<h4>Keyboard Interaction</h4>
<p>In the following description, the term <q>tabbable element</q> refers to any element with a <code>tabindex</code> value of zero or greater. Note that values greater than 0 are strongly discouraged.</p>
<ul>
<li>When a dialog opens, focus moves to an element inside the dialog. See notes below regarding initial focus placement.</li>
<li><kbd>Tab</kbd>:
<ul>
<li>Moves focus to the next focusable element inside the dialog.</li>
<li>If focus is on the last element, moves focus to the first focusable element inside the dialog. </li>
<li>Moves focus to the next tabbable element inside the dialog.</li>
<li>If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. </li>
</ul>
</li>
<li><kbd>Shift + Tab</kbd>:
<ul>
<li>Moves focus to the previous focusable element inside the dialog.</li>
<li>If focus is on the first element, moves focus to the last focusable element inside the dialog.</li>
<li>Moves focus to the previous tabbable element inside the dialog.</li>
<li>If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.</li>
</ul>
</li>
<li><kbd>Escape</kbd>: Closes the dialog.</li>
Expand Down

0 comments on commit 1ace662

Please sign in to comment.