feat(nodes-edges): add domAttributes

packages/react/src/components/EdgeWrapper/index.tsx

@@ -199,7 +199,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
         onKeyDown={isFocusable ? onKeyDown : undefined}
         tabIndex={isFocusable ? 0 : undefined}
         role={edge.ariaRole ?? (isFocusable ? 'group' : 'img')}
-        aria-roledescription={edge.ariaRoleDescription || 'edge'}
+        aria-roledescription={edge.domAttributes?.['aria-roledescription'] || 'edge'}
         data-id={id}
         data-testid={`rf__edge-${id}`}
         aria-label={
@@ -207,6 +207,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
         }
         aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
         ref={edgeRef}
+        {...edge.domAttributes}
       >
         {!reconnecting && (
           <EdgeComponent

packages/react/src/components/NodeWrapper/index.tsx

@@ -196,9 +196,10 @@ export function NodeWrapper<NodeType extends Node>({
       onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
       role={node.ariaRole ?? (isFocusable ? 'group' : undefined)}
-      aria-roledescription={node.ariaRoleDescription || 'node'}
+      aria-roledescription={node.domAttributes?.['aria-roledescription'] || 'node'}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
       aria-label={node.ariaLabel}
+      {...node.domAttributes}
     >
       <Provider value={id}>
         <NodeComponent

packages/react/src/types/edges.ts

@@ -69,6 +69,10 @@ export type Edge<
      * @default "group"
      */
     ariaRole?: AriaRole;
+    /**
+     * General escape hatch for adding custom attributes to the edge's DOM element.
+     */
+    domAttributes?: Omit<SVGAttributes<SVGGElement>, 'id' | 'style' | 'className' | 'role' | 'aria-label'>;
   };
 
 type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<

packages/react/src/types/nodes.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, MouseEvent as ReactMouseEvent, AriaRole } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, AriaRole, HTMLAttributes, DOMAttributes } from 'react';
 import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
 
 import { NodeTypes } from './general';
@@ -22,8 +22,15 @@ export type Node<
    * The ARIA role attribute for the node element, used for accessibility.
    * @default "group"
    */
-
   ariaRole?: AriaRole;
+
+  /**
+   * General escape hatch for adding custom attributes to the node's DOM element.
+   */
+  domAttributes?: Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'id' | 'style' | 'className' | 'draggable' | 'role' | 'aria-label' | keyof DOMAttributes<HTMLDivElement>
+  >;
 };
 
 /**