From 1fb7a5c98a6dbf0aacb4afbc4c204acebcc89cf5 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Thu, 22 May 2025 15:58:31 +0200
Subject: [PATCH] chore(a11y): add ariaLiveMessage to label config

---
 examples/react/src/examples/A11y/index.tsx           |  2 ++
 .../svelte/src/routes/examples/a11y/+page.svelte     |  5 ++++-
 packages/react/src/components/NodeWrapper/index.tsx  | 12 ++++++++----
 .../lib/components/NodeWrapper/NodeWrapper.svelte    | 10 ++++++----
 packages/system/src/constants.ts                     |  2 ++
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx
index 4cc2cdff..85d959ff 100644
--- a/examples/react/src/examples/A11y/index.tsx
+++ b/examples/react/src/examples/A11y/index.tsx
@@ -63,6 +63,8 @@ const A11y = () => {
         'a11yDescription.node.default': 'Custom Node Desc.',
         'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.',
         'a11yDescription.edge.default': 'Custom Edge Desc.',
+        'a11yDescription.ariaLiveMessage': (node: string, x: number, y: number) =>
+          `Custom Moved selected node ${node}. New position, x: ${x}, y: ${y}`,
         'controls.ariaLabel': 'Custom Controls Aria Label',
         'controls.zoomin.title': 'Custom Zoom in',
         'controls.zoomout.title': 'Custom Zoom Out',
diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte
index d4e1d320..4f0ab7b0 100644
--- a/examples/svelte/src/routes/examples/a11y/+page.svelte
+++ b/examples/svelte/src/routes/examples/a11y/+page.svelte
@@ -15,7 +15,8 @@
 			position: { x: 0, y: 0 },
 			data: { label: 'A' },	
 		},
-		{ id: 'B', position: { x: -100, y: 150 }, data: { label: '<ul> Node' }, as: 'ul' },
+		// You need to explicitly pass the as type
+		{ id: 'B', position: { x: -100, y: 150 }, data: { label: '<ul> Node' }, as: "ul" as "ul" },
 		{ id: 'C', position: { x: 100, y: 150 }, data: { label: 'C' }  },
 		{ id: 'D', position: { x: 0, y: 260 }, data: { label: 'D' }  }
 	]);
@@ -36,6 +37,8 @@
         'a11yDescription.node.default': 'Svelte Custom Node Desc.',
         'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
         'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
+		'a11yDescription.ariaLiveMessage': (node: string, x: number, y: number) =>
+          `Custom Moved selected node ${node}. New position, x: ${x}, y: ${y}`,
         'controls.ariaLabel': 'Svelte Custom Control Aria Label',
         'controls.zoomin.title': 'Svelte Custom Zoom in',
         'controls.zoomout.title': 'Svelte Custom Zoom Out',
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index da30038d..a088164b 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/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({
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 24f40a8c..8e96fc70 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/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);
     }
diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts
index b1697334..24941555 100644
--- a/packages/system/src/constants.ts
+++ b/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',