refactor(aria-descriptions): render when disableKeyboardA11y is true

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 (
+    <div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
+      {ariaLiveMessage}
+    </div>
+  );
+}
+
+function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
   return (
     <>
       <div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
-        Press enter or space to select a node. You can then use the arrow keys to move the node around, press delete to
+        Press enter or space to select a node.
-        remove it and press escape to cancel.
+        {!disableKeyboardA11y && 'You can then use the arrow keys to move the node around.'} Press delete to remove it
+        and escape to cancel.{' '}
       </div>
       <div id={`${ARIA_EDGE_DESC_KEY}-${rfId}`} style={style}>
-        Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.
+        Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
-      </div>
-      <div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
-        {ariaLiveMessage}
       </div>
+      {!disableKeyboardA11y && <AriaLiveMessage rfId={rfId} />}
     </>
   );
 }

packages/core/src/container/ReactFlow/index.tsx

@@ -278,7 +278,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
-          {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
+          <A11yDescriptions rfId={id} disableKeyboardA11y={disableKeyboardA11y} />
         </Wrapper>
       </div>
     );