Keyboard Navigation

The keyboard navigation of the Toolbar is always available.

The Toolbar supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Left Arrow & Right ArrowMoves the focus to the next available tool that can be focused.
EnterClicks the currently active button or changes the state of the currently active toggleable button.
TabMoves the focus to and from the Toolbar.
Alt+Down ArrowOpens the currently active SplitButton or DropDownButton.
Alt+Up ArrowCloses the currently active SplitButton or DropDownButton.
class ToolbarContainer extends React.Component {
    render() {
        return (
            <Toolbar>
                <ToolbarItem>
                    <ButtonGroup>
                        <Button icon="bold" title="Bold" togglable={true} />
                        <Button icon="italic" title="Italic" togglable={true} />
                        <Button icon="underline" title="Underline" togglable={true} />
                    </ButtonGroup>
                </ToolbarItem>
                <ToolbarItem>
                    <ButtonGroup>
                        <Button icon="align-left" title="Align Left" togglable={true} />
                        <Button icon="align-center" title="Align Center" togglable={true} />
                        <Button icon="align-right" title="Align Right" togglable={true} />
                        <Button icon="align-justify" title="Align Justify" togglable={true} />
                    </ButtonGroup>
                </ToolbarItem>
                <ToolbarItem>
                    <SplitButton text="Insert">
                        <SplitButtonItem icon="image" text="Image" />
                        <SplitButtonItem icon="table" text="Table" />
                    </SplitButton>
                </ToolbarItem>
                <ToolbarSeparator />
                <ToolbarItem>
                    <Button icon="cut" title="Cut">Cut</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <Button icon="copy" title="Copy">Copy</Button>
                </ToolbarItem>
                <ToolbarItem>
                    <DropDownButton text="Paste" icon="paste">
                        <DropDownButtonItem icon="text" text="Plain Text" />
                        <DropDownButtonItem icon="html" text="HTML" />
                    </DropDownButton>
                </ToolbarItem>
            </Toolbar>
        );
    }
}
ReactDOM.render(
    <ToolbarContainer/>,
    document.querySelector('my-app')
);

Controlling the Focus

All focus movements inside the Toolbar are managed according to the logic of the roving tabindex. When the user navigates through the tabs, the Toolbar focuses either the first tool or the tool that was last focused.

 /