Skip to content

All: Normalize keyboard interaction markup #222

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

Closed
wants to merge 3 commits into from
Closed

All: Normalize keyboard interaction markup #222

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d66bf5
All: Normalize keyboard interaction markup
scottgonzalez Aug 5, 2014
5ab484b
[fixup]: ALT/OPTION
scottgonzalez Aug 6, 2014
ed66524
[fixup]: Switch back to colons
scottgonzalez Aug 6, 2014
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
12 changes: 6 additions & 6 deletions entries/accordion.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@

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

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

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
Expand Down
14 changes: 7 additions & 7 deletions entries/autocomplete.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@

<p>When the menu is open, the following key commands are available:</p>
<ul>
<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>
<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>
<li>ESCAPE - Close the menu.</li>
<li>ENTER - Select the currently focused item and close the menu.</li>
<li>TAB - Select the currently focused item, close the menu, and move focus to the next focusable element.</li>
<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>
<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>
<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>
<li><code>ESCAPE</code> - Close the menu.</li>
<li><code>ENTER</code> - Select the currently focused item and close the menu.</li>
<li><code>TAB</code> - Select the currently focused item, close the menu, and move focus to the next focusable element.</li>
<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>
</ul>

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

<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
Expand Down
26 changes: 13 additions & 13 deletions entries/datepicker.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@
<h3>Keyboard interaction</h3>
<p>While the datepicker is open, the following key commands are available:</p>
<ul>
<li><code>PAGE UP</code>: Move to the previous month.</li>
<li><code>PAGE DOWN</code>: Move to the next month.</li>
<li><code>CTRL</code> + <code>PAGE UP</code>: Move to the previous year.</li>
<li><code>CTRL</code> + <code>PAGE DOWN</code>: Move to the next year.</li>
<li><code>CTRL</code> + <code>HOME</code>: Open the datepicker if closed.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>HOME</code>: Move to the current month.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>LEFT</code>: Move to the previous day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>RIGHT</code>: Move to the next day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>UP</code>: Move to the previous week.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>DOWN</code>: Move the next week.</li>
<li><code>ENTER</code>: Select the focused date.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>END</code>: Close the datepicker and erase the date.</li>
<li><code>ESCAPE</code>: Close the datepicker without selection.</li>
<li><code>PAGE UP</code> - Move to the previous month.</li>
<li><code>PAGE DOWN</code> - Move to the next month.</li>
<li><code>CTRL</code> + <code>PAGE UP</code> - Move to the previous year.</li>
<li><code>CTRL</code> + <code>PAGE DOWN</code> - Move to the next year.</li>
<li><code>CTRL</code> + <code>HOME</code> - Open the datepicker if closed.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>HOME</code> - Move to the current month.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>LEFT</code> - Move to the previous day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>RIGHT</code> - Move to the next day.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>UP</code> - Move to the previous week.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>DOWN</code> - Move the next week.</li>
<li><code>ENTER</code> - Select the focused date.</li>
<li><code>CTRL</code>/<code>COMMAND</code> + <code>END</code> - Close the datepicker and erase the date.</li>
<li><code>ESCAPE</code> - Close the datepicker without selection.</li>
</ul>

<h3 id="utility-functions">Utility functions</h3>
Expand Down
12 changes: 6 additions & 6 deletions entries/menu.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@
<h3>Keyboard interaction</h3>

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

<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>
Expand Down
26 changes: 13 additions & 13 deletions entries/selectmenu.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@

<p>When the menu is open, the following key commands are available:</p>
<ul>
<li>UP/LEFT: Move focus to the previous item.</li>
<li>DOWN/RIGHT: Move focus to the next item.</li>
<li>END/PAGE DOWN: Move focus to the last item.</li>
<li>HOME/PAGE UP: Move focus to the first item.</li>
<li>ESCAPE: Close the menu.</li>
<li>ENTER/SPACE: Select the currently focused item and close the menu.</li>
<li>ALT+UP/DOWN: Toggle the visibility of the menu.</li>
<li><code>UP</code>/<code>LEFT</code> - Move focus to the previous item.</li>
<li><code>DOWN</code>/<code>RIGHT</code> - Move focus to the next item.</li>
<li><code>END</code>/<code>PAGE DOWN</code> - Move focus to the last item.</li>
<li><code>HOME</code>/<code>PAGE UP</code> - Move focus to the first item.</li>
<li><code>ESCAPE</code> - Close the menu.</li>
<li><code>ENTER</code>/<code>SPACE</code> - Select the currently focused item and close the menu.</li>
<li><code>ALT</code> + <code>UP</code>/<code>DOWN</code> - Toggle the visibility of the menu.</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ALT / OPTION ?

</ul>

<p>When the menu is closed, the following key commands are available:</p>
<ul>
<li>UP/LEFT: Select the previous item.</li>
<li>DOWN/RIGHT: Select the next item.</li>
<li>END/PAGE DOWN: Select the last item.</li>
<li>HOME/PAGE UP: Select the first item.</li>
<li>ALT+UP/DOWN: Toggle the visibility of the menu.</li>
<li>SPACE: Open the menu.</li>
<li><code>UP</code>/<code>LEFT</code> - Select the previous item.</li>
<li><code>DOWN</code>/<code>RIGHT</code> - Select the next item.</li>
<li><code>END</code>/<code>PAGE DOWN</code> - Select the last item.</li>
<li><code>HOME</code>/<code>PAGE UP</code> - Select the first item.</li>
<li><code>ALT</code> + <code>UP</code>/<code>DOWN</code> - Toggle the visibility of the menu.</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ditto

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose we can do that everywhere. Are their Mac keyboards that don't write "alt" on the option key?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They all do to my knowledge, but referring to the key as “option” is common, and I don't think it hurts to be explicit here.

<li><code>SPACE</code> - Open the menu.</li>
</ul>
</longdesc>
<note id="functional-css"/>
Expand Down
8 changes: 4 additions & 4 deletions entries/spinner.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
<h3>Keyboard interaction</h3>

<ul>
<li>UP: Increment the value by one step.</li>
<li>DOWN: Decrement the value by one step.</li>
<li>PAGE UP: Increment the value by one page.</li>
<li>PAGE DOWN: Decrement the value by one page.</li>
<li><code>UP</code> - Increment the value by one step.</li>
<li><code>DOWN</code> - Decrement the value by one step.</li>
<li><code>PAGE UP</code> - Increment the value by one page.</li>
<li><code>PAGE DOWN</code> - Decrement the value by one page.</li>
</ul>

<p>Focus stays in the text field, even after using the mouse to click one of the spin buttons.</p>
Expand Down
22 changes: 11 additions & 11 deletions entries/tabs.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,21 @@

<p>When focus is on a tab, the following key commands are available:</p>
<ul>
<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>
<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>
<li>HOME: Move focus to the first tab. Activate focused tab after a short delay.</li>
<li>END: Move focus to the last tab. Activate focused tab after a short delay.</li>
<li>SPACE: Activate panel associated with focused tab.</li>
<li>ENTER: Activate or toggle panel associated with focused tab.</li>
<li>ALT+PAGE UP: Move focus to the previous tab and immediately activate.</li>
<li>ALT+PAGE DOWN: Move focus to the next tab and immediately activate.</li>
<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>
<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>
<li><code>HOME</code> - Move focus to the first tab. Activate focused tab after a short delay.</li>
<li><code>END</code> - Move focus to the last tab. Activate focused tab after a short delay.</li>
<li><code>SPACE</code> - Activate panel associated with focused tab.</li>
<li><code>ENTER</code> - Activate or toggle panel associated with focused tab.</li>
<li><code>ALT</code> + <code>PAGE UP</code> - Move focus to the previous tab and immediately activate.</li>
<li><code>ALT</code> + <code>PAGE DOWN</code> - Move focus to the next tab and immediately activate.</li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comments about OPTION here and below.

</ul>

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

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