diff --git a/packages/core/src/components/A11yDescriptions/index.tsx b/packages/core/src/components/A11yDescriptions/index.tsx index 5b019009..a7e4a9cc 100644 --- a/packages/core/src/components/A11yDescriptions/index.tsx +++ b/packages/core/src/components/A11yDescriptions/index.tsx @@ -17,25 +17,32 @@ const ariaLiveStyle: CSSProperties = { 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__arai-live'; +export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live'; const selector = (s: ReactFlowState) => s.ariaLiveMessage; -function A11yDescriptions({ rfId }: { rfId: string }) { +function AriaLiveMessage({ rfId }: { rfId: string }) { const ariaLiveMessage = useStore(selector); + return ( +
+ {ariaLiveMessage} +
+ ); +} + +function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) { return ( <>
- 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 press escape to cancel. + 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.{' '}
- Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel. -
-
- {ariaLiveMessage} + Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
+ {!disableKeyboardA11y && } ); } diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index d83aea6c..f540cdf5 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -278,7 +278,7 @@ const ReactFlow = forwardRef( {children} - {!disableKeyboardA11y && } + );