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;