diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte index 3075a0e8..b499fc47 100644 --- a/examples/svelte/src/routes/examples/overview/Flow.svelte +++ b/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.', + }} > {#snippet before()} diff --git a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte index a26778c1..f0ff3809 100644 --- a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte +++ b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte @@ -1,21 +1,32 @@ {#if !store.disableKeyboardA11y} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 9b039558..919a345e 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -70,6 +70,7 @@ nodes = $bindable([]), edges = $bindable([]), viewport = $bindable(undefined), + a11yMessages, ...props }: SvelteFlowProps & Omit, 'onselectionchange'> = $props(); @@ -217,6 +218,6 @@ - + {@render children?.()} diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 3df0a991..85bb63df 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/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; };