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> = {
'node.a11yDescription.default': 'Custom Node Desc.',
'node.a11yDescription.keyboardDisabled': 'Custom Keyboard Desc.',
'edge.a11yDescription.default': 'Custom Edge Desc.',
'a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
'node.a11yDescription.ariaLiveMessage': ({ direction, x, 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.zoomin.ariaLabel': 'Custom Zoom in',
'controls.zoomout.ariaLabel': 'Custom Zoom Out',
// 'controls.fitview.ariaLabel': 'Custom Fit View',
'controls.zoomIn.ariaLabel': 'Custom Zoom in',
'controls.zoomOut.ariaLabel': 'Custom Zoom Out',
'controls.fitView.ariaLabel': 'Custom Fit View',
'controls.interactive.ariaLabel': 'Custom Toggle Interactivity',
'minimap.ariaLabel': 'Custom Aria Label',
};

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

@@ -28,13 +28,13 @@
ariaLabelConfig={{
'node.a11yDescription.default': 'Svelte Custom Node Desc.',
'node.a11yDescription.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
'edge.a11yDescription.default': 'Svelte Custom Edge Desc.',
'a11yDescription.ariaLiveMessage': ({ direction, x, y }) =>
'node.a11yDescription.ariaLiveMessage': ({ direction, x, 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.zoomin.ariaLabel': 'Svelte Custom Zoom in',
'controls.zoomout.ariaLabel': 'Svelte Custom Zoom Out',
// 'controls.fitview.ariaLabel': 'Svelte Custom Fit View',
'controls.zoomIn.ariaLabel': 'Svelte Custom Zoom in',
'controls.zoomOut.ariaLabel': 'Svelte Custom Zoom Out',
// 'controls.fitView.ariaLabel': 'Svelte Custom Fit View',
'controls.interactive.ariaLabel': 'Svelte Custom Toggle Interactivity',
'minimap.ariaLabel': 'Svelte Custom Minimap'
}}

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

@@ -81,8 +81,8 @@ function ControlsComponent({
<ControlButton
onClick={onZoomInHandler}
className="react-flow__controls-zoomin"
title={ariaLabelConfig['controls.zoomin.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomin.ariaLabel']}
title={ariaLabelConfig['controls.zoomIn.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomIn.ariaLabel']}
disabled={maxZoomReached}
>
<PlusIcon />
@@ -90,8 +90,8 @@ function ControlsComponent({
<ControlButton
onClick={onZoomOutHandler}
className="react-flow__controls-zoomout"
title={ariaLabelConfig['controls.zoomout.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomout.ariaLabel']}
title={ariaLabelConfig['controls.zoomOut.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomOut.ariaLabel']}
disabled={minZoomReached}
>
<MinusIcon />
@@ -102,8 +102,8 @@ function ControlsComponent({
<ControlButton
className="react-flow__controls-fitview"
onClick={onFitViewHandler}
title={ariaLabelConfig['controls.fitview.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitview.ariaLabel']}
title={ariaLabelConfig['controls.fitView.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitView.ariaLabel']}
>
<FitViewIcon />
</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();
store.setState({
ariaLiveMessage: ariaLabelConfig['a11yDescription.ariaLiveMessage']({
ariaLiveMessage: ariaLabelConfig['node.a11yDescription.ariaLiveMessage']({
direction: event.key.replace('Arrow', '').toLowerCase(),
x: ~~internals.positionAbsolute.x,
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
event.preventDefault();
store.ariaLiveMessage = ariaLabelConfig['a11yDescription.ariaLiveMessage']({
store.ariaLiveMessage = ariaLabelConfig['node.a11yDescription.ariaLiveMessage']({
direction: event.key.replace('Arrow', '').toLowerCase(),
x: ~~node.internals.positionAbsolute.x,
y: ~~node.internals.positionAbsolute.y

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

@@ -84,8 +84,8 @@
<ControlButton
onclick={onZoomInHandler}
class="svelte-flow__controls-zoomin"
title={ariaLabelConfig['controls.zoomin.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomin.ariaLabel']}
title={ariaLabelConfig['controls.zoomIn.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomIn.ariaLabel']}
disabled={maxZoomReached}
{...buttonProps}
>
@@ -94,8 +94,8 @@
<ControlButton
onclick={onZoomOutHandler}
class="svelte-flow__controls-zoomout"
title={ariaLabelConfig['controls.zoomout.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomout.ariaLabel']}
title={ariaLabelConfig['controls.zoomOut.ariaLabel']}
aria-label={ariaLabelConfig['controls.zoomOut.ariaLabel']}
disabled={minZoomReached}
{...buttonProps}
>
@@ -106,8 +106,8 @@
<ControlButton
class="svelte-flow__controls-fitview"
onclick={onFitViewHandler}
title={ariaLabelConfig['controls.fitview.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitview.ariaLabel']}
title={ariaLabelConfig['controls.fitView.ariaLabel']}
aria-label={ariaLabelConfig['controls.fitView.ariaLabel']}
{...buttonProps}
>
<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.',
'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.',
'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':
'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
'controls.ariaLabel': 'Control Panel',
'controls.zoomin.ariaLabel': 'Zoom In',
'controls.zoomout.ariaLabel': 'Zoom Out',
'controls.fitview.ariaLabel': 'Fit View',
'controls.zoomIn.ariaLabel': 'Zoom In',
'controls.zoomOut.ariaLabel': 'Zoom Out',
'controls.fitView.ariaLabel': 'Fit View',
'controls.interactive.ariaLabel': 'Toggle Interactivity',
// Mini map