chore(controls): add custom aria labels

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',

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',

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 && (
         <>

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. */

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}
 >

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