From 74929f09bc60a9471423bf1876c70c398f973cb3 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Thu, 22 May 2025 12:36:36 +0200
Subject: [PATCH] chore(controls): add custom aria labels

---
 examples/react/src/examples/A11y/index.tsx                   | 1 +
 examples/svelte/src/routes/examples/a11y/+page.svelte        | 1 +
 .../react/src/additional-components/Controls/Controls.tsx    | 5 +++--
 packages/react/src/additional-components/MiniMap/types.ts    | 2 +-
 packages/svelte/src/lib/plugins/Controls/Controls.svelte     | 2 +-
 packages/system/src/constants.ts                             | 3 ++-
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx
index 9e5d6579..3f872bfb 100644
--- a/examples/react/src/examples/A11y/index.tsx
+++ b/examples/react/src/examples/A11y/index.tsx
@@ -65,6 +65,7 @@ const A11y = () => {
         'a11yDescription.node.default': 'Custom Node Desc.',
         'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.',
         'a11yDescription.edge.default': 'Custom Edge Desc.',
+        'controls.ariaLabel': 'Custom Controls Aria Label',
         'controls.zoomin.title': 'Custom Zoom in',
         'controls.zoomout.title': 'Custom Zoom Out',
         // 'controls.fitview.title': 'Custom Fit View',
diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte
index b80ca187..939f331f 100644
--- a/examples/svelte/src/routes/examples/a11y/+page.svelte
+++ b/examples/svelte/src/routes/examples/a11y/+page.svelte
@@ -37,6 +37,7 @@
         'a11yDescription.node.default': 'Svelte Custom Node Desc.',
         'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
         'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
+        'controls.ariaLabel': 'Svelte Custom Control Aria Label',
         'controls.zoomin.title': 'Svelte Custom Zoom in',
         'controls.zoomout.title': 'Svelte Custom Zoom Out',
         // 'controls.fitview.title': 'Svelte Custom Fit View',
diff --git a/packages/react/src/additional-components/Controls/Controls.tsx b/packages/react/src/additional-components/Controls/Controls.tsx
index 1dca3548..e6388e66 100644
--- a/packages/react/src/additional-components/Controls/Controls.tsx
+++ b/packages/react/src/additional-components/Controls/Controls.tsx
@@ -36,11 +36,12 @@ function ControlsComponent({
   children,
   position = 'bottom-left',
   orientation = 'vertical',
-  'aria-label': ariaLabel = 'React Flow controls',
+  'aria-label': ariaLabel,
 }: ControlProps) {
   const store = useStoreApi();
   const { isInteractive, minZoomReached, maxZoomReached, labelConfig } = useStore(selector, shallow);
   const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const effectiveAriaLabel = ariaLabel ?? labelConfig['controls.ariaLabel'];
 
   const onZoomInHandler = () => {
     zoomIn();
@@ -74,7 +75,7 @@ function ControlsComponent({
       position={position}
       style={style}
       data-testid="rf__controls"
-      aria-label={ariaLabel}
+      aria-label={effectiveAriaLabel}
     >
       {showZoom && (
         <>
diff --git a/packages/react/src/additional-components/MiniMap/types.ts b/packages/react/src/additional-components/MiniMap/types.ts
index 02513b10..53b01114 100644
--- a/packages/react/src/additional-components/MiniMap/types.ts
+++ b/packages/react/src/additional-components/MiniMap/types.ts
@@ -83,7 +83,7 @@ export type MiniMapProps<NodeType extends Node = Node> = Omit<HTMLAttributes<SVG
    * There is no text inside the minimap for a screen reader to use as an accessible name, so it's
    * important we provide one to make the minimap accessible. The default is sufficient, but you may
    * want to replace it with something more relevant to your app or product.
-   * @default "React Flow mini map"
+   * @default "Mini Map"
    */
   ariaLabel?: string | null;
   /** Invert direction when panning the minimap viewport. */
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index 85a7623b..db1f2a57 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -73,7 +73,7 @@
   class={['svelte-flow__controls', orientationClass, className]}
   {position}
   data-testid="svelte-flow__controls"
-  aria-label={ariaLabel ?? 'Svelte Flow controls'}
+  aria-label={labelConfig['controls.ariaLabel']}
   {style}
   {...rest}
 >
diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts
index a52c1fcc..b1697334 100644
--- a/packages/system/src/constants.ts
+++ b/packages/system/src/constants.ts
@@ -46,13 +46,14 @@ export const defaultLabelConfig = {
     'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
 
   // Control elements
+  'controls.ariaLabel': 'Control Panel',
   'controls.zoomin.title': 'Zoom In',
   'controls.zoomout.title': 'Zoom Out',
   'controls.fitview.title': 'Fit View',
   'controls.interactive.title': 'Toggle Interactivity',
 
   // Mini map
-  'minimap.ariaLabel': 'React Flow mini map',
+  'minimap.ariaLabel': 'Mini Map',
 };
 
 export type LabelConfig = Partial<typeof defaultLabelConfig>;