chore(a11y): add role to wrapping g for edges

packages/react/src/components/Edges/wrapEdge.tsx

@@ -202,7 +202,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         onMouseLeave={onEdgeMouseLeave}
         onKeyDown={isFocusable ? onKeyDown : undefined}
         tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : undefined}
+        role={isFocusable ? 'button' : 'img'}
         data-testid={`rf__edge-${id}`}
         aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
         aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -30,6 +30,7 @@
   export let targetY: $$Props['targetY'];
   export let sourcePosition: $$Props['sourcePosition'];
   export let targetPosition: $$Props['targetPosition'];
+  export let ariaLabel: $$Props['ariaLabel'] = undefined;
   // @ todo: support edge updates
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
@@ -51,7 +52,19 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<g class="svelte-flow__edge" class:animated class:selected data-id={id} on:click={onClick}>
+<g
+  class="svelte-flow__edge"
+  class:animated
+  class:selected
+  data-id={id}
+  on:click={onClick}
+  aria-label={ariaLabel === null
+    ? undefined
+    : ariaLabel
+    ? ariaLabel
+    : `Edge from ${source} to ${target}`}
+  role="img"
+>
   <svelte:component
     this={edgeComponent}
     {id}

packages/svelte/src/lib/types/edges.ts

@@ -67,6 +67,7 @@ export type EdgeLayouted = Pick<
   | 'markerEnd'
   | 'sourceHandle'
   | 'targetHandle'
+  | 'ariaLabel'
 > &
   EdgePosition & {
     sourceHandleId?: string | null;