feat(a11y): add aria live message on move by keyboard

packages/core/src/components/A11yDescriptions/index.tsx

@@ -1,12 +1,28 @@
-const style = { display: 'none' };
+import { CSSProperties } from 'react';
+import { useStore } from '../../hooks/useStore';
+import { ReactFlowState } from '../../types';
+
+const style: CSSProperties = { display: 'none' };
+const ariaLiveStyle: CSSProperties = {
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  margin: -1,
+  border: 0,
+  padding: 0,
+  overflow: 'hidden',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  clipPath: 'inset(100%)',
+};
 
 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';
 
-function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
-  if (disableKeyboardA11y) {
-    return null;
-  }
+const selector = (s: ReactFlowState) => s.ariaLiveMessage;
+
+function A11yDescriptions({ rfId }: { rfId: string }) {
+  const ariaLiveMessage = useStore(selector);
 
   return (
     <>
@@ -17,6 +33,9 @@ function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disable
       <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}
+      </div>
     </>
   );
 }

packages/core/src/components/Nodes/wrapNode.tsx

@@ -91,6 +91,12 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           unselect,
         });
       } else if (selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+        store.setState({
+          ariaLiveMessage: `Move selected node ten pixels to the ${event.key
+            .replace('Arrow', '')
+            .toLowerCase()}. New position, x: ${xPos}, y: ${yPos}`,
+        });
+
         updatePositions(arrowKeyDiffs[event.key]);
       }
     };