Skip to content

Commit b0000c6

Browse files
scottgonzalezscottgonzalez
committed
All: Normalize keyboard interaction markup
Closes gh-222
1 parent a53d243 commit b0000c6

File tree

6 files changed

+47
-47
lines changed

6 files changed

+47
-47
lines changed

‎entries/accordion.xml

+6-6
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121

2222
<p>When focus is on a header, the following key commands are available:</p>
2323
<ul>
24-
<li>UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.</li>
25-
<li>DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.</li>
26-
<li>HOME - Move focus to the first header.</li>
27-
<li>END - Move focus to the last header.</li>
28-
<li>SPACE/ENTER - Activate panel associated with focused header.</li>
24+
<li><code>UP</code>/<code>LEFT</code>: Move focus to the previous header. If on first header, moves focus to last header.</li>
25+
<li><code>DOWN</code>/<code>RIGHT</code>: Move focus to the next header. If on last header, moves focus to first header.</li>
26+
<li><code>HOME</code>: Move focus to the first header.</li>
27+
<li><code>END</code>: Move focus to the last header.</li>
28+
<li><code>SPACE</code>/<code>ENTER</code>: Activate panel associated with focused header.</li>
2929
</ul>
3030

3131
<p>When focus is in a panel:</p>
3232
<ul>
33-
<li>CTRL+UP: Move focus to associated header.</li>
33+
<li><code>CTRL</code> + <code>UP</code>: Move focus to associated header.</li>
3434
</ul>
3535

3636
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

‎entries/autocomplete.xml

+7-7
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,17 @@
1515

1616
<p>When the menu is open, the following key commands are available:</p>
1717
<ul>
18-
<li>UP - Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item.</li>
19-
<li>DOWN - Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.</li>
20-
<li>ESCAPE - Close the menu.</li>
21-
<li>ENTER - Select the currently focused item and close the menu.</li>
22-
<li>TAB - Select the currently focused item, close the menu, and move focus to the next focusable element.</li>
23-
<li>PAGE UP/DOWN - Scroll through a page of items (based on height of menu). <em>It's generally a bad idea to display so many items that users need to page.</em>.</li>
18+
<li><code>UP</code>: Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item.</li>
19+
<li><code>DOWN</code>: Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.</li>
20+
<li><code>ESCAPE</code>: Close the menu.</li>
21+
<li><code>ENTER</code>: Select the currently focused item and close the menu.</li>
22+
<li><code>TAB</code>: Select the currently focused item, close the menu, and move focus to the next focusable element.</li>
23+
<li><code>PAGE UP</code>/<code>PAGE DOWN</code>: Scroll through a page of items (based on height of menu). <em>It's generally a bad idea to display so many items that users need to page.</em></li>
2424
</ul>
2525

2626
<p>When the menu is closed, the following key commands are available:</p>
2727
<ul>
28-
<li>UP/DOWN - Open the menu, if the <a href="#option-minLength"><code>minLength</code></a> has been met.</li>
28+
<li><code>UP</code>/<code>DOWN</code>: Open the menu, if the <a href="#option-minLength"><code>minLength</code></a> has been met.</li>
2929
</ul>
3030

3131
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

‎entries/menu.xml

+6-6
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@
5555
<h3>Keyboard interaction</h3>
5656

5757
<ul>
58-
<li>ENTER/SPACE: Invoke the focused menu item's action, which may be opening a submenu.</li>
59-
<li>UP: Move focus to the previous menu item.</li>
60-
<li>DOWN: Move focus to the next menu item.</li>
61-
<li>RIGHT: Open the submenu, if available.</li>
62-
<li>LEFT: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.</li>
63-
<li>ESCAPE: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.</li>
58+
<li><code>ENTER</code>/<code>SPACE</code>: Invoke the focused menu item's action, which may be opening a submenu.</li>
59+
<li><code>UP</code>: Move focus to the previous menu item.</li>
60+
<li><code>DOWN</code>: Move focus to the next menu item.</li>
61+
<li><code>RIGHT</code>: Open the submenu, if available.</li>
62+
<li><code>LEFT</code>: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.</li>
63+
<li><code>ESCAPE</code>: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.</li>
6464
</ul>
6565

6666
<p>Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.</p>

‎entries/selectmenu.xml

+13-13
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,23 @@
1111

1212
<p>When the menu is open, the following key commands are available:</p>
1313
<ul>
14-
<li>UP/LEFT: Move focus to the previous item.</li>
15-
<li>DOWN/RIGHT: Move focus to the next item.</li>
16-
<li>END/PAGE DOWN: Move focus to the last item.</li>
17-
<li>HOME/PAGE UP: Move focus to the first item.</li>
18-
<li>ESCAPE: Close the menu.</li>
19-
<li>ENTER/SPACE: Select the currently focused item and close the menu.</li>
20-
<li>ALT+UP/DOWN: Toggle the visibility of the menu.</li>
14+
<li><code>UP</code>/<code>LEFT</code>: Move focus to the previous item.</li>
15+
<li><code>DOWN</code>/<code>RIGHT</code>: Move focus to the next item.</li>
16+
<li><code>END</code>/<code>PAGE DOWN</code>: Move focus to the last item.</li>
17+
<li><code>HOME</code>/<code>PAGE UP</code>: Move focus to the first item.</li>
18+
<li><code>ESCAPE</code>: Close the menu.</li>
19+
<li><code>ENTER</code>/<code>SPACE</code>: Select the currently focused item and close the menu.</li>
20+
<li><code>ALT</code>/<code>OPTION</code> + <code>UP</code>/<code>DOWN</code>: Toggle the visibility of the menu.</li>
2121
</ul>
2222

2323
<p>When the menu is closed, the following key commands are available:</p>
2424
<ul>
25-
<li>UP/LEFT: Select the previous item.</li>
26-
<li>DOWN/RIGHT: Select the next item.</li>
27-
<li>END/PAGE DOWN: Select the last item.</li>
28-
<li>HOME/PAGE UP: Select the first item.</li>
29-
<li>ALT+UP/DOWN: Toggle the visibility of the menu.</li>
30-
<li>SPACE: Open the menu.</li>
25+
<li><code>UP</code>/<code>LEFT</code>: Select the previous item.</li>
26+
<li><code>DOWN</code>/<code>RIGHT</code>: Select the next item.</li>
27+
<li><code>END</code>/<code>PAGE DOWN</code>: Select the last item.</li>
28+
<li><code>HOME</code>/<code>PAGE UP</code>: Select the first item.</li>
29+
<li><code>ALT</code>/<code>OPTION</code> + <code>UP</code>/<code>DOWN</code>: Toggle the visibility of the menu.</li>
30+
<li><code>SPACE</code>: Open the menu.</li>
3131
</ul>
3232
</longdesc>
3333
<note id="functional-css"/>

‎entries/spinner.xml

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<h3>Keyboard interaction</h3>
1313

1414
<ul>
15-
<li>UP: Increment the value by one step.</li>
16-
<li>DOWN: Decrement the value by one step.</li>
17-
<li>PAGE UP: Increment the value by one page.</li>
18-
<li>PAGE DOWN: Decrement the value by one page.</li>
15+
<li><code>UP</code>: Increment the value by one step.</li>
16+
<li><code>DOWN</code>: Decrement the value by one step.</li>
17+
<li><code>PAGE UP</code>: Increment the value by one page.</li>
18+
<li><code>PAGE DOWN</code>: Decrement the value by one page.</li>
1919
</ul>
2020

2121
<p>Focus stays in the text field, even after using the mouse to click one of the spin buttons.</p>

‎entries/tabs.xml

+11-11
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,21 @@
3838

3939
<p>When focus is on a tab, the following key commands are available:</p>
4040
<ul>
41-
<li>UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.</li>
42-
<li>DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.</li>
43-
<li>HOME: Move focus to the first tab. Activate focused tab after a short delay.</li>
44-
<li>END: Move focus to the last tab. Activate focused tab after a short delay.</li>
45-
<li>SPACE: Activate panel associated with focused tab.</li>
46-
<li>ENTER: Activate or toggle panel associated with focused tab.</li>
47-
<li>ALT+PAGE UP: Move focus to the previous tab and immediately activate.</li>
48-
<li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
41+
<li><code>UP</code>/<code>LEFT</code>: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.</li>
42+
<li><code>DOWN</code>/<code>RIGHT</code>: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.</li>
43+
<li><code>HOME</code>: Move focus to the first tab. Activate focused tab after a short delay.</li>
44+
<li><code>END</code>: Move focus to the last tab. Activate focused tab after a short delay.</li>
45+
<li><code>SPACE</code>: Activate panel associated with focused tab.</li>
46+
<li><code>ENTER</code>: Activate or toggle panel associated with focused tab.</li>
47+
<li><code>ALT</code>/<code>OPTION</code> + <code>PAGE UP</code>: Move focus to the previous tab and immediately activate.</li>
48+
<li><code>ALT</code>/<code>OPTION</code> + <code>PAGE DOWN</code>: Move focus to the next tab and immediately activate.</li>
4949
</ul>
5050

5151
<p>When focus is in a panel, the following key commands are available:</p>
5252
<ul>
53-
<li>CTRL+UP: Move focus to associated tab.</li>
54-
<li>ALT+PAGE UP: Move focus to the previous tab and immediately activate.</li>
55-
<li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
53+
<li><code>CTRL</code> + <code>UP</code>: Move focus to associated tab.</li>
54+
<li><code>ALT</code>/<code>OPTION</code> + <code>PAGE UP</code>: Move focus to the previous tab and immediately activate.</li>
55+
<li><code>ALT</code>/<code>OPTION</code> + <code>PAGE DOWN</code>: Move focus to the next tab and immediately activate.</li>
5656
</ul>
5757

5858
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>

0 commit comments

Comments
 (0)