= {
+ 'a11yDescription.node.default':
+ 'Press enter or space to select a node. Press delete to remove it and escape to cancel.',
+ 'a11yDescription.node.keyboardDisabled':
+ 'Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.',
+ 'a11yDescription.edge.default':
+ 'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
+};
+
const selector = (s: ReactFlowState) => s.ariaLiveMessage;
function AriaLiveMessage({ rfId }: { rfId: string }) {
@@ -32,16 +42,28 @@ function AriaLiveMessage({ rfId }: { rfId: string }) {
);
}
-export function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
+export function A11yDescriptions({
+ rfId,
+ disableKeyboardA11y,
+ a11yMessages = {},
+}: {
+ rfId: string;
+ disableKeyboardA11y: boolean;
+ a11yMessages?: a11yMessages;
+}) {
+ const nodeDesc = disableKeyboardA11y
+ ? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default']
+ : a11yMessages['a11yDescription.node.keyboardDisabled'] ||
+ defaultA11yMessages['a11yDescription.node.keyboardDisabled'];
+ const edgeDesc = a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default'];
+
return (
<>
- Press enter or space to select a node.
- {!disableKeyboardA11y && 'You can then use the arrow keys to move the node around.'} Press delete to remove it
- and escape to cancel.{' '}
+ {nodeDesc}
- Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
+ {edgeDesc}
{!disableKeyboardA11y && }
>
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 2247a004..6d8b3bb5 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -145,6 +145,7 @@ function ReactFlow(
colorMode = 'light',
debug,
onScroll,
+ a11yMessages,
...rest
}: ReactFlowProps,
ref: ForwardedRef
@@ -309,7 +310,7 @@ function ReactFlow(
onSelectionChange={onSelectionChange} />
{children}
-
+
);
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 9bea9004..af1dafa9 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -21,6 +21,7 @@ import type {
ColorMode,
SnapGrid,
OnReconnect,
+ a11yMessages,
} from '@xyflow/system';
import type {
@@ -666,4 +667,9 @@ export interface ReactFlowProps Promise;
+
+export type a11yMessages = {
+ 'a11yDescription.node.default'?: string;
+ 'a11yDescription.node.keyboardDisabled'?: string;
+ 'a11yDescription.edge.default'?: string;
+};