chore(a11y): add ariaLiveMessage to label config

packages/react/src/components/NodeWrapper/index.tsx

@@ -40,7 +40,7 @@ export function NodeWrapper<NodeType extends Node>({
   nodeClickDistance,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, internals, isParent } = useStore((s) => {
+  const { node, internals, isParent, labelConfig } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
     const isParent = s.parentLookup.has(id);
 
@@ -48,6 +48,7 @@ export function NodeWrapper<NodeType extends Node>({
       node,
       internals: node.internals,
       isParent,
+      labelConfig: s.labelConfig,
     };
   }, shallow);
 
@@ -151,9 +152,12 @@ export function NodeWrapper<NodeType extends Node>({
       event.preventDefault();
 
       store.setState({
-        ariaLiveMessage: `Moved selected node ${event.key
-          .replace('Arrow', '')
-          .toLowerCase()}. New position, x: ${~~internals.positionAbsolute.x}, y: ${~~internals.positionAbsolute.y}`,
+        ariaLiveMessage:
+          labelConfig['a11yDescription.ariaLiveMessage']?.(
+            event.key.replace('Arrow', '').toLowerCase(),
+            ~~internals.positionAbsolute.x,
+            ~~internals.positionAbsolute.y
+          ) || '',
       });
 
       moveSelectedNodes({

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -89,6 +89,7 @@
   let prevTargetPosition: Position | undefined = targetPosition;
 
   let NodeComponent = $derived(store.nodeTypes[type] ?? DefaultNode);
+  let labelConfig = $derived(store.labelConfig);
 
   let connectableContext: ConnectableContext = {
     get value() {
@@ -192,10 +193,11 @@
     ) {
       // prevent default scrolling behavior on arrow key press when node is moved
       event.preventDefault();
-
-      store.ariaLiveMessage = `Moved selected node ${event.key
-        .replace('Arrow', '')
-        .toLowerCase()}. New position, x: ${node.internals.positionAbsolute.x}, y: ${node.internals.positionAbsolute.y}`;
+      store.ariaLiveMessage = labelConfig['a11yDescription.ariaLiveMessage'](
+        event.key.replace('Arrow', '').toLowerCase(),
+        ~~node.internals.positionAbsolute.x,
+        ~~node.internals.positionAbsolute.y
+      ) || '';
 
       store.moveSelectedNodes(arrowKeyDiffs[event.key], event.shiftKey ? 4 : 1);
     }

packages/system/src/constants.ts

@@ -44,6 +44,8 @@ export const defaultLabelConfig = {
     '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 escape to cancel.',
   'a11yDescription.edge.default':
     'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
+  'a11yDescription.ariaLiveMessage': (node: string, x: number, y: number) =>
+    `Moved selected node ${node}. New position, x: ${x}, y: ${y}`,
 
   // Control elements
   'controls.ariaLabel': 'Control Panel',