Wunderlist

Can I use Keyboard Navigation in Wunderlist?

Web App Keyboard Navigation

The Wunderlist web app is fully navigable via keyboard interaction.  The UI of the Wunderlist web application is divided into three main areas: the sidebar which contains lists, folders and the user toolbar, the task browser which contains tasks, the add task input field, and action bar, and the detail view which contains task details such as subtasks, attachments, note and comments.

Navigating the main sections of the Wunderlist Web app

Sidebar 

When Wunderlist starts up for the first time, the interface should be focused on your Inbox.  From here you can use the Up and Down arrow keys to navigate between your lists and folders.

To edit a list’s details (title, members, etc.) press Enter on a selected list. This will bring up the List Details view.

You can delete a selected list via the default shortcut of Control+Backspace.  Global shortcuts are editable in the Shortcuts tab of your Account Settings.

To navigate to a list’s tasks, press the right arrow (>) or the Tab key from a selected list.

To navigate up into the user bar to reach search, activities, comments as well as the user menu, press Shift+Tab from any selected list.

To open the user menu immediately, type Escape from any selected list or folder.

To expand a collapsed folder press the right arrow.  To collapse an expanded folder, press the left arrow.  To toggle collapsed or expanded, press enter or space on a focused folder.  Press tab to focus the edit folder icon from a focused folder.  Press enter to open the folder options popover.  Use up and down arrows or tab to navigate the folder options.  Press enter to take an action.


Task Browser
From a focused task you can navigate other tasks using the Up and Down arrows.  To focus the add task input, you can use the global shortcut Ctrl+N or Shift+Tab from a selected task.  To toggle the Detail View expanded or collapsed, press Spacebar on a focused task.  To jump straight to editing a task’s title, press enter on a selected task.

To navigate down to the the Action bar, press Tab from any focused task.

To navigate to the Detail View, continue tabbing through the Action bar until the Detail view becomes focused.

To navigate to Sidebar use the Left key, or the Escape key.


Detail View
From a focused task, you can navigate into the detail view by pressing Enter to start editing the title, or Tab through the Action Bar until the Detail View is focused.

To navigate between the different main sub-sections of the Detail View, use the Tab key.  To enter Edit mode for any task attribute, use the Enter key. To exit Edit mode for any task, use the Escape key.

To navigate items within a sub-section of the Detail View (e.g. subtasks, files, or comments) use the Arrow keys.

To navigate back to the browser view, use the left arrow key, or the Escape key.

Additionally, the Tab key will cycle through all interactive buttons of the Detail View.

Navigating through Subsections of the Wunderlist UI

User Bar
The User Bar  containing Search, Activities, Conversations and the User Menu  is accessed via Shift+Tab from a focused sidebar List or Folder.  Hitting Enter on the Search button will open and focus the search input.  Hitting Enter on the Activities or Conversations buttons will open a popover.  Hitting Enter on your focused Avatar will open the User Menu. Use Tab to navigate through the items of the different User Bar popovers.

To leave the User Bar, tab through all the items, or hit Escape from an open popover. 

Add Task View
The Add Task View can be reached via Shift+Tab when a task is in focus. Type the task title then press Enter to create the task. Press Escape to cancel.  You can leave the Add Task View via Tab or the Escape key.

Action Bar 
To reach the Action Bar, press Tab from a focused task item.  To open the actions available for an Action Bar item, hit the Enter key.  To navigate through the available actions, use Tab and Shift+Tab. To take an action, hit Enter.

To leave the Action Bar, use Tab, Shift+Tab, or Escape to navigate to the Detail View, back to the task browser, or to escape out to the sidebar.

Detail View
A task’s completed and starred state can be toggled via checkboxes that are reachable via the tab key.  Press enter to toggle.

The title field can be reached via the tab key.  Press enter to enter edit mode when the title field is in focus.  Press enter to confirm changes or escape to cancel.

Due Date
The due date field can be reached via the tab key when the detail view is focused.  Enter edit mode by pressing enter when the due date field is in focus.  Use the arrow keys to adjust the due date.  Press enter to confirm your changes, or escape to cancel.

Reminder
The Reminder field can be reached via the Tab key when the Detail View is focused.  Enter Edit mode by pressing Enter when the Reminder field is in focus.  Use Tab to navigate fields, and the Arrow keys to adjust the date or time. Press Enter to confirm your changes, or Escape to cancel.

Subtasks
Subtasks can be reached via the Tab key while the detail view is focused.  You can navigate between subtasks using the arrow keys.  You can completed subtasks that are in focus by using the default Ctrl+D keyboard shortcut, or the combination you have set in your user settings.  You can delete Subtasks by highlighting each one and using the default Control+Backspace shortcut, or the combination you set in your Shortcuts User Settings.

Note
A task’s Note can be reached via the Tab key while the detail view is focused.  You can enter Fullscreen Edit mode by tabbing to the Open In Full Screen button from a focused Note.  You can enter Edit mode by hitting Enter on a focused note.

Files
Files can be reached via the Tab key while the Detail View is focused.  You can navigate between files using the Arrow keys. You can open a file by pressing Enter on a focused file.  You can delete Files by using the default Control+Backspace shortcut, or the combination you set in your Shortcuts User Settings.

Comments
Comments can be reached via the Tab key while the Detail View is focused.  You can navigate between Comments using the Arrow keys.  You can delete a Comment you made by using the default Control+Backspace shortcut, or the combination you set in your Shortcuts User Settings.

Did you find this article helpful?