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 && }
+
);