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
tick its checkbox

use ARROW keys to move selection 1,
or move focus, then hit SPACE

tap on it
or tick its checkbox

-

-

Add/remove an item to
the set of selected items

press Ctrl/Cmd + click it or
tick its checkbox

move focus, then press Ctrl/Cmd + SPACE

tick its checkbox

-

-

Select a range of items

select first item, then
press SPACE + click last item

select first item, then
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).

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"

-

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.

  • No labels