chore: rename LabelConfig -> AriaLabelConfig, update dict names

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

@@ -8,11 +8,11 @@
 
 <div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   {store.disableKeyboardA11y
-    ? store.labelConfig['a11yDescription.node.default']
-    : store.labelConfig['a11yDescription.node.keyboardDisabled']}
+    ? store.ariaLabelConfig['node.a11yDescription.default']
+    : store.ariaLabelConfig['node.a11yDescription.keyboardDisabled']}
 </div>
 <div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
-  {store.labelConfig['a11yDescription.edge.default']}
+  {store.ariaLabelConfig['edge.a11yDescription.default']}
 </div>
 
 {#if !store.disableKeyboardA11y}

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -44,7 +44,7 @@
   );
 
   let store = useStore();
-  let labelConfig = $derived(store.labelConfig);
+  let ariaLabelConfig = $derived(store.ariaLabelConfig);
 
 
   let prevConnections: Map<string, HandleConnection> | null = null;
@@ -229,7 +229,7 @@ The Handle component is the part of a node that can be used to connect nodes.
   onkeypress={() => {}}
   {style}
   role="button"
-  aria-label={labelConfig[`handle.ariaLabel`]}
+  aria-label={ariaLabelConfig[`handle.ariaLabel`]}
   tabindex="-1"
   {...rest}
 >

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -85,7 +85,7 @@
   let prevTargetPosition: Position | undefined = targetPosition;
 
   let NodeComponent = $derived(store.nodeTypes[type] ?? DefaultNode);
-  let labelConfig = $derived(store.labelConfig);
+  let ariaLabelConfig = $derived(store.ariaLabelConfig);
 
   let connectableContext: ConnectableContext = {
     get value() {
@@ -189,7 +189,7 @@
     ) {
       // prevent default scrolling behavior on arrow key press when node is moved
       event.preventDefault();
-      store.ariaLiveMessage = labelConfig['a11yDescription.ariaLiveMessage']({
+      store.ariaLiveMessage = ariaLabelConfig['a11yDescription.ariaLiveMessage']({
         direction: event.key.replace('Arrow', '').toLowerCase(),
         x: ~~node.internals.positionAbsolute.x,
         y: ~~node.internals.positionAbsolute.y

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

@@ -92,7 +92,7 @@
     noDragClass,
     noPanClass,
     noWheelClass,
-    labelConfig,
+    ariaLabelConfig,
     ...divAttributes
   } = $derived(rest);
   /* eslint-enable @typescript-eslint/no-unused-vars */

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

@@ -21,7 +21,7 @@ import type {
   OnReconnect,
   OnReconnectStart,
   OnReconnectEnd,
-  LabelConfig
+  AriaLabelConfig
 } from '@xyflow/system';
 
 import type {
@@ -476,5 +476,5 @@ export type SvelteFlowProps<
      * Configuration for customizable labels, descriptions, and UI text. Provided keys will override the corresponding defaults.
      * Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings.
      */
-    labelConfig?: Partial<LabelConfig>;
+    ariaLabelConfig?: Partial<AriaLabelConfig>;
   };

packages/svelte/src/lib/index.ts

@@ -113,7 +113,7 @@ export {
   type ResizeDragEvent,
   type IsValidConnection,
   type NodeConnection,
-  type LabelConfig
+  type AriaLabelConfig
 } from '@xyflow/system';
 
 // system utils

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

@@ -46,7 +46,7 @@
   );
   let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
   let maxZoomReached = $derived(store.viewport.zoom >= store.maxZoom);
-  let labelConfig = $derived(store.labelConfig);
+  let ariaLabelConfig = $derived(store.ariaLabelConfig);
   let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
@@ -73,7 +73,7 @@
   class={['svelte-flow__controls', orientationClass, className]}
   {position}
   data-testid="svelte-flow__controls"
-  aria-label={labelConfig['controls.ariaLabel']}
+  aria-label={ariaLabelConfig['controls.ariaLabel']}
   {style}
   {...rest}
 >
@@ -84,8 +84,8 @@
     <ControlButton
       onclick={onZoomInHandler}
       class="svelte-flow__controls-zoomin"
-      title={labelConfig['controls.zoomin.title']}
-      aria-label={labelConfig['controls.zoomin.title']}
+      title={ariaLabelConfig['controls.zoomin.ariaLabel']}
+      aria-label={ariaLabelConfig['controls.zoomin.ariaLabel']}
       disabled={maxZoomReached}
       {...buttonProps}
     >
@@ -94,8 +94,8 @@
     <ControlButton
       onclick={onZoomOutHandler}
       class="svelte-flow__controls-zoomout"
-      title={labelConfig['controls.zoomout.title']}
-      aria-label={labelConfig['controls.zoomout.title']}
+      title={ariaLabelConfig['controls.zoomout.ariaLabel']}
+      aria-label={ariaLabelConfig['controls.zoomout.ariaLabel']}
       disabled={minZoomReached}
       {...buttonProps}
     >
@@ -106,8 +106,8 @@
     <ControlButton
       class="svelte-flow__controls-fitview"
       onclick={onFitViewHandler}
-      title={labelConfig['controls.fitview.title']}
-      aria-label={labelConfig['controls.fitview.title']}
+      title={ariaLabelConfig['controls.fitview.ariaLabel']}
+      aria-label={ariaLabelConfig['controls.fitview.ariaLabel']}
       {...buttonProps}
     >
       <FitViewIcon />
@@ -117,8 +117,8 @@
     <ControlButton
       class="svelte-flow__controls-interactive"
       onclick={onToggleInteractivity}
-      title={labelConfig['controls.interactive.title']}
-      aria-label={labelConfig['controls.interactive.title']}
+      title={ariaLabelConfig['controls.interactive.ariaLabel']}
+      aria-label={ariaLabelConfig['controls.interactive.ariaLabel']}
       {...buttonProps}
     >
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -42,7 +42,7 @@
   }: MiniMapProps = $props();
 
   let store = $derived(useStore());
-  let labelConfig = $derived(store.labelConfig);
+  let ariaLabelConfig = $derived(store.ariaLabelConfig);
 
   const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -114,8 +114,8 @@
         zoomable
       }}
     >
-      {#if ariaLabel ?? labelConfig['minimap.ariaLabel']}
-        <title id={labelledBy}>{ariaLabel ?? labelConfig['minimap.ariaLabel']}</title>
+      {#if ariaLabel ?? ariaLabelConfig['minimap.ariaLabel']}
+        <title id={labelledBy}>{ariaLabel ?? ariaLabelConfig['minimap.ariaLabel']}</title>
       {/if}
 
       {#each store.nodes as userNode (userNode.id)}

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -7,7 +7,7 @@ import {
   getViewportForBounds,
   updateConnectionLookup,
   initialConnection,
-  mergeLabelConfig,
+  mergeAriaLabelConfig,
   type SelectionRect,
   type SnapGrid,
   type MarkerProps,
@@ -34,7 +34,7 @@ import {
   type OnReconnect,
   type OnReconnectStart,
   type OnReconnectEnd,
-  type LabelConfig
+  type AriaLabelConfig
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -291,7 +291,9 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     noPanClass: string = $derived(signals.props.noPanClass ?? 'nopan');
     noDragClass: string = $derived(signals.props.noDragClass ?? 'nodrag');
     noWheelClass: string = $derived(signals.props.noWheelClass ?? 'nowheel');
-    labelConfig: LabelConfig = $derived(mergeLabelConfig(signals.props.labelConfig));
+    ariaLabelConfig: AriaLabelConfig = $derived(
+      mergeAriaLabelConfig(signals.props.ariaLabelConfig)
+    );
 
     // _viewport is the internal viewport.
     // when binding to viewport, we operate on signals.viewport instead