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

chore(a11y): rename props, fix linting error

Browse Source
This commit is contained in:
Abbey Yacoe
2025-05-20 14:40:28 +02:00
parent 36f1d94ca7
commit 07265ed277
10 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/Overview/index.tsx
+1 -1
View File
@@ -235,7 +235,7 @@ const OverviewFlow = () => {
onBeforeDelete={onBeforeDelete} onBeforeDelete={onBeforeDelete}
onDelete={onDelete} onDelete={onDelete}
onPaneMouseMove={onPaneMouseMove} onPaneMouseMove={onPaneMouseMove}
a11yMessages={{ descriptions={{
'a11yDescription.node.default': 'Custom Node Desc.', 'a11yDescription.node.default': 'Custom Node Desc.',
'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.', 'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.',
'a11yDescription.edge.default': 'Custom Edge Desc.', 'a11yDescription.edge.default': 'Custom Edge Desc.',
examples/svelte/src/routes/examples/overview/Flow.svelte
+1 -1
View File
@@ -220,7 +220,7 @@
console.log('on selection changed via prop', { nodes, edges }); console.log('on selection changed via prop', { nodes, edges });
}} }}
selectNodesOnDrag selectNodesOnDrag
a11yMessages={{ descriptions={{
'a11yDescription.node.default': 'Svelte Custom Node Description.', 'a11yDescription.node.default': 'Svelte Custom Node Description.',
'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Description', 'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Description',
'a11yDescription.edge.default': 'Svelte Custom Edge Desc.', 'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
packages/react/src/components/A11yDescriptions/index.tsx
+8 -8
View File
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
import { useStore } from '../../hooks/useStore'; import { useStore } from '../../hooks/useStore';
import type { ReactFlowState } from '../../types'; import type { ReactFlowState } from '../../types';
import type { a11yMessages } from '@xyflow/system'; import type { descriptions } from '@xyflow/system';
const style: CSSProperties = { display: 'none' }; const style: CSSProperties = { display: 'none' };
const ariaLiveStyle: CSSProperties = { const ariaLiveStyle: CSSProperties = {
@@ -21,7 +21,7 @@ export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc'; export const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live'; export const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
const defaultA11yMessages: Required<a11yMessages> = { const defaultDescriptions: Required<descriptions> = {
'a11yDescription.node.default': 'a11yDescription.node.default':
'Press enter or space to select a node. Press delete to remove it and escape to cancel.', 'Press enter or space to select a node. Press delete to remove it and escape to cancel.',
'a11yDescription.node.keyboardDisabled': 'a11yDescription.node.keyboardDisabled':
@@ -45,17 +45,17 @@ function AriaLiveMessage({ rfId }: { rfId: string }) {
export function A11yDescriptions({ export function A11yDescriptions({
rfId, rfId,
disableKeyboardA11y, disableKeyboardA11y,
a11yMessages = {}, descriptions = {},
}: { }: {
rfId: string; rfId: string;
disableKeyboardA11y: boolean; disableKeyboardA11y: boolean;
a11yMessages?: a11yMessages; descriptions?: descriptions;
}) { }) {
const nodeDesc = disableKeyboardA11y const nodeDesc = disableKeyboardA11y
? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default'] ? descriptions['a11yDescription.node.default'] || defaultDescriptions['a11yDescription.node.default']
: a11yMessages['a11yDescription.node.keyboardDisabled'] || : descriptions['a11yDescription.node.keyboardDisabled'] ||
defaultA11yMessages['a11yDescription.node.keyboardDisabled']; defaultDescriptions['a11yDescription.node.keyboardDisabled'];
const edgeDesc = a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default']; const edgeDesc = descriptions['a11yDescription.edge.default'] || defaultDescriptions['a11yDescription.edge.default'];
return ( return (
<> <>
packages/react/src/container/ReactFlow/index.tsx
+2 -2
View File
@@ -145,7 +145,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
colorMode = 'light', colorMode = 'light',
debug, debug,
onScroll, onScroll,
a11yMessages, descriptions,
...rest ...rest
}: ReactFlowProps<NodeType, EdgeType>, }: ReactFlowProps<NodeType, EdgeType>,
ref: ForwardedRef<HTMLDivElement> ref: ForwardedRef<HTMLDivElement>
@@ -310,7 +310,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
<SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} /> <SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} />
{children} {children}
<Attribution proOptions={proOptions} position={attributionPosition} /> <Attribution proOptions={proOptions} position={attributionPosition} />
<A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} a11yMessages={a11yMessages} /> <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} descriptions={descriptions} />
</Wrapper> </Wrapper>
</div> </div>
); );
packages/react/src/types/component-props.ts
+2 -2
View File
@@ -21,7 +21,7 @@ import type {
ColorMode, ColorMode,
SnapGrid, SnapGrid,
OnReconnect, OnReconnect,
a11yMessages, descriptions,
} from '@xyflow/system'; } from '@xyflow/system';
import type { import type {
@@ -671,5 +671,5 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
* Custom accessibility messages for screen readers and a11y features. * Custom accessibility messages for screen readers and a11y features.
* Allows localization and customization of ARIA descriptions. * Allows localization and customization of ARIA descriptions.
*/ */
a11yMessages?: a11yMessages; descriptions?: descriptions;
} }
packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+7 -7
View File
@@ -1,16 +1,16 @@
<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge"> <script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
import type { SvelteFlowStore } from '$lib/store/types'; import type { SvelteFlowStore } from '$lib/store/types';
import type { a11yMessages } from '@xyflow/system'; import type { descriptions as DescriptionsType } from '@xyflow/system'; // Rename the imported type
import type { Node, Edge } from '$lib/types'; import type { Node, Edge } from '$lib/types';
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.'; import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.';
const { store, a11yMessages = {} }: { const { store, descriptions = {} }: {
store: SvelteFlowStore<NodeType, EdgeType>; store: SvelteFlowStore<NodeType, EdgeType>;
a11yMessages?: Partial<a11yMessages>; descriptions?: Partial<DescriptionsType>;
} = $props(); } = $props();
const defaultA11yMessages = { const defaultDescriptions = {
'a11yDescription.node.default': 'a11yDescription.node.default':
'Press enter or space to select a node. Press delete to remove it and escape to cancel.', 'Press enter or space to select a node. Press delete to remove it and escape to cancel.',
'a11yDescription.node.keyboardDisabled': 'a11yDescription.node.keyboardDisabled':
@@ -22,11 +22,11 @@ const defaultA11yMessages = {
<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;"> <div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
{store.disableKeyboardA11y {store.disableKeyboardA11y
? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default'] ? descriptions['a11yDescription.node.default'] || defaultDescriptions['a11yDescription.node.default']
: a11yMessages['a11yDescription.node.keyboardDisabled'] || defaultA11yMessages['a11yDescription.node.keyboardDisabled']} : descriptions['a11yDescription.node.keyboardDisabled'] || defaultDescriptions['a11yDescription.node.keyboardDisabled']}
</div> </div>
<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;"> <div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
{a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default']} {descriptions['a11yDescription.edge.default'] || defaultDescriptions['a11yDescription.edge.default']}
</div> </div>
{#if !store.disableKeyboardA11y} {#if !store.disableKeyboardA11y}
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+2 -2
View File
@@ -70,7 +70,7 @@
nodes = $bindable([]), nodes = $bindable([]),
edges = $bindable([]), edges = $bindable([]),
viewport = $bindable(undefined), viewport = $bindable(undefined),
a11yMessages, descriptions,
...props ...props
}: SvelteFlowProps<NodeType, EdgeType> & }: SvelteFlowProps<NodeType, EdgeType> &
Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'> = $props(); Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'> = $props();
@@ -218,6 +218,6 @@
</Pane> </Pane>
</Zoom> </Zoom>
<Attribution {proOptions} position={attributionPosition} /> <Attribution {proOptions} position={attributionPosition} />
<A11yDescriptions {store} a11yMessages={a11yMessages} /> <A11yDescriptions {store} descriptions={descriptions} />
{@render children?.()} {@render children?.()}
</Wrapper> </Wrapper>
packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+1
View File
@@ -92,6 +92,7 @@
noDragClass, noDragClass,
noPanClass, noPanClass,
noWheelClass, noWheelClass,
descriptions,
...divAttributes ...divAttributes
} = $derived(rest); } = $derived(rest);
/* eslint-enable @typescript-eslint/no-unused-vars */ /* eslint-enable @typescript-eslint/no-unused-vars */
packages/svelte/src/lib/container/SvelteFlow/types.ts
+2 -2
View File
@@ -21,7 +21,7 @@ import type {
OnReconnect, OnReconnect,
OnReconnectStart, OnReconnectStart,
OnReconnectEnd, OnReconnectEnd,
a11yMessages descriptions
} from '@xyflow/system'; } from '@xyflow/system';
import type { import type {
@@ -476,5 +476,5 @@ export type SvelteFlowProps<
* Custom accessibility messages for screen readers and a11y features. * Custom accessibility messages for screen readers and a11y features.
* Allows localization and customization of ARIA descriptions. * Allows localization and customization of ARIA descriptions.
*/ */
a11yMessages?: a11yMessages; descriptions?: descriptions;
}; };
packages/system/src/types/general.ts
+1 -1
View File
@@ -314,7 +314,7 @@ export type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType ex
edges: EdgeType[]; edges: EdgeType[];
}) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>; }) => Promise<boolean | { nodes: NodeType[]; edges: EdgeType[] }>;
export type a11yMessages = { export type descriptions = {
'a11yDescription.node.default'?: string; 'a11yDescription.node.default'?: string;
'a11yDescription.node.keyboardDisabled'?: string; 'a11yDescription.node.keyboardDisabled'?: string;
'a11yDescription.edge.default'?: string; 'a11yDescription.edge.default'?: string;