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: '
Node' }, as: 'ul' },
+ // You need to explicitly pass the as type
+ { id: 'B', position: { x: -100, y: 150 }, data: { label: ' 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({
nodeClickDistance,
onError,
}: NodeWrapperProps) {
- const { node, internals, isParent } = useStore((s) => {
+ const { node, internals, isParent, labelConfig } = useStore((s) => {
const node = s.nodeLookup.get(id)! as InternalNode;
const isParent = s.parentLookup.has(id);
@@ -48,6 +48,7 @@ export function NodeWrapper({
node,
internals: node.internals,
isParent,
+ labelConfig: s.labelConfig,
};
}, shallow);
@@ -151,9 +152,12 @@ export function NodeWrapper({
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',