chore(controls): add aria-label #3775

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