chore(controls): add aria-label #3775

packages/react/src/additional-components/Controls/Controls.tsx

@@ -34,6 +34,7 @@ function ControlsComponent({
   className,
   children,
   position = 'bottom-left',
+  'aria-label': ariaLabel = 'React Flow controls',
 }: ControlProps) {
   const store = useStoreApi();
   const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
@@ -70,6 +71,7 @@ function ControlsComponent({
       position={position}
       style={style}
       data-testid="rf__controls"
+      aria-label={ariaLabel}
     >
       {showZoom && (
         <>

packages/react/src/additional-components/Controls/types.ts

@@ -1,9 +1,9 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';
 
 import type { FitViewOptions } from '../../types';
 
-export type ControlProps = HTMLAttributes<HTMLDivElement> & {
+export type ControlProps = {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;
@@ -14,6 +14,9 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
   onInteractiveChange?: (interactiveStatus: boolean) => void;
   position?: PanelPosition;
   children?: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  'aria-label'?: string;
 };
 
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -21,6 +21,7 @@
   export let buttonColor: $$Props['buttonColor'] = undefined;
   export let buttonColorHover: $$Props['buttonColorHover'] = undefined;
   export let buttonBorderColor: $$Props['buttonColorHover'] = undefined;
+  export let ariaLabel: $$Props['aria-label'] = undefined;
 
   const {
     zoomIn,
@@ -67,7 +68,12 @@
   };
 </script>
 
-<Panel class="svelte-flow__controls" {position} data-testid="svelte-flow__controls">
+<Panel
+  class="svelte-flow__controls"
+  {position}
+  data-testid="svelte-flow__controls"
+  aria-label={ariaLabel ?? 'Svelte Flow controls'}
+>
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -9,4 +9,5 @@ export type ControlsProps = {
   buttonBgColorHover?: string;
   buttonColor?: string;
   buttonColorHover?: string;
+  'aria-label'?: string;
 };