Skip to main content
Skip table of contents

Modal Dialogues & Pop Outs Using Keyboard Navigation

VidiEditor uses various dialogs that are displayed on top of the main page or that offer navigation possibilities to sub menus. Those dialogs follow the same rules as far as their design allows it. In general it can be said that following dialogs offering keyboard shortcuts exist:

  • Form dialogs

    • Create/edit project

    • Publish timeline

    • FCP XML Export

    • Create / Edit Timeline

    • Create / Edit Marker

    • Edit Timeline Start Timecode

  • Selection of existing elements

    • Open project

  • Information

    • About dialog

    • Log report

    • Settings

  • Pop outs

    • Project settings navigation

    • Media management burger menu navigation

    • Context menus

All these dialogs are not discussed separately as they have a very similar in their behaviour:

Form Dialogs

On these dialogs, the goal is that a user can quickly and easily navigate through the fields and fill them out without using a mouse. These dialogs allow tabbing through the different input fields.

Shortcut

Interaction

Tab

Forward navigate through all kind of input fields, cancel button, save button.

Shift + Tab

Backward navigate through all kind of input fields, cancel button, save button.

Esc

Close dialog without saving.

Enter

Execute focused input control or button.

The behaviour of the individual input fields depends on their type - expressed in the following table:

String

Shortcut

Interaction

Freetext typing

User can just type in the field and it auto-corrects the format if validation is set in.

Arrow left / Right

Navigate cursor in string.

Shift + Arrow left / Right

Mark part of the string.

Ctr + A

Mark complete string.

Backspace

Delete the marked string.

Boolean

Boolean input field

Shortcut

Interaction

Enter

Switch status of switch if selected.

Date Picker

Shortcut

Interaction

Free-text typing

User can just type in the field and it auto corrects the format.

Enter key on free-text field

Open date selector pop-out.

Arrow keys

Navigate in calendar.

Enter key in pop-out

Use selected as date value.

Number picker

Number picker input field

Shortcut

Interaction

Free-text typing

User can just type in the field and it auto validates the format.

Arrow up/down keys

Count number up / down.

Enumeration / Dropdown

Shortcut

Interaction

Enter key on field

Open dropdown.

Enter key on list

Choose selected as value.

Esc

Close drop down without saving.

Arrow up

Upward navigate through list.

Arrow down

Downward navigate through list.

Arrow keys without pop-out

Navigate through list without pop-out / value switches directly.

Radio Buttons

Shortcut

Interaction

Arrow up

Upward navigate to upper radio button.

Arrow down

Downward navigate to upper radio button.

Selection of Existing Elements

This is basically a similar behaviour to that of the keyboard navigation in the project bin or search pane. Dialogs designed in this way allow for tabbing through elements - especially navigating in result lists using arrow keys and executing user interactions directly on selected elements. The main dialog designed in this way is the Open project dialog as shown below:

Next list provides an overview about the usable keyboard keys in here:

Shortcut

Interaction

Tab

Forward navigate through controls: Search field, search button, Grid

Shift + Tab

Backward navigate through controls: Search field, search button, Grid

Arrow up

Upward navigation in grid

Arrow down

Downwards navigation in grid

Enter

Open Project

Esc

Close dialog without opening

Page up

Navigate to previous page

Page down

Navigate to next page

Information and Pop-Outs

These dialogs are usually very small and offer only basic functionality. The goal is to support a streamlined navigation so a user can navigate via tabbing or via arrow key in these dialogs and execute button via enter. The functionality might differ slightly in the individual dialogs.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.