From 28b043060626fa5af8b630ef0f1b04c37e2166b3 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Mon, 2 Jun 2025 13:19:27 +0200
Subject: [PATCH] chore: set default role to group, add aria-roledescription

---
 packages/react/src/components/NodeWrapper/index.tsx      | 3 ++-
 .../src/lib/components/NodeWrapper/NodeWrapper.svelte    | 3 ++-
 packages/system/src/types/nodes.ts                       | 9 ++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index 10909bcd..218ce700 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -191,7 +191,8 @@ export function NodeWrapper<NodeType extends Node>({
       onDoubleClick={onDoubleClickHandler}
       onKeyDown={isFocusable ? onKeyDown : undefined}
       tabIndex={isFocusable ? 0 : undefined}
-      role={node.ariaRole === null ? undefined : node.ariaRole || (isFocusable ? 'button' : undefined)}
+      role={node.ariaRole === null ? undefined : node.ariaRole || (isFocusable ? 'group' : undefined)}
+      aria-roledescription={node.ariaRoleDescription || 'node'}
       aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
       aria-label={node.ariaLabel}
     >
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index dce41767..3c7e7db9 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -252,7 +252,8 @@
       : undefined}
     onkeydown={focusable ? onKeyDown : undefined}
     tabIndex={focusable ? 0 : undefined}
-    role={node.ariaRole === null ? undefined : node.ariaRole || (focusable ? 'button' : undefined)}
+    role={node.ariaRole === null ? undefined : node.ariaRole || (focusable ? 'group' : undefined)}
+    aria-roledescription={node.ariaRoleDescription || 'node'}
     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 97c7fa8d..82446cd7 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -75,12 +75,15 @@ export type NodeBase<
   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)
+   * @default "group"
    */
 
   ariaRole?: AriaRole;
+  /**
+   * A description of the node's role, used for accessibility.
+   * @default "node"
+   */
+  ariaRoleDescription?: string;
   measured?: {
     width?: number;
     height?: number;