diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index a5c22c75..a4325ebc 100644 --- a/packages/react/src/types/edges.ts +++ b/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, '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; }; /** diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 8dc213d7..d9e2671b 100644 --- a/packages/react/src/types/nodes.ts +++ b/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; }; /** diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index c903512a..2b56f48b 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -46,6 +46,7 @@ export type BaseEdgeProps = Pick< * @example 'url(#arrow)' */ markerEnd?: string; + ariaRole?: HTMLAttributes['role']; class?: ClassValue; } & HTMLAttributes; diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts index f861c13b..f7f65469 100644 --- a/packages/svelte/src/lib/types/nodes.ts +++ b/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['role']; }; // @todo: currently generics for nodes are not really supported diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index a8446e00..3e69bf4c 100644 --- a/packages/system/src/types/edges.ts +++ b/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 = Record, @@ -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" diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 3f2978ad..49012024 100644 --- a/packages/system/src/types/nodes.ts +++ b/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" diff --git a/packages/system/src/types/utils.ts b/packages/system/src/types/utils.ts index d46bc76c..274bfe55 100644 --- a/packages/system/src/types/utils.ts +++ b/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;