alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: set default role to group, add aria-roledescription

Browse Source
This commit is contained in:
Abbey Yacoe
2025-06-02 13:19:27 +02:00
parent cdc08f1b54
commit 28b0430606
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/react/src/components/NodeWrapper/index.tsx
View File

@@ -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}
>

3
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -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}`}

9
packages/system/src/types/nodes.ts
View File

@@ -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;