Keyboard Navigation
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.
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, you can reposition the FloatingToolBar by using only the keyboard. Press M to activate the Move mode, use the arrow keys to move the component, and then confirm or cancel the new position. The following shortcuts are available while the Move mode is active.
| Shortcut | Behavior |
|---|---|
M | Activates the keyboard Move mode from the focused drag handle or hosted ToolBar item. Focus moves to the drag handle. |
Enter / Space | While the drag handle is focused, activates the keyboard Move mode. |
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. |
Escape | While Move mode is active, restores the position from before the mode began and exits Move mode. |
Enter / Space | While Move mode is active, locks the FloatingToolBar in its new position 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 destroyed 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