feat(nodes-edges): add domAttributes

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

@@ -138,9 +138,10 @@
           : `Edge from ${source} to ${target}`}
       aria-describedby={focusable ? `${ARIA_EDGE_DESC_KEY}-${store.flowId}` : undefined}
       role={edge.ariaRole ?? (focusable ? 'group' : 'img')}
-      aria-roledescription={edge.ariaRoleDescription || 'edge'}
+      aria-roledescription={edge.domAttributes?.['aria-roledescription'] || 'edge'}
       onkeydown={focusable ? onkeydown : undefined}
       tabindex={focusable ? 0 : undefined}
+      {...edge.domAttributes}
     >
       <EdgeComponent
         {id}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -254,10 +254,11 @@
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
     role={node.ariaRole ?? (focusable ? 'group' : undefined)}
-    aria-roledescription={node.ariaRoleDescription || 'node'}
+    aria-roledescription={node.domAttributes?.['aria-roledescription'] || 'node'}
     aria-describedby={store.disableKeyboardA11y
       ? undefined
       : `${ARIA_NODE_DESC_KEY}-${store.flowId}`}
+    {...node.domAttributes}
   >
     <NodeComponent
       {data}

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

@@ -1,4 +1,5 @@
 import type { Component } from 'svelte';
+import type { ClassValue, HTMLAttributes, SVGAttributes } from 'svelte/elements';
 import type {
   EdgeBase,
   BezierPathOptions,
@@ -9,7 +10,6 @@ import type {
 } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
-import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
 /**
  * An `Edge` is the complete description with everything Svelte Flow needs to know in order to
@@ -30,6 +30,13 @@ export type Edge<
    * @default "group"
    */
   ariaRole?: HTMLAttributes<HTMLElement>['role'];
+  /**
+   * General escape hatch for adding custom attributes to the edge's DOM element.
+   */
+  domAttributes?: Omit<
+    SVGAttributes<SVGGElement>,
+    'id' | 'style' | 'class' | 'role' | 'aria-label'
+  >;
 };
 
 export type BaseEdgeProps = Pick<

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes, DOMAttributes } from 'svelte/elements';
 import type { InternalNodeBase, NodeBase, NodeProps as NodePropsBase } from '@xyflow/system';
 
 /**
@@ -25,7 +25,21 @@ export type Node<
    * The ARIA role attribute for the node element, used for accessibility.
    * @default "group"
    */
-  ariaRole?: HTMLAttributes<HTMLElement>['role'];
+  ariaRole?: HTMLAttributes<HTMLDivElement>['role'];
+
+  /**
+   * General escape hatch for adding custom attributes to the node's DOM element.
+   */
+  domAttributes?: Omit<
+    HTMLAttributes<HTMLDivElement>,
+    | 'id'
+    | 'style'
+    | 'class'
+    | 'draggable'
+    | 'role'
+    | 'aria-label'
+    | keyof DOMAttributes<HTMLDivElement>
+  >;
 };
 
 // @todo: currently generics for nodes are not really supported