diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 8dddbb0d..b1f7db61 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -235,6 +235,11 @@ const OverviewFlow = () => { onBeforeDelete={onBeforeDelete} onDelete={onDelete} onPaneMouseMove={onPaneMouseMove} + a11yMessages={{ + 'a11yDescription.node.default': 'Custom Node Desc.', + 'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.', + 'a11yDescription.edge.default': 'Custom Edge Desc.', + }} > diff --git a/packages/react/src/components/A11yDescriptions/index.tsx b/packages/react/src/components/A11yDescriptions/index.tsx index 51b4a939..9e9ddd2d 100644 --- a/packages/react/src/components/A11yDescriptions/index.tsx +++ b/packages/react/src/components/A11yDescriptions/index.tsx @@ -2,6 +2,7 @@ import { CSSProperties } from 'react'; import { useStore } from '../../hooks/useStore'; import type { ReactFlowState } from '../../types'; +import type { a11yMessages } from '@xyflow/system'; const style: CSSProperties = { display: 'none' }; const ariaLiveStyle: CSSProperties = { @@ -20,6 +21,15 @@ export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc'; export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc'; export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live'; +const defaultA11yMessages: Required = { + '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; +};