Skip to content

Commit

Permalink
Radio Group Pattern: Revise keyboard interactions for radios in toolbars
Browse files Browse the repository at this point in the history
Per feedback from @charmarkk in issue #949, revise left and right arrow descriptions for clarity. Changed to bulleted list of behaviors for each key.

Per feedback from @jongund on the aria-practices list serve, added guidance for enter, up, and down keys.
  • Loading branch information
mcking65 committed Dec 11, 2018
1 parent 7b53818 commit 4b131ae
Showing 1 changed file with 20 additions and 8 deletions.
28 changes: 20 additions & 8 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -2019,8 +2019,7 @@ <h5>For Radio Groups Not Contained in a Toolbar</h5>
button in the group.</li>
</ul>
</li>
<li>
<kbd>Space</kbd>: checks the focused radio button if it is not already checked. </li>
<li><kbd>Space</kbd>: checks the focused radio button if it is not already checked.</li>
<li>
<kbd>Right Arrow</kbd> and <kbd>Down Arrow</kbd>: move focus to the next radio button in
the group, uncheck the previously focused button, and check the newly focused button. If
Expand Down Expand Up @@ -2049,15 +2048,28 @@ <h5>For Radio Group Contained in a Toolbar</h5>
</p>
<ul>
<li><kbd>Space</kbd>: checks the focused radio button if it is not checked. Otherwise, does nothing.</li>
<li><kbd>Enter</kbd> (optional): checks the focused radio button if it is not already checked.</li>
<li><kbd>Right Arrow</kbd>:
<ul>
<li>When focus is on a radio button and that radio button is <strong>not</strong> the last radio button in the radio group, moves focus to the next radio button.</li>
<li>When focus is on the last radio button in the radio group and that radio button is <strong>not</strong> the last element in the toolbar, moves focus to the next element in the toolbar.</li>
<li>When focus is on the last radio button in the radio group and that radio button is also the last element in the toolbar, moves focus to the first element in the toolbar.</li>
</ul>
</li>
<li><kbd>Left Arrow</kbd>:
<ul>
<li>When focus is on a radio button and that radio button is <strong>not</strong> the first radio button in the radio group, moves focus to the previous radio button.</li>
<li>When focus is on the first radio button in the radio group and that radio button is <strong>not</strong> the first element in the toolbar, moves focus to the previous element in the toolbar.</li>
<li>When focus is on the first radio button in the radio group and that radio button is also the first element in the toolbar, moves focus to the last element in the toolbar.</li>
</ul>
</li>
<li>
<kbd>Right Arrow</kbd>: moves focus to the next radio button in the radio group.
Or, if focus is on the last radio button in the group, moves focus to the next element in the toolbar.
Or, If the last radio button in the group is also the last element in the toolbar, moves focus to the first element in the toolbar.
<kbd>Down Arrow</kbd> (optional): Moves focus to the next radio button in the radio group.
If focus is on the last radio button in the radio group, moves focus to the first radio button in the group.
</li>
<li>
<kbd>Left Arrow</kbd>: moves focus to the previous radio button in the radio group.
Or, if focus is on the first radio button in the group, moves focus to the previous element in the toolbar.
Or, If the first radio button in the group is also the first element in the toolbar, moves focus to the last element in the toolbar.
<kbd>Up Arrow</kbd> (optional): Moves focus to the previous radio button in the radio group.
If focus is on the first radio button in the radio group, moves focus to the last radio button in the group.
</li>
</ul>
<p class="note">
Expand Down

0 comments on commit 4b131ae

Please sign in to comment.