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({ 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;