React Diagram - Keyboard Support

A user can press the following keys to interact with the UI component:

Key Action
Ctrl + X / Shift + Delete Cuts the selected elements.
Ctrl + C / Ctrl + Insert Copies the selected elements to the clipboard.
Ctrl + V / Shift + Insert Pastes the contents of the clipboard.
Ctrl + A Selects all elements on the diagram page.
Delete / Backspace Deletes the selected elements.
Ctrl + Z Undoes the last action.
Ctrl + Y Redoes the last undone action.
Ctrl + B Applies bold formatting to the text of the selected elements.
Ctrl + I Applies italic formatting to the text of the selected elements.
Ctrl + U Underlines the text of the selected elements.
Ctrl + Enter Finishes shape/connector text editing.
Arrow Keys Moves the selected elements one grid cell in the specified direction.
Moves focus between toolbar items (left and right arrow keys only).
Ctrl + Arrow Keys Moves the selected elements one pixel in the specified direction.
Alt + Arrow Keys Clones the selected elements.
Home
End		 Moves focus to the first/last item in a toolbar.
Left Mouse Button Drag Moves the selected elements. If you release the mouse button above a container, places the elements inside this container.
Ctrl + Left Mouse Button Drag Moves the selected elements. If you release the mouse button above a container, places the elements outside this container.
Shift + Left Mouse Button Drag Moves the selected elements horizontally or vertically. If you release the mouse button above a container, places the elements outside this container.
Ctrl + Mouse Wheel Zooms into or out of a diagram page.
Space + Left Mouse Button Pans a diagram page if the Diagram UI component is focused.
F11 Switches to full screen.

To navigate between toolbar items using the Tab key, disable allowKeyboardNavigation in Diagram Toolbar instances. Call dxToolbar.defaultOptions() as follows:

jQuery
index.js
DevExpress.ui.dxToolbar.defaultOptions({
    options: {
        onInitialized(e) {
            if ($(e.element).closest('.dx-diagram').length) {
                e.component.option('allowKeyboardNavigation', false);
            }
        }
    }
})
Angular
app.component.ts
import dxToolbar from "devextreme/ui/toolbar";
import { type DxToolbarTypes } from "devextreme-angular/ui/toolbar";
// ...
export class AppComponent {
    constructor() {
        dxToolbar.defaultOptions({
            options: {
                onInitialized(e: DxToolbarTypes.InitializedEvent) {
                    if (e.element?.closest('.dx-diagram')) {
                        e.component?.option('allowKeyboardNavigation', false);
                    }
                }
            }
        })
    }
}
Vue
App.vue
<script setup lang="ts">
import dxToolbar from "devextreme/ui/toolbar";
import { type DxToolbarTypes } from "devextreme-vue/toolbar";

dxToolbar.defaultOptions({
    options: {
        onInitialized(e: DxToolbarTypes.InitializedEvent) {
            if (e.element?.closest('.dx-diagram')) {
                e.component?.option('allowKeyboardNavigation', false);
            }
        }
    }
});
</script>
React
App.tsx
import dxToolbar from "devextreme/ui/toolbar";
import { type ToolbarTypes } from "devextreme-react/toolbar";

dxToolbar.defaultOptions({
    options: {
        onInitialized(e: ToolbarTypes.InitializedEvent) {
            if (e.element?.closest('.dx-diagram')) {
                e.component?.option('allowKeyboardNavigation', false);
            }
        }
    }
});

Replace .dx-diagram with a component ID or class to modify keyboard navigation behavior in a specific component only.

IMPORTANT
If you disable allowKeyboardNavigation, the DevExtreme Toolbar no longer follows the W3C ARIA APG Toolbar Pattern. Your application will be less accessible to users who rely on keyboard navigation.

Refer to the following section for more information: Work with Chart Elements.