feat(core): add dom attributes option for nodes and edges (#1861)

Signed-off-by: braks <[email protected]>

Author: cmath10

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -192,20 +192,22 @@ const EdgeWrapper = defineComponent({
               inactive: !isSelectable.value && !hooks.value.edgeClick.hasListeners(),
             },
           ],
+          'tabIndex': isFocusable.value ? 0 : undefined,
+          'aria-label':
+            edge.value.ariaLabel === null
+              ? undefined
+              : edge.value.ariaLabel ?? `Edge from ${edge.value.source} to ${edge.value.target}`,
+          'aria-describedby': isFocusable.value ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
+          'aria-roledescription': 'edge',
+          'role': isFocusable.value ? 'group' : 'img',
+          ...edge.value.domAttributes,
           'onClick': onEdgeClick,
           'onContextmenu': onEdgeContextMenu,
           'onDblclick': onDoubleClick,
           'onMouseenter': onEdgeMouseEnter,
           'onMousemove': onEdgeMouseMove,
           'onMouseleave': onEdgeMouseLeave,
           'onKeyDown': isFocusable.value ? onKeyDown : undefined,
-          'tabIndex': isFocusable.value ? 0 : undefined,
-          'aria-label':
-            edge.value.ariaLabel === null
-              ? undefined
-              : edge.value.ariaLabel || `Edge from ${edge.value.source} to ${edge.value.target}`,
-          'aria-describedby': isFocusable.value ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
-          'role': isFocusable.value ? 'button' : 'img',
         },
         [
           updating.value

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -283,9 +283,11 @@ const NodeWrapper = defineComponent({
             ...getStyle.value,
           },
           'tabIndex': isFocusable.value ? 0 : undefined,
-          'role': isFocusable.value ? 'button' : undefined,
+          'role': isFocusable.value ? 'group' : undefined,
           'aria-describedby': disableKeyboardA11y.value ? undefined : `${ARIA_NODE_DESC_KEY}-${vueFlowId}`,
           'aria-label': node.ariaLabel,
+          'aria-roledescription': 'node',
+          ...node.domAttributes,
           'onMouseenter': onMouseEnter,
           'onMousemove': onMouseMove,
           'onMouseleave': onMouseLeave,

packages/core/src/types/edge.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, Component, VNode } from 'vue'
+import type { CSSProperties, Component, SVGAttributes, VNode } from 'vue'
 import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow'
 import type { GraphNode } from './node'
 import type { EdgeComponent, EdgeTextProps } from './components'
@@ -108,6 +108,24 @@ export interface DefaultEdge<
   /** Aria label for edge (a11y) */
   zIndex?: number
   ariaLabel?: string | null
+  /**
+   * General escape hatch for adding custom attributes to the edge's DOM element.
+   */
+  domAttributes?: Omit<
+    SVGAttributes,
+    | 'id'
+    | 'style'
+    | 'className'
+    | 'role'
+    | 'aria-label'
+    | 'onClick'
+    | 'onMouseenter'
+    | 'onMousemove'
+    | 'onMouseleave'
+    | 'onContextmenu'
+    | 'onDblclick'
+    | 'onKeyDown'
+  >
 }
 
 export interface SmoothStepPathOptions {

packages/core/src/types/node.ts

@@ -1,4 +1,4 @@
-import type { Component, VNode } from 'vue'
+import type { Component, HTMLAttributes, VNode } from 'vue'
 import type { ClassFunc, Dimensions, ElementData, Position, StyleFunc, Styles, XYPosition, XYZPosition } from './flow'
 import type { NodeComponent } from './components'
 import type { HandleConnectable, HandleElement, ValidConnectionFunc } from './handle'
@@ -109,6 +109,25 @@ export interface Node<Data = ElementData, CustomEvents extends Record<string, Cu
   events?: Partial<NodeEventsHandler<CustomEvents>>
   zIndex?: number
   ariaLabel?: string
+
+  /**
+   * General escape hatch for adding custom attributes to the node's DOM element.
+   */
+  domAttributes?: Omit<
+    HTMLAttributes,
+    | 'id'
+    | 'style'
+    | 'className'
+    | 'draggable'
+    | 'aria-label'
+    | 'onMouseenter'
+    | 'onMousemove'
+    | 'onMouseleave'
+    | 'onContextmenu'
+    | 'onClick'
+    | 'onDblclick'
+    | 'onKeydown'
+  >
 }
 
 export interface GraphNode<