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