diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx index cbe01b8c..3baea708 100644 --- a/packages/react/src/components/EdgeWrapper/index.tsx +++ b/packages/react/src/components/EdgeWrapper/index.tsx @@ -34,6 +34,7 @@ export function EdgeWrapper({ edgeTypes, noPanClassName, onError, + disableKeyboardA11y, }: EdgeWrapperProps): JSX.Element | null { let edge = useStore((s) => s.edgeLookup.get(id)!) as EdgeType; const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions); @@ -160,7 +161,7 @@ export function EdgeWrapper({ : undefined; const onKeyDown = (event: KeyboardEvent) => { - if (elementSelectionKeys.includes(event.key) && isSelectable) { + if (!disableKeyboardA11y && elementSelectionKeys.includes(event.key) && isSelectable) { const { unselectNodesAndEdges, addSelectedEdges } = store.getState(); const unselect = event.key === 'Escape'; diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index 6d2231d9..87d80490 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -174,7 +174,7 @@ export function NodeWrapper({ }; const onKeyDown = (event: KeyboardEvent) => { - if (isInputDOMNode(event.nativeEvent)) { + if (isInputDOMNode(event.nativeEvent) || disableKeyboardA11y) { return; } @@ -187,12 +187,7 @@ export function NodeWrapper({ unselect, nodeRef, }); - } else if ( - !disableKeyboardA11y && - isDraggable && - node.selected && - Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key) - ) { + } else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) { store.setState({ ariaLiveMessage: `Moved selected node ${event.key .replace('Arrow', '') diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx index 3112179e..6636e833 100644 --- a/packages/react/src/container/EdgeRenderer/index.tsx +++ b/packages/react/src/container/EdgeRenderer/index.tsx @@ -56,6 +56,7 @@ function EdgeRendererComponent({ onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, + disableKeyboardA11y, }: EdgeRendererProps) { const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow); const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements); @@ -86,6 +87,7 @@ function EdgeRendererComponent({ rfId={rfId} onError={onError} edgeTypes={edgeTypes} + disableKeyboardA11y={disableKeyboardA11y} /> ); })} diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index dac682db..602f2c34 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -83,6 +83,7 @@ export type EdgeWrapperProps = { rfId?: string; edgeTypes?: EdgeTypes; onError?: OnError; + disableKeyboardA11y?: boolean; }; export type DefaultEdgeOptions = DefaultEdgeOptionsBase;