Skip to main content
Skip table of contents

Modal Dialogues & pop outs using Keyboard Navigation [VE UG]

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

  • Form dialogues

    • Create/edit project

    • Publish timeline

    • FCP XML Export

    • Voice Over recording

  • Selection of existing elements

    • Open project

  • Informations

    • About dialogue

    • Log report

    • Settings

  • Pop outs

    • Project settings navigation

    • Media management burger menu navigation

    • Context menus

All these dialogues are not discussed separately as they have a very similar behavior:

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 behavior 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

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

Date picker input field

Shortcut

Interaction

Freetext typing

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

Enter key on freetext 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

Freetext typing

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

Arrow up/down keys

Count number up / down

Enumeration / Dropdown

Enum input field

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

Radio button input field

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 behavior to that of the keyboard navigation in the project bin or search pane. Dialogs designed in this way allow tabbing through the elements and 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 that is looking as follows:

Open project dialogue

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 slightly differ 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.