From cdc08f1b5477daba51b55b30b68f9ed5285b76b0 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Mon, 2 Jun 2025 12:10:54 +0200
Subject: [PATCH] chore: swap role for ariaRole, add svelte

---
 examples/react/src/examples/Basic/index.tsx            |  3 +--
 packages/react/src/components/NodeWrapper/index.tsx    |  3 +--
 packages/react/src/container/ReactFlow/index.tsx       |  1 +
 packages/react/src/types/nodes.ts                      | 10 +---------
 .../src/lib/components/NodeWrapper/NodeWrapper.svelte  |  2 +-
 packages/system/src/types/nodes.ts                     |  5 +++--
 6 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index 58123d57..168bcff6 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -25,10 +25,9 @@ const initialNodes: Node[] = [
   {
     id: '1',
     type: 'input',
-    data: { label: 'Focusable Node' },
+    data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
-    role: null,
   },
   {
     id: '2',
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index 272f9de9..10909bcd 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/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}
     >
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 2247a004..bd2f1334 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/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}
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 9be41de7..8dc213d7 100644
--- a/packages/react/src/types/nodes.ts
+++ b/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;
 };
 
 /**
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index f053cd82..dce41767 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -252,7 +252,7 @@
       : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
-    role={focusable ? 'button' : undefined}
+    role={node.ariaRole === null ? undefined : node.ariaRole || (focusable ? 'button' : undefined)}
     aria-describedby={store.disableKeyboardA11y
       ? undefined
       : `${ARIA_NODE_DESC_KEY}-${store.flowId}`}
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index f90b367d..97c7fa8d 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -79,7 +79,8 @@ export type NodeBase<
    * When not specified, focusable nodes default to 'button' role.
    * @default "button" (for focusable nodes)
    */
-  role?: NodeRole;
+
+  ariaRole?: AriaRole;
   measured?: {
     width?: number;
     height?: number;
@@ -187,4 +188,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;
+export type AriaRole = 'button' | 'group' | 'listitem' | 'application' | 'region' | 'none' | null;