chore: swap role for ariaRole, add svelte

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

@@ -39,7 +39,6 @@ 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>;
@@ -192,7 +191,7 @@ export function NodeWrapper<NodeType extends Node>({
       onDoubleClick={onDoubleClickHandler}
       onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
-      role={node.role === null ? undefined : node.role || (isFocusable ? 'button' : undefined)}
+      role={node.ariaRole === null ? undefined : node.ariaRole || (isFocusable ? 'button' : undefined)}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
       aria-label={node.ariaLabel}
     >

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

@@ -170,6 +170,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/nodes.ts

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