chore(Minimap): add custom aria label for SF and RF

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',
       }}
     >
       <Background variant={BackgroundVariant.Dots} />

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',
 	}}
 >
 	<Controls />

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<NodeType extends Node = Node>({
   style,
   className,
@@ -63,14 +63,17 @@ function MiniMapComponent<NodeType extends Node = Node>({
   onNodeClick,
   pannable = false,
   zoomable = false,
-  ariaLabel = 'React Flow mini map',
+  ariaLabel,
   inversePan,
   zoomStep = 10,
   offsetScale = 5,
 }: MiniMapProps<NodeType>) {
   const store = useStoreApi<NodeType>();
   const svg = useRef<SVGSVGElement>(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<NodeType extends Node = Node>({
       }, [])
     : undefined;
 
+  const effectiveAriaLabel = ariaLabel ?? labelConfig['minimap.ariaLabel'];
+
   return (
     <Panel
       position={position}
@@ -159,7 +164,8 @@ function MiniMapComponent<NodeType extends Node = Node>({
         ref={svg}
         onClick={onSvgClick}
       >
-        {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
+        {effectiveAriaLabel && <title id={labelledBy}>{effectiveAriaLabel}</title>}
+
         <MiniMapNodes<NodeType>
           onClick={onSvgNodeClick}
           nodeColor={nodeColor}

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}<title id={labelledBy}>{ariaLabel}</title>{/if}
+      {#if ariaLabel ?? labelConfig['minimap.ariaLabel']}
+        <title id={labelledBy}>{ariaLabel ?? labelConfig['minimap.ariaLabel']}</title>
+      {/if}
 
       {#each store.nodes as userNode (userNode.id)}
         {@const node = store.nodeLookup.get(userNode.id)}

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<typeof defaultLabelConfig>;