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]);
       }
     };

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

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

packages/core/src/hooks/useGlobalKeyHandler.ts

@@ -12,7 +12,6 @@ interface HookParams {
 
 export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const store = useStoreApi();
-
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
 

packages/core/src/hooks/useOnInitHandler.ts

@@ -4,15 +4,15 @@ import useReactFlow from './useReactFlow';
 import { OnInit } from '../types';
 
 function useOnInitHandler(onInit: OnInit | undefined) {
-  const ReactFlowInstance = useReactFlow();
+  const rfInstance = useReactFlow();
   const isInitialized = useRef<boolean>(false);
 
   useEffect(() => {
-    if (!isInitialized.current && ReactFlowInstance.viewportInitialized && onInit) {
-      setTimeout(() => onInit(ReactFlowInstance), 1);
+    if (!isInitialized.current && rfInstance.viewportInitialized && onInit) {
+      setTimeout(() => onInit(rfInstance), 1);
       isInitialized.current = true;
     }
-  }, [onInit, ReactFlowInstance.viewportInitialized]);
+  }, [onInit, rfInstance.viewportInitialized]);
 }
 
 export default useOnInitHandler;

packages/core/src/hooks/useUpdateNodeInternals.ts

@@ -1,16 +1,14 @@
 import { useCallback } from 'react';
 
-import { useStore, useStoreApi } from '../hooks/useStore';
-import { UpdateNodeInternals, ReactFlowState } from '../types';
-
-const selector = (state: ReactFlowState) => state.updateNodeDimensions;
+import { useStoreApi } from '../hooks/useStore';
+import { UpdateNodeInternals } from '../types';
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
   const store = useStoreApi();
-  const updateNodeDimensions = useStore(selector);
 
   return useCallback<UpdateNodeInternals>((id: string) => {
-    const nodeElement = store.getState().domNode?.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
+    const { domNode, updateNodeDimensions } = store.getState();
+    const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
 
     if (nodeElement) {
       requestAnimationFrame(() => updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]));

packages/core/src/store/initialState.ts

@@ -48,6 +48,8 @@ const initialState: ReactFlowStore = {
 
   connectionStartHandle: null,
   connectOnClick: true,
+
+  ariaLiveMessage: '',
 };
 
 export default initialState;

packages/core/src/types/general.ts

@@ -202,6 +202,8 @@ export type ReactFlowStore = {
   onViewportChangeEnd?: OnViewportChange;
 
   onSelectionChange?: OnSelectionChangeFunc;
+
+  ariaLiveMessage: string;
 };
 
 export type ReactFlowActions = {