chore(a11y): pass a11y descriptions in svelte

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -220,6 +220,11 @@
 		console.log('on selection changed via prop', { nodes, edges });
 	}}
 	selectNodesOnDrag
+	a11yMessages={{
+        'a11yDescription.node.default': 'Svelte Custom Node Description.',
+        'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Description',
+        'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
+      }}
 >
 	<Controls orientation="horizontal" {fitViewOptions}>
 		{#snippet before()}

packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte

@@ -1,21 +1,32 @@
 <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import type { SvelteFlowStore } from '$lib/store/types';
+  import type { a11yMessages } from '@xyflow/system';
   import type { Node, Edge } from '$lib/types';
   import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.';
 
-  let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
+  const { store, a11yMessages = {} }: { 
+    store: SvelteFlowStore<NodeType, EdgeType>; 
+    a11yMessages?: Partial<a11yMessages>; 
+  } = $props();
+
+
+const defaultA11yMessages = {
+  'a11yDescription.node.default':
+    'Press enter or space to select a node. Press delete to remove it and escape to cancel.',
+  'a11yDescription.node.keyboardDisabled':
+    '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.',
+};
 </script>
 
 <div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
-  Press enter or space to select a node.
+  {store.disableKeyboardA11y
-  {#if !store.disableKeyboardA11y}
+    ? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default']
-    You can then use the arrow keys to move the node around.
+    : a11yMessages['a11yDescription.node.keyboardDisabled'] || defaultA11yMessages['a11yDescription.node.keyboardDisabled']}
-  {/if}
-  Press delete to remove it and escape to cancel.
 </div>
 <div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
-  Press enter or space to select an edge. You can then press delete to remove it or escape to
+  {a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default']}
-  cancel.
 </div>
 
 {#if !store.disableKeyboardA11y}

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -70,6 +70,7 @@
     nodes = $bindable([]),
     edges = $bindable([]),
     viewport = $bindable(undefined),
+    a11yMessages,
     ...props
   }: SvelteFlowProps<NodeType, EdgeType> &
     Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'> = $props();
@@ -217,6 +218,6 @@
     </Pane>
   </Zoom>
   <Attribution {proOptions} position={attributionPosition} />
-  <A11yDescriptions {store} />
+  <A11yDescriptions {store} a11yMessages={a11yMessages} />
   {@render children?.()}
 </Wrapper>

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -20,7 +20,8 @@ import type {
   OnConnectEnd,
   OnReconnect,
   OnReconnectStart,
-  OnReconnectEnd
+  OnReconnectEnd,
+  a11yMessages
 } from '@xyflow/system';
 
 import type {
@@ -471,4 +472,9 @@ export type SvelteFlowProps<
     onselectionstart?: (event: PointerEvent) => void;
     /** This event handler gets called when the user finishes dragging a selection box */
     onselectionend?: (event: PointerEvent) => void;
+    /**
+     * Custom accessibility messages for screen readers and a11y features.
+     * Allows localization and customization of ARIA descriptions.
+     */
+    a11yMessages?: a11yMessages;
   };