feat: add role prop to nodes

examples/react/src/examples/Basic/index.tsx

@@ -25,9 +25,10 @@ const initialNodes: Node[] = [
   {
     id: '1',
     type: 'input',
-    data: { label: 'Node 1' },
+    data: { label: 'Focusable Node' },
     position: { x: 250, y: 5 },
     className: 'light',
+    role: null,
   },
   {
     id: '2',

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

@@ -39,6 +39,7 @@ export function NodeWrapper<NodeType extends Node>({
   nodeTypes,
   nodeClickDistance,
   onError,
+  role,
 }: NodeWrapperProps<NodeType>) {
   const { node, internals, isParent } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
@@ -154,7 +155,6 @@ export function NodeWrapper<NodeType extends Node>({
       });
     }
   };
-
   return (
     <div
       className={cc([
@@ -192,7 +192,7 @@ export function NodeWrapper<NodeType extends Node>({
       onDoubleClick={onDoubleClickHandler}
       onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
-      role={isFocusable ? 'button' : undefined}
+      role={node.role === null ? undefined : node.role || (isFocusable ? 'button' : undefined)}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
       aria-label={node.ariaLabel}
     >

packages/react/src/types/nodes.ts

@@ -1,5 +1,12 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
+import type {
+  CoordinateExtent,
+  NodeBase,
+  OnError,
+  NodeProps as NodePropsBase,
+  InternalNodeBase,
+  NodeRole,
+} from '@xyflow/system';
 
 import { NodeTypes } from './general';
 
@@ -58,6 +65,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodeExtent?: CoordinateExtent;
   onError?: OnError;
   nodeClickDistance?: number;
+  role?: NodeRole;
 };
 
 /**

packages/system/src/types/nodes.ts

@@ -73,6 +73,13 @@ export type NodeBase<
    */
   origin?: NodeOrigin;
   handles?: NodeHandle[];
+  /**
+   * The ARIA role attribute for the node element, used for accessibility.
+   * Common values for nodes might be 'button', 'group', 'listitem', etc.
+   * When not specified, focusable nodes default to 'button' role.
+   * @default "button" (for focusable nodes)
+   */
+  role?: NodeRole;
   measured?: {
     width?: number;
     height?: number;
@@ -180,3 +187,4 @@ export type Align = 'center' | 'start' | 'end';
 
 export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;
 export type ParentLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, Map<string, NodeType>>;
+export type NodeRole = 'button' | 'group' | 'listitem' | 'application' | 'region' | 'none' | null;