chore: use svelte and react types for AriaRole

packages/react/src/types/edges.ts

@@ -1,6 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { CSSProperties, SVGAttributes, ReactNode, MouseEvent as ReactMouseEvent, ComponentType } from 'react';
+import type {
+  CSSProperties,
+  SVGAttributes,
+  ReactNode,
+  MouseEvent as ReactMouseEvent,
+  ComponentType,
+  AriaRole,
+} from 'react';
 import type {
   EdgeBase,
   BezierPathOptions,
@@ -176,6 +183,11 @@ export type BaseEdgeProps = Omit<SVGAttributes<SVGPathElement>, 'd' | 'path' | '
      * element in a separate SVG document or element.
      */
     markerEnd?: string;
+    /**
+     * The ARIA role attribute for the edge, used for accessibility.
+     * @default "group"
+     */
+    ariaRole?: AriaRole;
   };
 
 /**

packages/react/src/types/nodes.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, AriaRole } from 'react';
 import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
 
 import { NodeTypes } from './general';
@@ -18,6 +18,12 @@ export type Node<
   className?: string;
   resizing?: boolean;
   focusable?: boolean;
+  /**
+   * The ARIA role attribute for the node element, used for accessibility.
+   * @default "group"
+   */
+
+  ariaRole?: AriaRole;
 };
 
 /**

packages/svelte/src/lib/types/edges.ts

@@ -46,6 +46,7 @@ export type BaseEdgeProps = Pick<
    * @example 'url(#arrow)'
    */
   markerEnd?: string;
+  ariaRole?: HTMLAttributes<HTMLElement>['role'];
   class?: ClassValue;
 } & HTMLAttributes<SVGPathElement>;
 

packages/svelte/src/lib/types/nodes.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type { InternalNodeBase, NodeBase, NodeProps as NodePropsBase } from '@xyflow/system';
 
 /**
@@ -21,6 +21,11 @@ export type Node<
   class?: ClassValue;
   style?: string;
   focusable?: boolean;
+  /**
+   * The ARIA role attribute for the node element, used for accessibility.
+   * @default "group"
+   */
+  ariaRole?: HTMLAttributes<HTMLElement>['role'];
 };
 
 // @todo: currently generics for nodes are not really supported

packages/system/src/types/edges.ts

@@ -1,4 +1,4 @@
-import { Position, AriaRole } from './utils';
+import { Position } from './utils';
 
 export type EdgeBase<
   EdgeData extends Record<string, unknown> = Record<string, unknown>,
@@ -40,12 +40,6 @@ export type EdgeBase<
    * This property sets the width of that invisible path.
    */
   interactionWidth?: number;
-  /**
-   * The ARIA role attribute for the edge, used for accessibility.
-   * @default "group"
-   */
-
-  ariaRole?: AriaRole;
   /**
    * A description of the edge's, used for accessibility.
    * @default "edge"

packages/system/src/types/nodes.ts

@@ -1,6 +1,5 @@
 import type { XYPosition, Position, CoordinateExtent, Handle } from '.';
 import { Optional } from '../utils/types';
-import { AriaRole } from './utils';
 
 /**
  * Framework independent node data structure.
@@ -74,12 +73,6 @@ export type NodeBase<
    */
   origin?: NodeOrigin;
   handles?: NodeHandle[];
-  /**
-   * The ARIA role attribute for the node element, used for accessibility.
-   * @default "group"
-   */
-
-  ariaRole?: AriaRole;
   /**
    * A description of the node's role, used for accessibility.
    * @default "node"

packages/system/src/types/utils.ts

@@ -56,8 +56,3 @@ export type Transform = [number, number, number];
  * to represent an unbounded extent.
  */
 export type CoordinateExtent = [[number, number], [number, number]];
-
-/**
- * The `AriaRole` type is used to define the role of an element in the accessibility tree.
- */
-export type AriaRole = 'button' | 'group' | 'listitem' | 'application' | 'region' | 'none' | null;