chore(a11y): add custom control labels Svelte

examples/svelte/src/routes/examples/a11y/+page.svelte

@@ -29,11 +29,20 @@
 
 </script>
 
-<SvelteFlow bind:nodes bind:edges fitView   labelConfig={{
+<SvelteFlow 
-    'a11yDescription.node.default': 'Svelte Custom node description',
+	bind:nodes 
-    'a11yDescription.node.keyboardDisabled': 'Svelte Custom keyboard-disabled node description',
+	bind:edges 
-    'a11yDescription.edge.default': 'Svelte Custom edge description',
+	fitView   
-  }}>
+	labelConfig={{
+        'a11yDescription.node.default': 'Svelte Custom Node Desc.',
+        'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
+        'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
+        'controls.zoomin.title': 'Svelte Custom Zoom in',
+        'controls.zoomout.title': 'Svelte Custom Zoom Out',
+        'controls.fitview.title': 'Svelte Custom Fit View',
+        'controls.interactive.title': 'Svelte Custom Toggle Interactivity',
+	}}
+>
 	<Controls />
 	<Background />
 	<MiniMap />

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -46,6 +46,7 @@
   );
   let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
   let maxZoomReached = $derived(store.viewport.zoom >= store.maxZoom);
+  let labelConfig = $derived(store.labelConfig);
   let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
@@ -83,8 +84,8 @@
     <ControlButton
       onclick={onZoomInHandler}
       class="svelte-flow__controls-zoomin"
-      title="zoom in"
+      title={labelConfig['controls.zoomin.title']}
-      aria-label="zoom in"
+      aria-label={labelConfig['controls.zoomin.title']}
       disabled={maxZoomReached}
       {...buttonProps}
     >
@@ -93,8 +94,8 @@
     <ControlButton
       onclick={onZoomOutHandler}
       class="svelte-flow__controls-zoomout"
-      title="zoom out"
+      title={labelConfig['controls.zoomout.title']}
-      aria-label="zoom out"
+      aria-label={labelConfig['controls.zoomout.title']}
       disabled={minZoomReached}
       {...buttonProps}
     >
@@ -105,8 +106,8 @@
     <ControlButton
       class="svelte-flow__controls-fitview"
       onclick={onFitViewHandler}
-      title="fit view"
+      title={labelConfig['controls.fitview.title']}
-      aria-label="fit view"
+      aria-label={labelConfig['controls.fitview.title']}
       {...buttonProps}
     >
       <FitViewIcon />
@@ -116,8 +117,8 @@
     <ControlButton
       class="svelte-flow__controls-interactive"
       onclick={onToggleInteractivity}
-      title="toggle interactivity"
+      title={labelConfig['controls.interactive.title']}
-      aria-label="toggle interactivity"
+      aria-label={labelConfig['controls.interactive.title']}
       {...buttonProps}
     >
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}