Merge pull request #5317 from xyflow/feat/nodes-html-attributes

feat(nodes-edges): add domAttributes

.changeset/sharp-dogs-chew.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': patch
+---
+
+Add `domAttributes` option for nodes and edges

examples/react/src/examples/A11y/index.tsx

@@ -18,6 +18,11 @@ const initialNodes: Node[] = [
     type: 'input',
     data: { label: 'A11y Node 1' },
     position: { x: 250, y: 5 },
+    className: 'light',
+    domAttributes: {
+      tabIndex: 10,
+      'aria-roledescription': 'A11y Node',
+    },
   },
   {
     id: '2',

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"
         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

@@ -220,9 +220,10 @@ export function NodeWrapper<NodeType extends Node>({
       tabIndex={isFocusable ? 0 : undefined}
       onFocus={isFocusable ? onFocus : undefined}
       role={node.ariaRole ?? (isFocusable ? 'group' : undefined)}
-      aria-roledescription={node.ariaRoleDescription || 'node'}
+      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>
+  >;
 };
 
 /**

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"
       onkeydown={focusable ? onkeydown : undefined}
       tabindex={focusable ? 0 : undefined}
+      {...edge.domAttributes}
     >
       <EdgeComponent
         {id}

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

@@ -284,10 +284,11 @@
     onfocus={focusable ? onFocus : undefined}
     tabIndex={focusable ? 0 : undefined}
     role={node.ariaRole ?? (focusable ? 'group' : undefined)}
-    aria-roledescription={node.ariaRoleDescription || 'node'}
+    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

packages/system/src/types/edges.ts

@@ -40,11 +40,6 @@ export type EdgeBase<
    * This property sets the width of that invisible path.
    */
   interactionWidth?: number;
-  /**
-   * A description of the edge's, used for accessibility.
-   * @default "edge"
-   */
-  ariaRoleDescription?: string;
 };
 
 export type SmoothStepPathOptions = {

packages/system/src/types/nodes.ts

@@ -73,11 +73,6 @@ export type NodeBase<
    */
   origin?: NodeOrigin;
   handles?: NodeHandle[];
-  /**
-   * A description of the node's role, used for accessibility.
-   * @default "node"
-   */
-  ariaRoleDescription?: string;
   measured?: {
     width?: number;
     height?: number;