Merge branch 'main' into a11y

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

@@ -136,28 +136,28 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
 
   const onEdgeDoubleClick = onDoubleClick
     ? (event: React.MouseEvent) => {
-      onDoubleClick(event, { ...edge });
-    }
+        onDoubleClick(event, { ...edge });
+      }
     : undefined;
   const onEdgeContextMenu = onContextMenu
     ? (event: React.MouseEvent) => {
-      onContextMenu(event, { ...edge });
-    }
+        onContextMenu(event, { ...edge });
+      }
     : undefined;
   const onEdgeMouseEnter = onMouseEnter
     ? (event: React.MouseEvent) => {
-      onMouseEnter(event, { ...edge });
-    }
+        onMouseEnter(event, { ...edge });
+      }
     : undefined;
   const onEdgeMouseMove = onMouseMove
     ? (event: React.MouseEvent) => {
-      onMouseMove(event, { ...edge });
-    }
+        onMouseMove(event, { ...edge });
+      }
     : undefined;
   const onEdgeMouseLeave = onMouseLeave
     ? (event: React.MouseEvent) => {
-      onMouseLeave(event, { ...edge });
-    }
+        onMouseLeave(event, { ...edge });
+      }
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {
@@ -198,7 +198,8 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
         onMouseLeave={onEdgeMouseLeave}
         onKeyDown={isFocusable ? onKeyDown : undefined}
         tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : 'img'}
+        role={edge.ariaRole ?? (isFocusable ? 'group' : 'img')}
+        aria-roledescription={edge.ariaRoleDescription || 'edge'}
         data-id={id}
         data-testid={`rf__edge-${id}`}
         aria-label={

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

@@ -158,7 +158,6 @@ export function NodeWrapper<NodeType extends Node>({
       });
     }
   };
-
   return (
     <div
       className={cc([
@@ -196,7 +195,8 @@ export function NodeWrapper<NodeType extends Node>({
       onDoubleClick={onDoubleClickHandler}
       onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
-      role={isFocusable ? 'button' : undefined}
+      role={node.ariaRole ?? (isFocusable ? 'group' : undefined)}
+      aria-roledescription={node.ariaRoleDescription || 'node'}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
       aria-label={node.ariaLabel}
     >

packages/react/src/container/ReactFlow/index.tsx

@@ -171,6 +171,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
       ref={ref}
       className={cc(['react-flow', className, colorModeClassName])}
       id={id}
+      role="application"
     >
       <Wrapper
         nodes={nodes}

packages/react/src/types/edges.ts

@@ -1,6 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { CSSProperties, SVGAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
+import type {
+  CSSProperties,
+  SVGAttributes,
+  ReactNode,
+  MouseEvent as ReactMouseEvent,
+  ComponentType,
+  AriaRole,
+} from 'react';
 import type {
   EdgeBase,
   BezierPathOptions,
@@ -57,6 +64,11 @@ export type Edge<
      */
     reconnectable?: boolean | HandleType;
     focusable?: boolean;
+    /**
+     * The ARIA role attribute for the edge, used for accessibility.
+     * @default "group"
+     */
+    ariaRole?: AriaRole;
   };
 
 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 } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, AriaRole } from 'react';
 import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
 
 import { NodeTypes } from './general';
@@ -18,6 +18,12 @@ export type Node<
   className?: string;
   resizing?: boolean;
   focusable?: boolean;
+  /**
+   * The ARIA role attribute for the node element, used for accessibility.
+   * @default "group"
+   */
+
+  ariaRole?: AriaRole;
 };
 
 /**