Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Separate kbd cords for multiple key strokes #1611

Closed
wants to merge 1 commit into from
Closed

chore: Separate kbd cords for multiple key strokes #1611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions aria-practices-DeletedSectionsArchive.html
View file
Open in desktop

Large diffs are not rendered by default.

186 changes: 93 additions & 93 deletions aria-practices.html
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions examples/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</td>
</tr>
<tr data-test-id="key-shift-tab">
<th><kbd>Shift + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to the previous focusable element.</li>
Expand Down Expand Up @@ -273,7 +273,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<ul>
<li>Element that serves as an accordion header.</li>
<li>Each accordion header element contains a button that controls the visibility of its content panel.</li>
<li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li>
<li>The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.</li>
</ul>
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion examples/coding-template/Example-Template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
Use kbd tags,e.g. <kbd>KeyName</kbd>.
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
Use + to separate modifiers, e.g., <kbd>Control</kbd> + <kbd>Right Arrow</kbd>.
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
-->
Expand Down
4 changes: 2 additions & 2 deletions examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
Expand Down Expand Up @@ -192,7 +192,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th>Standard single line text editing keys</th>
<td>
<ul>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
<li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
</ul>
</td>
Expand Down
4 changes: 2 additions & 2 deletions examples/combobox/combobox-autocomplete-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
Expand Down Expand Up @@ -188,7 +188,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th>Standard single line text editing keys</th>
<td>
<ul>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
<li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
</ul>
</td>
Expand Down
4 changes: 2 additions & 2 deletions examples/combobox/combobox-autocomplete-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
</td>
</tr>
<tr data-test-id="textbox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
Expand All @@ -137,7 +137,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th>Standard single line text editing keys</th>
<td>
<ul>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
<li>An HTML <code>input</code> with <code>type="text"</code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
</ul>
</td>
Expand Down
12 changes: 6 additions & 6 deletions examples/combobox/combobox-datepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<h1>Date Picker Combobox Example</h1>
<p>
The below date picker demonstrates an implementation of the <a href="../../#combobox">combobox design pattern</a> that opens a dialog.
The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt + Down Arrow</kbd>.
The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt</kbd> + <kbd>Down Arrow</kbd>.
The dialog contains an implementation of the <a href="../../#grid">grid pattern</a> for displaying a calendar and enabling selection of a date.
Additional buttons in the dialog are available for changing the month and year shown in the grid.
</p>
Expand All @@ -42,7 +42,7 @@ <h1>Date Picker Combobox Example</h1>
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>
</ul>

<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
Expand Down Expand Up @@ -214,7 +214,7 @@ <h2>Accessibility Features</h2>
<ul>
<li>The description of the date format is associated with the combobox via <code>aria-describedby</code>, making it available to assistive technologies as an accessible description.</li>
<li>
While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button.
While the down arrow icon is excluded from the <kbd>Tab</kbd> sequence as specified in the <code>combobox</code> design pattern, it is made accessible to assistive technologies as the Choose Date button.
This enables assistive technology users who might not have a keyboard, e.g., someone using a touch-based screen reader, to open the date picker dialog.
</li>
<li>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
Expand Down Expand Up @@ -249,7 +249,7 @@ <h3 id="kbd_label_1">Combobox</h3>
</thead>
<tbody>
<tr data-test-id="combobox-down-arrow">
<th><kbd>Down Arrow</kbd>,<br><kbd>ALT + Down Arrow</kbd></th>
<th><kbd>Down Arrow</kbd>,<br><kbd>ALT</kbd> + <kbd>Down Arrow</kbd></th>
<td>
<ul>
<li>Open the date picker dialog.</li>
Expand Down Expand Up @@ -289,7 +289,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
</td>
</tr>
<tr data-test-id="dialog-shift-tab">
<th><kbd>Shift + TAB</kbd></th>
<th><kbd>Shift</kbd> + <kbd>TAB</kbd></th>
<td>
<ul>
<li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
Expand Down Expand Up @@ -483,7 +483,7 @@ <h3 id="rps_label_combobox">Combobox</h3>
<th scope="row"><code>aria-expanded="true"</code></th>
<td><code>input</code></td>
<td>
Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open.
Indicates that the combobox is expanded, i.e., the &quot;Choose Date&quot; dialog is open.
</td>
</tr>
<tr data-test-id="textbox-aria-autocomplete">
Expand Down
4 changes: 2 additions & 2 deletions examples/combobox/combobox-select-only.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ <h3 id="kbd_label_combobox">Closed Combobox</h3>
</td>
</tr>
<tr data-test-id="combobox-key-alt-down-arrow">
<th><kbd>Alt + Down Arrow</kbd></th>
<th><kbd>Alt</kbd> + <kbd>Down Arrow</kbd></th>
<td>
Opens the listbox without moving focus or changing selection.
</td>
Expand Down Expand Up @@ -237,7 +237,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
</td>
</tr>
<tr data-test-id="listbox-key-alt-up-arrow">
<th><kbd>Alt + Up Arrow</kbd></th>
<th><kbd>Alt</kbd> + <kbd>Up Arrow</kbd></th>
<td>
<ul>
<li>Sets the value to the content of the focused option in the listbox.</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/grid-combo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
<th>Standard single line text editing keys</th>
<td>
<ul>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
<li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift</kbd> + <kbd>Right Arrow</kbd>.</li>
<li>An HTML <code>input</code> with <code>type=<q>text</q></code> is used for the textbox so the browser will provide platform-specific editing keys.</li>
</ul>
</td>
Expand Down
6 changes: 3 additions & 3 deletions examples/dialog-modal/alertdialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</td>
</tr>
<tr>
<th><kbd>Shift + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to previous focusable element inside the dialog.</li>
Expand All @@ -130,11 +130,11 @@ <h2 id="kbd_label">Keyboard Support</h2>
<td>Closes the dialog.</td>
</tr>
<tr>
<th><kbd>Command + S</kbd></th>
<th><kbd>Command</kbd> + <kbd>S</kbd></th>
<td>(Mac only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
<tr>
<th><kbd>Control + S</kbd></th>
<th><kbd>Control</kbd> + <kbd>S</kbd></th>
<td>(Windows only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
</tbody>
Expand Down
6 changes: 3 additions & 3 deletions examples/dialog-modal/datepicker-dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
</td>
</tr>
<tr data-test-id="dialog-shift-tab">
<th><kbd>Shift + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
Expand Down Expand Up @@ -360,7 +360,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
</td>
</tr>
<tr data-test-id="grid-shift-pageup">
<th><kbd>Shift + Page Up</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Page Up</kbd></th>
<td>
<ul>
<li>Changes the grid of dates to the previous Year.</li>
Expand All @@ -378,7 +378,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
</td>
</tr>
<tr data-test-id="grid-shift-pagedown">
<th><kbd>Shift + Page Down</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Page Down</kbd></th>
<td>
<ul>
<li>Changes the grid of dates to the next Year.</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/dialog-modal/dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</td>
</tr>
<tr data-test-id="key-shift-tab">
<th><kbd>Shift + Tab</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to previous focusable element inside the dialog.</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/disclosure/disclosure-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
<tr data-test-id="key-tab">
<th>
<kbd>Tab</kbd><br>
<kbd>Shift + Tab</kbd>
<kbd>Shift</kbd> + <kbd>Tab</kbd>
</th>
<td>Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.</td>
</tr>
Expand Down
4 changes: 2 additions & 2 deletions examples/feed/feed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,11 @@ <h2 id="kbd_label">Keyboard Support</h2>
<td>Move focus to previous article.</td>
</tr>
<tr data-test-id="key-control-end">
<th><kbd>Control + End</kbd></th>
<th><kbd>Control</kbd> + <kbd>End</kbd></th>
<td>Move focus to the first focusable element after the feed.</td>
</tr>
<tr data-test-id="key-control-home">
<th><kbd>Control + Home</kbd></th>
<th><kbd>Control</kbd> + <kbd>Home</kbd></th>
<td>Move focus to the first focusable element before the feed.</td>
</tr>
</tbody>
Expand Down
4 changes: 2 additions & 2 deletions examples/grid/LayoutGrids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,13 +554,13 @@ <h2 id="kbd_label">Keyboard Support</h2>
</tr>
<tr data-test-id="key-control-home">
<th>
<kbd>Control + Home</kbd>
<kbd>Control</kbd> + <kbd>Home</kbd>
</th>
<td>Moves focus to the first cell in the first row.</td>
</tr>
<tr data-test-id="key-control-end">
<th>
<kbd>Control + End</kbd>
<kbd>Control</kbd> + <kbd>End</kbd>
</th>
<td>Moves focus to the last cell in the last row.</td>
</tr>
Expand Down
6 changes: 3 additions & 3 deletions examples/grid/dataGrids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ <h4>Notes</h4>
<ol>
<li>
Data cells can be focused using standard navigation keys, including directional arrows, <kbd>Home</kbd>,
<kbd>End</kbd>, <kbd>Control + Home</kbd>, and <kbd>Control + End</kbd>.
<kbd>End</kbd>, <kbd>Control</kbd> + <kbd>Home</kbd>, and <kbd>Control</kbd> + <kbd>End</kbd>.
</li>
<li>
The <kbd>Page Down</kbd> and <kbd>Page Up</kbd> keys are not supported since such
Expand Down Expand Up @@ -613,13 +613,13 @@ <h2 id="kbd_label">Keyboard Support</h2>
</tr>
<tr data-test-id="key-control-home">
<th scope="row">
<kbd>Control + Home</kbd>
<kbd>Control</kbd> + <kbd>Home</kbd>
</th>
<td>moves focus to the first cell in the first row.</td>
</tr>
<tr data-test-id="key-control-end">
<th scope="row">
<kbd>Control + End</kbd>
<kbd>Control</kbd> + <kbd>End</kbd>
</th>
<td>moves focus to the last cell in the last row.</td>
</tr>
Expand Down
18 changes: 9 additions & 9 deletions examples/listbox/listbox-rearrangeable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,8 @@ <h2>Accessibility Features</h2>
<ol>
<li>Action buttons have the following shortcuts:
<ul>
<li>&quot;Up&quot;: <kbd>Alt + Up Arrow</kbd></li>
<li>&quot;Down&quot;: <kbd>Alt + Down Arrow</kbd></li>
<li>&quot;Up&quot;: <kbd>Alt</kbd> + <kbd>Up Arrow</kbd></li>
<li>&quot;Down&quot;: <kbd>Alt</kbd> + <kbd>Down Arrow</kbd></li>
<li>&quot;Add&quot;: <kbd>Enter</kbd></li>
<li>&quot;Not Important&quot;, &quot;Important&quot;, and &quot;Remove&quot;: <kbd>Delete</kbd></li>
</ul>
Expand All @@ -194,7 +194,7 @@ <h2>Accessibility Features</h2>
</li>
<li>
Using a shortcut key intentionally places focus to optimize both screen reader and keyboard usability.
For example, pressing <kbd>Alt + Up Arrow</kbd> in the &quot;Important Features&quot; list keeps focus on the option that is moved up,
For example, pressing <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> in the &quot;Important Features&quot; list keeps focus on the option that is moved up,
enabling all keyboard users to easily perform consecutive move operations for an option
and screen reader users to hear the position of an option after it is moved.
Similarly, pressing <kbd>Enter</kbd> in the available options list leaves focus in the available options list.
Expand Down Expand Up @@ -274,25 +274,25 @@ <h4 id="kbd_label_multiselect">Multiple selection keys supported in example 2</h
<td>changes the selection state of the focused option .</td>
</tr>
<tr data-test-id="key-shift-down-arrow">
<th><kbd>Shift + Down Arrow</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Down Arrow</kbd></th>
<td>Moves focus to and selects the next option.</td>
</tr>
<tr data-test-id="key-shift-up-arrow">
<th><kbd>Shift + Up Arrow</kbd></th>
<th><kbd>Shift</kbd> + <kbd>Up Arrow</kbd></th>
<td>Moves focus to and selects the previous option.</td>
</tr>
<tr data-test-id="key-control-shift-home">
<th><kbd>Control + Shift + Home</kbd></th>
<th><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>Home</kbd></th>
<td>Selects from the focused option to the beginning of the list.</td>
</tr>
<tr data-test-id="key-control-shift-end">
<th><kbd>Control + Shift + End</kbd></th>
<th><kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>End</kbd></th>
<td>Selects from the focused option to the end of the list.</td>
</tr>
<tr data-test-id="key-control-a">
<th>
<kbd>Control + A</kbd> (All Platforms)<br>
<kbd>Command-A</kbd> (macOS)
<kbd>Control</kbd> + <kbd>A</kbd> (All Platforms)<br>
<kbd>Command</kbd> + <kbd>A</kbd> (macOS)
</th>
<td>selects all options in the list. If all options are selected, unselects all options.</td>
</tr>
Expand Down
10 changes: 5 additions & 5 deletions examples/treegrid/treegrid-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<h1>Treegrid Email Inbox Example</h1>
<p>
<strong>NOTE:</strong> This example is new in APG 1.1 release 2.
Please provide feedback in
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/790">issue 790.</a>
</p>
<p>
Expand Down Expand Up @@ -203,7 +203,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
<p>
<strong>NOTE:</strong> The following table includes descriptions of how keyboard commands move focus among cells and rows in the treegrid implementation on this page.
In the example on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
So, when a keyboard command description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
So, when a keyboard command description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
</p>
<table aria-labelledby="kbd_label" class="def">
<thead>
Expand Down Expand Up @@ -274,7 +274,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</tr>
<tr data-test-id="key-shift-tab">
<th scope="row">
<kbd>Shift + Tab</kbd>
<kbd>Shift</kbd> + <kbd>Tab</kbd>
</th>
<td>
<ul>
Expand Down Expand Up @@ -307,7 +307,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</tr>
<tr data-test-id="key-control-home">
<th scope="row">
<kbd>Control + Home</kbd>
<kbd>Control</kbd> + <kbd>Home</kbd>
</th>
<td>
<ul>
Expand All @@ -318,7 +318,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
</tr>
<tr data-test-id="key-control-end">
<th scope="row">
<kbd>Control + End</kbd>
<kbd>Control</kbd> + <kbd>End</kbd>
</th>
<td>
<ul>
Expand Down