diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx
index 39c486d6..9e5d6579 100644
--- a/examples/react/src/examples/A11y/index.tsx
+++ b/examples/react/src/examples/A11y/index.tsx
@@ -69,6 +69,7 @@ const A11y = () => {
'controls.zoomout.title': 'Custom Zoom Out',
// 'controls.fitview.title': 'Custom Fit View',
'controls.interactive.title': 'Custom Toggle Interactivity',
+ 'minimap.ariaLabel': 'Custom Aria Label',
}}
>
diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte
index 9ca28ae6..b80ca187 100644
--- a/examples/svelte/src/routes/examples/a11y/+page.svelte
+++ b/examples/svelte/src/routes/examples/a11y/+page.svelte
@@ -41,6 +41,7 @@
'controls.zoomout.title': 'Svelte Custom Zoom Out',
// 'controls.fitview.title': 'Svelte Custom Fit View',
'controls.interactive.title': 'Svelte Custom Toggle Interactivity',
+ 'minimap.ariaLabel': 'Svelte Custom Minimap',
}}
>
diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
index 38e63f72..c48207ca 100644
--- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx
+++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx
@@ -36,11 +36,11 @@ const selector = (s: ReactFlowState) => {
translateExtent: s.translateExtent,
flowWidth: s.width,
flowHeight: s.height,
+ labelConfig: s.labelConfig,
};
};
const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-
function MiniMapComponent({
style,
className,
@@ -63,14 +63,17 @@ function MiniMapComponent({
onNodeClick,
pannable = false,
zoomable = false,
- ariaLabel = 'React Flow mini map',
+ ariaLabel,
inversePan,
zoomStep = 10,
offsetScale = 5,
}: MiniMapProps) {
const store = useStoreApi();
const svg = useRef(null);
- const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector, shallow);
+ const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, labelConfig } = useStore(
+ selector,
+ shallow
+ );
const elementWidth = (style?.width as number) ?? defaultWidth;
const elementHeight = (style?.height as number) ?? defaultHeight;
const scaledWidth = boundingRect.width / elementWidth;
@@ -130,6 +133,8 @@ function MiniMapComponent({
}, [])
: undefined;
+ const effectiveAriaLabel = ariaLabel ?? labelConfig['minimap.ariaLabel'];
+
return (
({
ref={svg}
onClick={onSvgClick}
>
- {ariaLabel && {ariaLabel}}
+ {effectiveAriaLabel && {effectiveAriaLabel}}
+
onClick={onSvgNodeClick}
nodeColor={nodeColor}
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index 5dcb5b3f..d31f5771 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -21,7 +21,7 @@
let {
position = 'bottom-right',
- ariaLabel = 'Mini map',
+ ariaLabel,
nodeStrokeColor = 'transparent',
nodeColor,
nodeClass = '',
@@ -42,6 +42,7 @@
}: MiniMapProps = $props();
let store = $derived(useStore());
+ let labelConfig = $derived(store.labelConfig);
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -113,7 +114,9 @@
zoomable
}}
>
- {#if ariaLabel}{ariaLabel}{/if}
+ {#if ariaLabel ?? labelConfig['minimap.ariaLabel']}
+ {ariaLabel ?? labelConfig['minimap.ariaLabel']}
+ {/if}
{#each store.nodes as userNode (userNode.id)}
{@const node = store.nodeLookup.get(userNode.id)}
diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts
index 9a3259a2..a52c1fcc 100644
--- a/packages/system/src/constants.ts
+++ b/packages/system/src/constants.ts
@@ -50,6 +50,9 @@ export const defaultLabelConfig = {
'controls.zoomout.title': 'Zoom Out',
'controls.fitview.title': 'Fit View',
'controls.interactive.title': 'Toggle Interactivity',
+
+ // Mini map
+ 'minimap.ariaLabel': 'React Flow mini map',
};
export type LabelConfig = Partial;