From 0d8767ba14555573bffbc80c73ac5d8ad1fe859f Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 14 Aug 2023 16:26:12 +0200
Subject: [PATCH] chore(a11y): add role to wrapping g for edges

---
 packages/react/src/components/Edges/wrapEdge.tsx  |  2 +-
 .../lib/components/EdgeWrapper/EdgeWrapper.svelte | 15 ++++++++++++++-
 packages/svelte/src/lib/types/edges.ts            |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Edges/wrapEdge.tsx b/packages/react/src/components/Edges/wrapEdge.tsx
index 3a107e88..92aaada6 100644
--- a/packages/react/src/components/Edges/wrapEdge.tsx
+++ b/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}
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index f21f570e..02519cf7 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 2f7817ee..6ef9f083 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -67,6 +67,7 @@ export type EdgeLayouted = Pick<
   | 'markerEnd'
   | 'sourceHandle'
   | 'targetHandle'
+  | 'ariaLabel'
 > &
   EdgePosition & {
     sourceHandleId?: string | null;