Announcing Improved Keyboard Navigation

In our continuous efforts to improve Storyblok’s overall accessibility and work toward compliance with WCAG 2.2 AA standards, we took a closer look at keyboard navigation in our app.

We focused on two areas: the Visual Editor and our drag-and-drop interactions.

Introducing keyboard shortcuts in the Visual Editor

The Visual Editor is at Storyblok’s core and naturally one of the most used areas of the app—this is where the magic happens. Due to its complexity and numerous features, however, it can be quite time-consuming to navigate with the keyboard. That’s why we’re introducing keyboard shortcuts for the most popular actions, making navigation more efficient and transitions between different areas seamless.

Now you can use keyboard shortcuts for frequent actions, including saving and publishing stories, toggling the language selector, and more.

The following table includes all supported actions with their matching keyboard shortcuts:

Action	MacOS	Windows/Linux
Open the Block library	Command + B	Ctrl + B
Open Languages	Shift + L
Show History	Command + Shift + H	Ctrl + Shift + H
Save a story	Command + S	Ctrl + S
Publish a story	Command + Shift + P	Ctrl + Shift + P
Unpublish a story	Command + Shift + U	Ctrl + Shift + U
Open Info	Command + I	Ctrl + I

You can find the keyboard shortcuts in the Visual Editor's right toolbar. There’s no need to activate them or change any settings—they work out of the box.

Accessible drag-and-drop interactions

Drag-and-drop is convenient with a mouse or trackpad. With a keyboard, not so much. This changes now: with our most recent accessibility improvements, you can use the keyboard to reorder items across Storyblok’s UI, including:

• Blocks in the Visual Editor
• Fields in the Block library
• Tabs in the Block library
• Multi-option items in the Block library
• Multi-option and multi-asset items in the Visual Editor
• Datasource entries
• Languages in Settings → Internationalization
• Workflows stages
• Pipelines stages

To reorder items in a list that supports the new functionality, follow the next steps:

1. Press Tab to navigate to the item you want to rearrange.
2. Press Enter or Space to select Reorder, and change the six-dot icon into bidirectional arrows.
3. Press the Up or Down arrow keys to reposition the item in the list.
4. Press Enter again to release the item and set it in its new position.

Screen reader support

When you invoke the drag-and-drop interaction while using a screen reader, you hear a brief explanation once, at the beginning of the list.

Screen readers also announce the actions, as well as the current and updated position.