Keyboard Navigation

Premium

Updated on Oct 7, 2026

The FloatingToolbar inherits the keyboard support of the hosted Toolbar: roving tabindex, arrow-key navigation, Home, End, Enter, and Alt+Down Arrow/Alt+Up Arrow. When draggable is set to true, it also adds a keyboard Move mode.

The following example demonstrates the keyboard support of the FloatingToolbar. Focus the component and try out the documented shortcuts.

Example

View Source

Loading ...

Keyboard Shortcuts

The FloatingToolbar supports the following keyboard shortcuts. The shortcuts for navigating the tools are always available, while the Move mode shortcuts apply only when draggable is set to true.

FloatingToolbar

The following shortcuts let you move the focus to the FloatingToolbar, navigate between its tools, and activate them.

Shortcut	Behavior
Tab	Moves the focus to and from the FloatingToolbar, including the drag handle when draggable is set to true.
Right Arrow	Moves the focus to the next focusable tool. Focuses the first tool if the end of the FloatingToolbar is reached.
Left Arrow	Moves the focus to the previous focusable tool. Focuses the last tool if the beginning of the FloatingToolbar is reached.
Home	Moves the focus to the first focusable tool.
End	Moves the focus to the last focusable tool.
Enter	Clicks the currently active button or changes the state of the currently active toggleable button.

Move Mode

When draggable is set to true, users can reposition the FloatingToolbar by using only the keyboard. The Move mode is the keyboard alternative to dragging the handle with the pointer.

To reposition the FloatingToolbar with the keyboard:

1. Focus the drag handle or any tool in the FloatingToolbar and press M. The FloatingToolbar enters the Move mode, moves the focus to the drag handle, and sets the aria-pressed attribute of the handle to true.
2. Press the arrow keys to move the FloatingToolbar. Each key press moves the component by 1 pixel, and the viewport always bounds the position.
3. Press Enter or Space to keep the new position, or press Escape to restore the position from before the Move mode began.

The Move mode also ends when the focus moves to a tool inside the FloatingToolbar. In this case, the FloatingToolbar keeps the current position. The M key does not activate the Move mode while the focus is in an editable element, such as an input hosted in the FloatingToolbar.

The Move mode raises the same onDragStart, onMove, and onDragEnd events as pointer dragging. The drag flag of the event is false for the keyboard. Calling event.preventDefault() in onDragStart prevents the FloatingToolbar from entering the Move mode.

The following shortcuts are available for the Move mode.

Shortcut	Behavior
M	Activates the keyboard Move mode from the focused drag handle or hosted Toolbar item. Focus moves to the drag handle.
Arrow Left / Arrow Right	While Move mode is active, moves the FloatingToolbar left or right.
Arrow Up / Arrow Down	While Move mode is active, moves the FloatingToolbar up or down.
Enter / Space	While Move mode is active, keeps the FloatingToolbar in its new position and exits Move mode.
Escape	While Move mode is active, restores the position from before the mode began and exits Move mode.

Managing the Focus

The hosted Toolbar is a single tab stop. When draggable is set to true, the FloatingToolbar adds a second, independent tab stop for the drag handle, which precedes the hosted Toolbar in the tab order. Focus returns to the previously focused element when the component is unmounted while holding focus.

Resources

The keyboard support of the FloatingToolbar follows the guidelines of the following WAI-ARIA pattern:

WAI-ARIA Authoring Practices: Toolbar Pattern

See Also

• Accessibility in KendoReact
• Accessibility Compliance and Keyboard Support in KendoReact