This page lists all commands for the three input methods mouse, keyboard and touch and helps to keep track and avoid inconsistencies.
The table is grouped into sections, which define blocks. A block defines all commands of a singular type of usage such as the navigation of grids. It is linked to a corresponding page, which describes the details.
In all tables below, the modifier keys mentioned consists of a pair of keys, the first denoting the Windows and Linux platforms, the second the Mac platform (e.g. Ctrl/Cmd means hit and hold "Ctrl" on Windows, "Cmd" on Mac). The toolbar is visible on top in some views. Using the menu refers to either opening the context menu or using the commands menu on the right or in the toolbox, then selecting the command stated in the column.
Implementation notes, comments and discussions points appear [UX:between brackets].
Implementation note
We should avoid using the Ctrl/Cmd modifier key except for browser support shortcuts such as Undo/Redo, as it generally interferes with OS and browser commands. We use Alt/Alt instead.
General
Mouse Keyboard Touch Using toolbar Using menu Open context menu Right-click on an item. 1 Select or focus item, then Alt/Alt+M. Select item and hold. - -
1) You can move the focus or selection on the item first, but there's actually no need to do so.
Focusing and selecting items
Mouse Keyboard Touch Using toolbar Using menu Focus an item - use Ctrl/Cmd + ARROW keys to move focus. - - - Select an item click it or use ARROW keys to move selection 1, tap on it - - Add/remove an item to press Ctrl/Cmd + click it or move focus, then press Ctrl/Cmd + SPACE tick its checkbox - - Select a range of items select first item, then select first item, then - - -
tick its checkbox
or move focus, then hit SPACE
or tick its checkbox
the set of selected items
tick its checkbox
press SPACE + click last item
press SPACE and use ARROWS to move to last
1) Using the arrow keys actually moves the selection and thus also deselects the currently selected item.
Opening and editing items
Open an item double-click it select it, then ENTER double-tap it. [Can't confirm whether this works out-of-the-box in Vaadin. Might be problematic.] - select it, then choose "preview/open" 1 Edit an item - select it, then Alt/Alt+E. - - select it, then choose "edit" 2 Edit structure of item - select it, then Alt/Alt+Shift+E. - - select it, then choose "edit structure" 2
1) Opening an item always means opening it for viewing (e.g. open the preview of a page)
2) Depending on the group and permissions of a logged in user, an action to edit an item might be unavailable.
Navigating a tree
Mouse Keyboard Touch Using toolbar Using menu Working with folder items Expand folder item click on "expand" icon Focus or select folder item, then RIGHT (LEFT on RTL) tap on "expand" icon - - Return to parent folder item - Focus or select any sub item, then LEFT (RIGHT on RTL) - - - Collapse folder item click on "collapse" icon Focus or select any sub item, then LEFT (RIGHT on RTL) to first focus parent folder item, then LEFT (RIGHT on RTL) again to collapse tap on "collapse" icon - - Note that opening a folder item to show sub items is not supported. Instead, you expand the folder item in a tree. Please note also that we currently have not defined that double-clicking on a folder item with no content does expand it to show sub items (see also #Navigating a grid). Mouse Keyboard Touch Using toolbar Using menu Working with folder items Open folder item with no content 1 double-click it select it, then ENTER double-tap it. [Can't confirm whether this works out-of-the-box in Vaadin. Might be problematic.] - Select item, then choose "open folder" Open folder item with content 1 Focus or select item, then Alt/Alt + double click Focus or select item, then Alt/Alt+ENTER - - Select item, then choose "open folder" Return to parent folder item - Focus or select any sub item, then Alt/Alt+UP - Choose "Up" -
Navigating a grid
1) Note that this means: open the folder item so that sub items get visible. Note also that because these two cases exist, it must be visually clear, if a folder item has own content or not. It is natural to double click on a folder to open it. But it must be clear from the icon that double-clicking a page with sub pages opens the page for editing. See also the note here.
Navigating a list
Mouse Keyboard Touch Using toolbar Using menu Working with folder items Open folder item with no content 1 double-click it select it, then ENTER double-tap it. [Can't confirm whether this works out-of-the-box in Vaadin. Might be problematic.] - Select item, then choose "open folder" Open folder item with content 1 Focus or select item, then Alt/Alt + double click Focus or select item, then Alt/Alt+ENTER - - Select item, then choose "open folder" Return to parent folder item - Focus or select any sub item, then Alt/Alt+UP - Choose "Up" -
1) Note that this means: open the folder item so that sub items get visible. Note also that because these two cases exist, it must be visually clear, if a folder item has own content or not. It is natural to double click on a folder to open it. But it must be clear from the icon that double-clicking a page with sub pages opens the page for editing. See also the note here.
Inline editing in tree or list
Mouse Keyboard Touch Using toolbar Using menu Start inline editing an attribute select item, wait, then click on an attribute select an item, then Shift+ENTER 1 select item, wait, then tap on an attribute - - Inline edit next attribute - while inline editing an attribute, hit TAB to edit the next 2 - - - Save changes (see kbd) hit ENTER (see kbd) - - Cancel changes click outside attribute (or see kbd) hit ESC tap outside attribute (or see kbd) - -
1) Makes first of all editable attribute editable
2) Changes made to the current attribute are saved before skipping to the next.
Using the Clipboard
Mouse Keyboard Touch Using toolbar Using menu Copy selected item(s) - Ctrl/Cmd+C - use "copy" button - Paste item(s) in clipboard - Select target item, then Ctrl/Cmd+V - Select target item, then hit "paste" button - Show tooltip and highlight affected items - move focus on "paste" button, wait 1 sec - right-click/tap and hold the "paste" button - Show just the tooltip hover mouse over "paste" button - - - -
Using Undo/Redo
Mouse Keyboard Touch Using toolbar Using menu Undo last command - Ctrl/Cmd+Z - Use "undo" button - Redo last command - Shift/Shift + Ctrl/Cmd+Z - Use "redo" button - Show tooltip and highlight affected items - move focus on "paste" button, wait 1 sec - right-click/tap and hold the "undo" or "redo" button - Show just the tooltip hover mouse over "undo" or "redo" button - - - -
Page Structure Editing
Mouse Keyboard Touch Using toolbar Using menu Close structure view Use "Done" button Focus or select paragraph or area, then hit ESC Use "Done" button - -
See also definitions for #opening and editing items above.