From 48c402c4d3bd9e16dc91cd4c549324e57b6d5c57 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 10 Oct 2022 11:30:15 +0200
Subject: [PATCH] refactor(aria-descriptions): render when disableKeyboardA11y
 is true

---
 .../src/components/A11yDescriptions/index.tsx | 23 ++++++++++++-------
 .../core/src/container/ReactFlow/index.tsx    |  2 +-
 2 files changed, 16 insertions(+), 9 deletions(-)

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 (
+    <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
-        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.{' '}
       </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.
-      </div>
-      <div id={`${ARIA_LIVE_MESSAGE}-${rfId}`} aria-live="assertive" aria-atomic="true" style={ariaLiveStyle}>
-        {ariaLiveMessage}
+        Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
       </div>
+      {!disableKeyboardA11y && <AriaLiveMessage rfId={rfId} />}
     </>
   );
 }
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<ReactFlowRefType, ReactFlowProps>(
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}
           <Attribution proOptions={proOptions} position={attributionPosition} />
-          {!disableKeyboardA11y && <A11yDescriptions rfId={id} />}
+          <A11yDescriptions rfId={id} disableKeyboardA11y={disableKeyboardA11y} />
         </Wrapper>
       </div>
     );