From 07265ed2772a8602fe27450fed7f9efce45680d5 Mon Sep 17 00:00:00 2001 From: Abbey Yacoe Date: Tue, 20 May 2025 14:40:28 +0200 Subject: [PATCH] chore(a11y): rename props, fix linting error --- examples/react/src/examples/Overview/index.tsx | 2 +- .../src/routes/examples/overview/Flow.svelte | 2 +- .../src/components/A11yDescriptions/index.tsx | 16 ++++++++-------- packages/react/src/container/ReactFlow/index.tsx | 4 ++-- packages/react/src/types/component-props.ts | 4 ++-- .../A11yDescriptions/A11yDescriptions.svelte | 14 +++++++------- .../lib/container/SvelteFlow/SvelteFlow.svelte | 4 ++-- .../src/lib/container/SvelteFlow/Wrapper.svelte | 1 + .../svelte/src/lib/container/SvelteFlow/types.ts | 4 ++-- packages/system/src/types/general.ts | 2 +- 10 files changed, 27 insertions(+), 26 deletions(-) diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index b1f7db61..a5e056b2 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -235,7 +235,7 @@ const OverviewFlow = () => { onBeforeDelete={onBeforeDelete} onDelete={onDelete} onPaneMouseMove={onPaneMouseMove} - a11yMessages={{ + descriptions={{ 'a11yDescription.node.default': 'Custom Node Desc.', 'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.', 'a11yDescription.edge.default': 'Custom Edge Desc.', diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte index b499fc47..5364b37d 100644 --- a/examples/svelte/src/routes/examples/overview/Flow.svelte +++ b/examples/svelte/src/routes/examples/overview/Flow.svelte @@ -220,7 +220,7 @@ console.log('on selection changed via prop', { nodes, edges }); }} selectNodesOnDrag - a11yMessages={{ + descriptions={{ 'a11yDescription.node.default': 'Svelte Custom Node Description.', 'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Description', 'a11yDescription.edge.default': 'Svelte Custom Edge Desc.', diff --git a/packages/react/src/components/A11yDescriptions/index.tsx b/packages/react/src/components/A11yDescriptions/index.tsx index 9e9ddd2d..eaa80945 100644 --- a/packages/react/src/components/A11yDescriptions/index.tsx +++ b/packages/react/src/components/A11yDescriptions/index.tsx @@ -2,7 +2,7 @@ import { CSSProperties } from 'react'; import { useStore } from '../../hooks/useStore'; import type { ReactFlowState } from '../../types'; -import type { a11yMessages } from '@xyflow/system'; +import type { descriptions } from '@xyflow/system'; const style: CSSProperties = { display: 'none' }; 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_LIVE_MESSAGE = 'react-flow__aria-live'; -const defaultA11yMessages: Required = { +const defaultDescriptions: Required = { 'a11yDescription.node.default': 'Press enter or space to select a node. Press delete to remove it and escape to cancel.', 'a11yDescription.node.keyboardDisabled': @@ -45,17 +45,17 @@ function AriaLiveMessage({ rfId }: { rfId: string }) { export function A11yDescriptions({ rfId, disableKeyboardA11y, - a11yMessages = {}, + descriptions = {}, }: { rfId: string; disableKeyboardA11y: boolean; - a11yMessages?: a11yMessages; + descriptions?: descriptions; }) { const nodeDesc = disableKeyboardA11y - ? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default'] - : a11yMessages['a11yDescription.node.keyboardDisabled'] || - defaultA11yMessages['a11yDescription.node.keyboardDisabled']; - const edgeDesc = a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default']; + ? descriptions['a11yDescription.node.default'] || defaultDescriptions['a11yDescription.node.default'] + : descriptions['a11yDescription.node.keyboardDisabled'] || + defaultDescriptions['a11yDescription.node.keyboardDisabled']; + const edgeDesc = descriptions['a11yDescription.edge.default'] || defaultDescriptions['a11yDescription.edge.default']; return ( <> diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx index 6d8b3bb5..c351f302 100644 --- a/packages/react/src/container/ReactFlow/index.tsx +++ b/packages/react/src/container/ReactFlow/index.tsx @@ -145,7 +145,7 @@ function ReactFlow( colorMode = 'light', debug, onScroll, - a11yMessages, + descriptions, ...rest }: ReactFlowProps, ref: ForwardedRef @@ -310,7 +310,7 @@ function ReactFlow( onSelectionChange={onSelectionChange} /> {children} - + ); diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index af1dafa9..21f69dea 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -21,7 +21,7 @@ import type { ColorMode, SnapGrid, OnReconnect, - a11yMessages, + descriptions, } from '@xyflow/system'; import type { @@ -671,5 +671,5 @@ export interface ReactFlowProps 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 { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.'; - const { store, a11yMessages = {} }: { + const { store, descriptions = {} }: { store: SvelteFlowStore; - a11yMessages?: Partial; + descriptions?: Partial; } = $props(); -const defaultA11yMessages = { +const defaultDescriptions = { 'a11yDescription.node.default': 'Press enter or space to select a node. Press delete to remove it and escape to cancel.', 'a11yDescription.node.keyboardDisabled': @@ -22,11 +22,11 @@ const defaultA11yMessages = { {#if !store.disableKeyboardA11y} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 919a345e..78b7112e 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -70,7 +70,7 @@ nodes = $bindable([]), edges = $bindable([]), viewport = $bindable(undefined), - a11yMessages, + descriptions, ...props }: SvelteFlowProps & Omit, 'onselectionchange'> = $props(); @@ -218,6 +218,6 @@ - + {@render children?.()} diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte index b1353a42..b492f0d3 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte @@ -92,6 +92,7 @@ noDragClass, noPanClass, noWheelClass, + descriptions, ...divAttributes } = $derived(rest); /* eslint-enable @typescript-eslint/no-unused-vars */ diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 85bb63df..25ae6e10 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -21,7 +21,7 @@ import type { OnReconnect, OnReconnectStart, OnReconnectEnd, - a11yMessages + descriptions } from '@xyflow/system'; import type { @@ -476,5 +476,5 @@ export type SvelteFlowProps< * Custom accessibility messages for screen readers and a11y features. * Allows localization and customization of ARIA descriptions. */ - a11yMessages?: a11yMessages; + descriptions?: descriptions; }; diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 5aff115d..fec535ef 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -314,7 +314,7 @@ export type OnBeforeDeleteBase Promise; -export type a11yMessages = { +export type descriptions = { 'a11yDescription.node.default'?: string; 'a11yDescription.node.keyboardDisabled'?: string; 'a11yDescription.edge.default'?: string;