From 6543ddc31c07c6e9d5a7e3affd42cf8618800182 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 3 Jun 2025 13:36:16 +0200 Subject: [PATCH] chore(labelconfig): cleanup --- examples/react/src/examples/A11y/index.tsx | 29 ++++++------ .../src/routes/examples/a11y/+page.svelte | 46 ++++++++----------- .../Controls/Controls.tsx | 3 +- .../additional-components/MiniMap/MiniMap.tsx | 4 +- .../src/components/NodeWrapper/index.tsx | 10 ++-- packages/react/src/index.ts | 1 + .../A11yDescriptions/A11yDescriptions.svelte | 9 ++-- .../components/NodeWrapper/NodeWrapper.svelte | 11 ++--- .../src/lib/container/SvelteFlow/types.ts | 2 +- packages/svelte/src/lib/index.ts | 3 +- packages/system/src/constants.ts | 6 +-- 11 files changed, 59 insertions(+), 65 deletions(-) diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx index 0c921798..cafa3d7f 100644 --- a/examples/react/src/examples/A11y/index.tsx +++ b/examples/react/src/examples/A11y/index.tsx @@ -9,6 +9,7 @@ import { Node, Edge, OnNodeDrag, + LabelConfig, } from '@xyflow/react'; const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes); @@ -43,6 +44,20 @@ const initialEdges: Edge[] = [ { id: 'e1-3', source: '1', target: '3' }, ]; +const labelConfig: Partial = { + 'a11yDescription.node.default': 'Custom Node Desc.', + 'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.', + 'a11yDescription.edge.default': 'Custom Edge Desc.', + 'a11yDescription.ariaLiveMessage': ({ direction, x, y }) => + `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`, + 'controls.ariaLabel': 'Custom Controls Aria Label', + 'controls.zoomin.title': 'Custom Zoom in', + 'controls.zoomout.title': 'Custom Zoom Out', + // 'controls.fitview.title': 'Custom Fit View', + 'controls.interactive.title': 'Custom Toggle Interactivity', + 'minimap.ariaLabel': 'Custom Aria Label', +}; + const A11y = () => { return ( { elevateEdgesOnSelect elevateNodesOnSelect={false} nodeDragThreshold={0} - labelConfig={{ - 'a11yDescription.node.default': 'Custom Node Desc.', - 'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.', - 'a11yDescription.edge.default': 'Custom Edge Desc.', - 'a11yDescription.ariaLiveMessage': (node: string, x: number, y: number) => - `Custom Moved selected node ${node}. New position, x: ${x}, y: ${y}`, - 'controls.ariaLabel': 'Custom Controls Aria Label', - 'controls.zoomin.title': 'Custom Zoom in', - 'controls.zoomout.title': 'Custom Zoom Out', - // 'controls.fitview.title': 'Custom Fit View', - 'controls.interactive.title': 'Custom Toggle Interactivity', - 'minimap.ariaLabel': 'Custom Aria Label', - }} + labelConfig={labelConfig} > diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte index 171576db..98f0bc23 100644 --- a/examples/svelte/src/routes/examples/a11y/+page.svelte +++ b/examples/svelte/src/routes/examples/a11y/+page.svelte @@ -1,24 +1,17 @@ - - `Custom Moved selected node ${node}. New position, x: ${x}, y: ${y}`, - 'controls.ariaLabel': 'Svelte Custom Control Aria Label', - 'controls.zoomin.title': 'Svelte Custom Zoom in', - 'controls.zoomout.title': 'Svelte Custom Zoom Out', - // 'controls.fitview.title': 'Svelte Custom Fit View', - 'controls.interactive.title': 'Svelte Custom Toggle Interactivity', - 'minimap.ariaLabel': 'Svelte Custom Minimap', + 'a11yDescription.node.default': 'Svelte Custom Node Desc.', + 'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Desc.', + 'a11yDescription.edge.default': 'Svelte Custom Edge Desc.', + 'a11yDescription.ariaLiveMessage': ({ direction, x, y }) => + `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`, + 'controls.ariaLabel': 'Svelte Custom Control Aria Label', + 'controls.zoomin.title': 'Svelte Custom Zoom in', + 'controls.zoomout.title': 'Svelte Custom Zoom Out', + // 'controls.fitview.title': 'Svelte Custom Fit View', + 'controls.interactive.title': 'Svelte Custom Toggle Interactivity', + 'minimap.ariaLabel': 'Svelte Custom Minimap' }} > diff --git a/packages/react/src/additional-components/Controls/Controls.tsx b/packages/react/src/additional-components/Controls/Controls.tsx index e6388e66..d92cff99 100644 --- a/packages/react/src/additional-components/Controls/Controls.tsx +++ b/packages/react/src/additional-components/Controls/Controls.tsx @@ -41,7 +41,6 @@ function ControlsComponent({ const store = useStoreApi(); const { isInteractive, minZoomReached, maxZoomReached, labelConfig } = useStore(selector, shallow); const { zoomIn, zoomOut, fitView } = useReactFlow(); - const effectiveAriaLabel = ariaLabel ?? labelConfig['controls.ariaLabel']; const onZoomInHandler = () => { zoomIn(); @@ -75,7 +74,7 @@ function ControlsComponent({ position={position} style={style} data-testid="rf__controls" - aria-label={effectiveAriaLabel} + aria-label={ariaLabel ?? labelConfig['controls.ariaLabel']} > {showZoom && ( <> diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx index c48207ca..f23ff60f 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -133,7 +133,7 @@ function MiniMapComponent({ }, []) : undefined; - const effectiveAriaLabel = ariaLabel ?? labelConfig['minimap.ariaLabel']; + const _ariaLabel = ariaLabel ?? labelConfig['minimap.ariaLabel']; return ( ({ ref={svg} onClick={onSvgClick} > - {effectiveAriaLabel && {effectiveAriaLabel}} + {_ariaLabel && {_ariaLabel}} onClick={onSvgNodeClick} diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index af067adc..d53ef414 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -144,11 +144,11 @@ export function NodeWrapper({ event.preventDefault(); store.setState({ - ariaLiveMessage: labelConfig['a11yDescription.ariaLiveMessage']( - event.key.replace('Arrow', '').toLowerCase(), - ~~internals.positionAbsolute.x, - ~~internals.positionAbsolute.y - ), + ariaLiveMessage: labelConfig['a11yDescription.ariaLiveMessage']({ + direction: event.key.replace('Arrow', '').toLowerCase(), + x: ~~internals.positionAbsolute.x, + y: ~~internals.positionAbsolute.y, + }), }); moveSelectedNodes({ diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 3397a677..f27dcd4a 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -108,6 +108,7 @@ export { type NoConnection, type NodeConnection, type OnReconnect, + type LabelConfig, } from '@xyflow/system'; // we need this workaround to prevent a duplicate identifier error diff --git a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte index 875d7f83..dcfbf93f 100644 --- a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte +++ b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte @@ -1,5 +1,4 @@
- {store.disableKeyboardA11y - ? store.labelConfig['a11yDescription.node.default'] - : store.labelConfig['a11yDescription.node.keyboardDisabled']} + {store.disableKeyboardA11y + ? store.labelConfig['a11yDescription.node.default'] + : store.labelConfig['a11yDescription.node.keyboardDisabled']}
- {store.labelConfig['a11yDescription.edge.default']} + {store.labelConfig['a11yDescription.edge.default']}
{#if !store.disableKeyboardA11y} diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 5fd55e72..b7c33ae0 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -189,12 +189,11 @@ ) { // prevent default scrolling behavior on arrow key press when node is moved event.preventDefault(); - store.ariaLiveMessage = labelConfig['a11yDescription.ariaLiveMessage']( - event.key.replace('Arrow', '').toLowerCase(), - ~~node.internals.positionAbsolute.x, - ~~node.internals.positionAbsolute.y - ), - + store.ariaLiveMessage = labelConfig['a11yDescription.ariaLiveMessage']({ + direction: event.key.replace('Arrow', '').toLowerCase(), + x: ~~node.internals.positionAbsolute.x, + y: ~~node.internals.positionAbsolute.y + }); store.moveSelectedNodes(arrowKeyDiffs[event.key], event.shiftKey ? 4 : 1); } } diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 03259006..331bee8d 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -476,5 +476,5 @@ export type SvelteFlowProps< * Configuration for customizable labels, descriptions, and UI text. Provided keys will override the corresponding defaults. * Allows localization, customization of ARIA descriptions, control labels, minimap labels, and other UI strings. */ - labelConfig?: LabelConfig; + labelConfig?: Partial; }; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 095c8b87..57f0c86e 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -112,7 +112,8 @@ export { type ResizeParamsWithDirection, type ResizeDragEvent, type IsValidConnection, - type NodeConnection + type NodeConnection, + type LabelConfig } from '@xyflow/system'; // system utils diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts index cce76df7..a82d952e 100644 --- a/packages/system/src/constants.ts +++ b/packages/system/src/constants.ts @@ -44,8 +44,8 @@ export const defaultLabelConfig = { 'Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.', 'a11yDescription.edge.default': 'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.', - 'a11yDescription.ariaLiveMessage': (node: string, x: number, y: number) => - `Moved selected node ${node}. New position, x: ${x}, y: ${y}`, + 'a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) => + `Moved selected node ${direction}. New position, x: ${x}, y: ${y}`, // Control elements 'controls.ariaLabel': 'Control Panel', @@ -61,4 +61,4 @@ export const defaultLabelConfig = { 'handle.ariaLabel': 'Handle', }; -export type LabelConfig = Required; +export type LabelConfig = typeof defaultLabelConfig;