chore: rename LabelConfig -> AriaLabelConfig, update dict names

packages/react/src/additional-components/Controls/Controls.tsx

@@ -19,7 +19,7 @@ const selector = (s: ReactFlowState) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   minZoomReached: s.transform[2] <= s.minZoom,
   maxZoomReached: s.transform[2] >= s.maxZoom,
-  labelConfig: s.labelConfig,
+  ariaLabelConfig: s.ariaLabelConfig,
 });
 
 function ControlsComponent({
@@ -39,7 +39,7 @@ function ControlsComponent({
   'aria-label': ariaLabel,
 }: ControlProps) {
   const store = useStoreApi();
-  const { isInteractive, minZoomReached, maxZoomReached, labelConfig } = useStore(selector, shallow);
+  const { isInteractive, minZoomReached, maxZoomReached, ariaLabelConfig } = useStore(selector, shallow);
   const { zoomIn, zoomOut, fitView } = useReactFlow();
 
   const onZoomInHandler = () => {
@@ -74,15 +74,15 @@ function ControlsComponent({
       position={position}
       style={style}
       data-testid="rf__controls"
-      aria-label={ariaLabel ?? labelConfig['controls.ariaLabel']}
+      aria-label={ariaLabel ?? ariaLabelConfig['controls.ariaLabel']}
     >
       {showZoom && (
         <>
           <ControlButton
             onClick={onZoomInHandler}
             className="react-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}
           >
             <PlusIcon />
@@ -90,8 +90,8 @@ function ControlsComponent({
           <ControlButton
             onClick={onZoomOutHandler}
             className="react-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}
           >
             <MinusIcon />
@@ -102,8 +102,8 @@ function ControlsComponent({
         <ControlButton
           className="react-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']}
         >
           <FitViewIcon />
         </ControlButton>
@@ -112,8 +112,8 @@ function ControlsComponent({
         <ControlButton
           className="react-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']}
         >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
         </ControlButton>

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -36,7 +36,7 @@ const selector = (s: ReactFlowState) => {
     translateExtent: s.translateExtent,
     flowWidth: s.width,
     flowHeight: s.height,
-    labelConfig: s.labelConfig,
+    ariaLabelConfig: s.ariaLabelConfig,
   };
 };
 
@@ -70,7 +70,7 @@ function MiniMapComponent<NodeType extends Node = Node>({
 }: MiniMapProps<NodeType>) {
   const store = useStoreApi<NodeType>();
   const svg = useRef<SVGSVGElement>(null);
-  const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, labelConfig } = useStore(
+  const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, ariaLabelConfig } = useStore(
     selector,
     shallow
   );
@@ -133,7 +133,7 @@ function MiniMapComponent<NodeType extends Node = Node>({
       }, [])
     : undefined;
 
-  const _ariaLabel = ariaLabel ?? labelConfig['minimap.ariaLabel'];
+  const _ariaLabel = ariaLabel ?? ariaLabelConfig['minimap.ariaLabel'];
 
   return (
     <Panel

packages/react/src/components/A11yDescriptions/index.tsx

@@ -21,7 +21,7 @@ export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
 export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
 
 const ariaLiveSelector = (s: ReactFlowState) => s.ariaLiveMessage;
-const labelConfigSelector = (s: ReactFlowState) => s.labelConfig;
+const ariaLabelConfigSelector = (s: ReactFlowState) => s.ariaLabelConfig;
 
 function AriaLiveMessage({ rfId }: { rfId: string }) {
   const ariaLiveMessage = useStore(ariaLiveSelector);
@@ -34,17 +34,17 @@ function AriaLiveMessage({ rfId }: { rfId: string }) {
 }
 
 export function A11yDescriptions({ rfId, disableKeyboardA11y }: { rfId: string; disableKeyboardA11y: boolean }) {
-  const labelConfig = useStore(labelConfigSelector);
+  const ariaLabelConfig = useStore(ariaLabelConfigSelector);
 
   return (
     <>
       <div id={`${ARIA_NODE_DESC_KEY}-${rfId}`} style={style}>
         {disableKeyboardA11y
-          ? labelConfig['a11yDescription.node.default']
-          : labelConfig['a11yDescription.node.keyboardDisabled']}
+          ? ariaLabelConfig['node.a11yDescription.default']
+          : ariaLabelConfig['node.a11yDescription.keyboardDisabled']}
       </div>
       <div id={`${ARIA_EDGE_DESC_KEY}-${rfId}`} style={style}>
-        {labelConfig['a11yDescription.edge.default']}
+        {ariaLabelConfig['edge.a11yDescription.default']}
       </div>
       {!disableKeyboardA11y && <AriaLiveMessage rfId={rfId} />}
     </>

packages/react/src/components/NodeWrapper/index.tsx

@@ -142,10 +142,10 @@ export function NodeWrapper<NodeType extends Node>({
       // prevent default scrolling behavior on arrow key press when node is moved
       event.preventDefault();
 
-      const { labelConfig } = store.getState();
+      const { ariaLabelConfig } = store.getState();
 
       store.setState({
-        ariaLiveMessage: labelConfig['a11yDescription.ariaLiveMessage']({
+        ariaLiveMessage: ariaLabelConfig['a11yDescription.ariaLiveMessage']({
           direction: event.key.replace('Arrow', '').toLowerCase(),
           x: ~~internals.positionAbsolute.x,
           y: ~~internals.positionAbsolute.y,

packages/react/src/components/StoreUpdater/index.tsx

@@ -5,7 +5,7 @@
  */
 import { useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { infiniteExtent, type CoordinateExtent, mergeLabelConfig, LabelConfig } from '@xyflow/system';
+import { infiniteExtent, type CoordinateExtent, mergeAriaLabelConfig, AriaLabelConfig } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
@@ -68,7 +68,7 @@ const reactFlowFieldsToTrack = [
   'debug',
   'autoPanSpeed',
   'paneClickDistance',
-  'labelConfig',
+  'ariaLabelConfig',
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
@@ -158,8 +158,8 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
         else if (fieldName === 'fitView') store.setState({ fitViewQueued: fieldValue as boolean });
         else if (fieldName === 'fitViewOptions') store.setState({ fitViewOptions: fieldValue as FitViewOptions });
 
-        if (fieldName === 'labelConfig') {
-          store.setState({ labelConfig: mergeLabelConfig(fieldValue as LabelConfig) });
+        if (fieldName === 'ariaLabelConfig') {
+          store.setState({ ariaLabelConfig: mergeAriaLabelConfig(fieldValue as AriaLabelConfig) });
         }
         // General case
         else store.setState({ [fieldName]: fieldValue });

packages/react/src/container/ReactFlow/index.tsx

@@ -145,7 +145,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     colorMode = 'light',
     debug,
     onScroll,
-    labelConfig,
+    ariaLabelConfig,
     ...rest
   }: ReactFlowProps<NodeType, EdgeType>,
   ref: ForwardedRef<HTMLDivElement>
@@ -306,7 +306,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           onBeforeDelete={onBeforeDelete}
           paneClickDistance={paneClickDistance}
           debug={debug}
-          labelConfig={labelConfig}
+          ariaLabelConfig={ariaLabelConfig}
         />
         <SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} />
         {children}

packages/react/src/index.ts

@@ -108,7 +108,7 @@ export {
   type NoConnection,
   type NodeConnection,
   type OnReconnect,
-  type LabelConfig,
+  type AriaLabelConfig,
 } from '@xyflow/system';
 
 // we need this workaround to prevent a duplicate identifier error

packages/react/src/store/initialState.ts

@@ -10,7 +10,7 @@ import {
   NodeOrigin,
   initialConnection,
   CoordinateExtent,
-  defaultLabelConfig,
+  defaultAriaLabelConfig,
 } from '@xyflow/system';
 
 import type { Edge, FitViewOptions, InternalNode, Node, ReactFlowStore } from '../types';
@@ -142,7 +142,7 @@ const getInitialState = ({
 
     lib: 'react',
     debug: false,
-    labelConfig: defaultLabelConfig,
+    ariaLabelConfig: defaultAriaLabelConfig,
   };
 };
 

packages/react/src/types/component-props.ts

@@ -21,7 +21,7 @@ import type {
   ColorMode,
   SnapGrid,
   OnReconnect,
-  LabelConfig,
+  AriaLabelConfig,
 } from '@xyflow/system';
 
 import type {
@@ -671,5 +671,5 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * 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/react/src/types/store.ts

@@ -28,7 +28,7 @@ import {
   type NodeChange,
   type EdgeChange,
   type ParentLookup,
-  type LabelConfig,
+  type AriaLabelConfig,
 } from '@xyflow/system';
 
 import type {
@@ -148,7 +148,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
 
   lib: string;
   debug: boolean;
-  labelConfig: LabelConfig;
+  ariaLabelConfig: AriaLabelConfig;
 };
 
 export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {