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

chore(a11y): cleanup config keys

Browse Source
This commit is contained in:
moklick
2025-06-03 22:08:04 +02:00
parent 691dd7bf77
commit 406c09aeff
7 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/react/src/examples/A11y/index.tsx
View File

@@ -47,13 +47,13 @@ const initialEdges: Edge[] = [
const ariaLabelConfig: Partial<AriaLabelConfig> = { const ariaLabelConfig: Partial<AriaLabelConfig> = {
'node.a11yDescription.default': 'Custom Node Desc.', 'node.a11yDescription.default': 'Custom Node Desc.',
'node.a11yDescription.keyboardDisabled': 'Custom Keyboard Desc.', 'node.a11yDescription.keyboardDisabled': 'Custom Keyboard Desc.',
'edge.a11yDescription.default': 'Custom Edge Desc.', 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
'a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
`Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`, `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
'edge.a11yDescription.default': 'Custom Edge Desc.',
'controls.ariaLabel': 'Custom Controls Aria Label', 'controls.ariaLabel': 'Custom Controls Aria Label',
'controls.zoomin.ariaLabel': 'Custom Zoom in', 'controls.zoomIn.ariaLabel': 'Custom Zoom in',
'controls.zoomout.ariaLabel': 'Custom Zoom Out', 'controls.zoomOut.ariaLabel': 'Custom Zoom Out',
// 'controls.fitview.ariaLabel': 'Custom Fit View', 'controls.fitView.ariaLabel': 'Custom Fit View',
'controls.interactive.ariaLabel': 'Custom Toggle Interactivity', 'controls.interactive.ariaLabel': 'Custom Toggle Interactivity',
'minimap.ariaLabel': 'Custom Aria Label', 'minimap.ariaLabel': 'Custom Aria Label',
}; };

10
examples/svelte/src/routes/examples/a11y/+page.svelte
View File

@@ -28,13 +28,13 @@
ariaLabelConfig={{ ariaLabelConfig={{
'node.a11yDescription.default': 'Svelte Custom Node Desc.', 'node.a11yDescription.default': 'Svelte Custom Node Desc.',
'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.', 'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
'edge.a11yDescription.default': 'Svelte Custom Edge Desc.', 'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
'a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
`Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`, `Custom Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
'edge.a11yDescription.default': 'Svelte Custom Edge Desc.',
'controls.ariaLabel': 'Svelte Custom Control Aria Label', 'controls.ariaLabel': 'Svelte Custom Control Aria Label',
'controls.zoomin.ariaLabel': 'Svelte Custom Zoom in', 'controls.zoomIn.ariaLabel': 'Svelte Custom Zoom in',
'controls.zoomout.ariaLabel': 'Svelte Custom Zoom Out', 'controls.zoomOut.ariaLabel': 'Svelte Custom Zoom Out',
// 'controls.fitview.ariaLabel': 'Svelte Custom Fit View', // 'controls.fitView.ariaLabel': 'Svelte Custom Fit View',
'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity', 'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity',
'minimap.ariaLabel': 'Svelte Custom Minimap' 'minimap.ariaLabel': 'Svelte Custom Minimap'
}} }}

12
packages/react/src/additional-components/Controls/Controls.tsx
View File

@@ -81,8 +81,8 @@ function ControlsComponent({
<ControlButton <ControlButton
onClick={onZoomInHandler} onClick={onZoomInHandler}
className="react-flow__controls-zoomin" className="react-flow__controls-zoomin"
title={ariaLabelConfig['controls.zoomin.ariaLabel']} title={ariaLabelConfig['controls.zoomIn.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomin.ariaLabel']} aria-label={ariaLabelConfig['controls.zoomIn.ariaLabel']}
disabled={maxZoomReached} disabled={maxZoomReached}
> >
<PlusIcon /> <PlusIcon />
@@ -90,8 +90,8 @@ function ControlsComponent({
<ControlButton <ControlButton
onClick={onZoomOutHandler} onClick={onZoomOutHandler}
className="react-flow__controls-zoomout" className="react-flow__controls-zoomout"
title={ariaLabelConfig['controls.zoomout.ariaLabel']} title={ariaLabelConfig['controls.zoomOut.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomout.ariaLabel']} aria-label={ariaLabelConfig['controls.zoomOut.ariaLabel']}
disabled={minZoomReached} disabled={minZoomReached}
> >
<MinusIcon /> <MinusIcon />
@@ -102,8 +102,8 @@ function ControlsComponent({
<ControlButton <ControlButton
className="react-flow__controls-fitview" className="react-flow__controls-fitview"
onClick={onFitViewHandler} onClick={onFitViewHandler}
title={ariaLabelConfig['controls.fitview.ariaLabel']} title={ariaLabelConfig['controls.fitView.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitview.ariaLabel']} aria-label={ariaLabelConfig['controls.fitView.ariaLabel']}
> >
<FitViewIcon /> <FitViewIcon />
</ControlButton> </ControlButton>

2
packages/react/src/components/NodeWrapper/index.tsx
View File

@@ -145,7 +145,7 @@ export function NodeWrapper<NodeType extends Node>({
const { ariaLabelConfig } = store.getState(); const { ariaLabelConfig } = store.getState();
store.setState({ store.setState({
ariaLiveMessage: ariaLabelConfig['a11yDescription.ariaLiveMessage']({ ariaLiveMessage: ariaLabelConfig['node.a11yDescription.ariaLiveMessage']({
direction: event.key.replace('Arrow', '').toLowerCase(), direction: event.key.replace('Arrow', '').toLowerCase(),
x: ~~internals.positionAbsolute.x, x: ~~internals.positionAbsolute.x,
y: ~~internals.positionAbsolute.y, y: ~~internals.positionAbsolute.y,

2
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -189,7 +189,7 @@
) { ) {
// prevent default scrolling behavior on arrow key press when node is moved // prevent default scrolling behavior on arrow key press when node is moved
event.preventDefault(); event.preventDefault();
store.ariaLiveMessage = ariaLabelConfig['a11yDescription.ariaLiveMessage']({ store.ariaLiveMessage = ariaLabelConfig['node.a11yDescription.ariaLiveMessage']({
direction: event.key.replace('Arrow', '').toLowerCase(), direction: event.key.replace('Arrow', '').toLowerCase(),
x: ~~node.internals.positionAbsolute.x, x: ~~node.internals.positionAbsolute.x,
y: ~~node.internals.positionAbsolute.y y: ~~node.internals.positionAbsolute.y

12
packages/svelte/src/lib/plugins/Controls/Controls.svelte
View File

@@ -84,8 +84,8 @@
<ControlButton <ControlButton
onclick={onZoomInHandler} onclick={onZoomInHandler}
class="svelte-flow__controls-zoomin" class="svelte-flow__controls-zoomin"
title={ariaLabelConfig['controls.zoomin.ariaLabel']} title={ariaLabelConfig['controls.zoomIn.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomin.ariaLabel']} aria-label={ariaLabelConfig['controls.zoomIn.ariaLabel']}
disabled={maxZoomReached} disabled={maxZoomReached}
{...buttonProps} {...buttonProps}
> >
@@ -94,8 +94,8 @@
<ControlButton <ControlButton
onclick={onZoomOutHandler} onclick={onZoomOutHandler}
class="svelte-flow__controls-zoomout" class="svelte-flow__controls-zoomout"
title={ariaLabelConfig['controls.zoomout.ariaLabel']} title={ariaLabelConfig['controls.zoomOut.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomout.ariaLabel']} aria-label={ariaLabelConfig['controls.zoomOut.ariaLabel']}
disabled={minZoomReached} disabled={minZoomReached}
{...buttonProps} {...buttonProps}
> >
@@ -106,8 +106,8 @@
<ControlButton <ControlButton
class="svelte-flow__controls-fitview" class="svelte-flow__controls-fitview"
onclick={onFitViewHandler} onclick={onFitViewHandler}
title={ariaLabelConfig['controls.fitview.ariaLabel']} title={ariaLabelConfig['controls.fitView.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitview.ariaLabel']} aria-label={ariaLabelConfig['controls.fitView.ariaLabel']}
{...buttonProps} {...buttonProps}
> >
<FitViewIcon /> <FitViewIcon />

10
packages/system/src/constants.ts
View File

@@ -42,16 +42,16 @@ export const defaultAriaLabelConfig = {
'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.',
'node.a11yDescription.keyboardDisabled': 'node.a11yDescription.keyboardDisabled':
'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.', '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.',
'node.a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) =>
`Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
'edge.a11yDescription.default': 'edge.a11yDescription.default':
'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.', 'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
'a11yDescription.ariaLiveMessage': ({ direction, x, y }: { direction: string; x: number; y: number }) =>
`Moved selected node ${direction}. New position, x: ${x}, y: ${y}`,
// Control elements // Control elements
'controls.ariaLabel': 'Control Panel', 'controls.ariaLabel': 'Control Panel',
'controls.zoomin.ariaLabel': 'Zoom In', 'controls.zoomIn.ariaLabel': 'Zoom In',
'controls.zoomout.ariaLabel': 'Zoom Out', 'controls.zoomOut.ariaLabel': 'Zoom Out',
'controls.fitview.ariaLabel': 'Fit View', 'controls.fitView.ariaLabel': 'Fit View',
'controls.interactive.ariaLabel': 'Toggle Interactivity', 'controls.interactive.ariaLabel': 'Toggle Interactivity',
// Mini map // Mini map