Custom Keyboard Navigation

Introduction

The email, page, and popup builders use ARIA APG patterns, following accessibility best practices, for keyboard navigation. Reference the ARIA Authoring Practices Guide (APG) documentation for more information on these patterns.

In addition to the ARIA APG patterns, the builder also includes a few custom keyboard navigation patterns. These patterns were created with an optimal end user experience in mind, and serve as additional key options for a smooth navigation experience. This page lists and discusses these additional keyboard options and when to use them.

Stage

When the stage is focused:

• ArrowUp and ArrowDown move through rows

• Enter focuses the inner block

• ArrowUp and ArrowDown move through blocks

• Enter starts editing text blocks or moves the focus to the action buttons in placeholder blocks

• Escape navigates back through levels

• In textual blocks, Alt+F10 (or Option+F10 on Mac) moves focus to the toolbar

Drag & Drop

Stage elements and sidebar sortable elements (e.g., social icons, icons, form fields, menu items, and carousel slides):

• Draggable elements usually have a drag handle. When a drag handle is focused, press Enter to start dragging.

• Once dragging has started, ArrowUp and ArrowDown cycle through possible drop positions.

• While dragging in the stage, you can press t (top) or b (bottom) to switch between dropping above or below the target element.

• Press Enter to drop the element in the new position, or Escape to cancel.

Sidebar Sortable Elements

(Social icons, icons, form fields, menu items, and carousel slides):

• When focus is on a drag handle, ArrowUp and ArrowDown can be used to jump from one element to another.