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

chore(a11y): add custom control labels Svelte

Browse Source
This commit is contained in:
Abbey Yacoe
2025-05-21 16:56:35 +02:00
parent 3858d3b08b
commit 6081f687bf
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,11 +29,20 @@
</script>
<SvelteFlow bind:nodes bind:edges fitView labelConfig={{
'a11yDescription.node.default': 'Svelte Custom node description',
'a11yDescription.node.keyboardDisabled': 'Svelte Custom keyboard-disabled node description',
'a11yDescription.edge.default': 'Svelte Custom edge description',
}}>
<SvelteFlow
bind:nodes
bind:edges
fitView
labelConfig={{
'a11yDescription.node.default': 'Svelte Custom Node Desc.',
'a11yDescription.node.keyboardDisabled': 'Svelte Custom Keyboard Desc.',
'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
'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',
}}
>
<Controls />
<Background />
<MiniMap />

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

@@ -46,6 +46,7 @@
);
let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
let maxZoomReached = $derived(store.viewport.zoom >= store.maxZoom);
let labelConfig = $derived(store.labelConfig);
let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
const onZoomInHandler = () => {
@@ -83,8 +84,8 @@
<ControlButton
onclick={onZoomInHandler}
class="svelte-flow__controls-zoomin"
title="zoom in"
aria-label="zoom in"
title={labelConfig['controls.zoomin.title']}
aria-label={labelConfig['controls.zoomin.title']}
disabled={maxZoomReached}
{...buttonProps}
>
@@ -93,8 +94,8 @@
<ControlButton
onclick={onZoomOutHandler}
class="svelte-flow__controls-zoomout"
title="zoom out"
aria-label="zoom out"
title={labelConfig['controls.zoomout.title']}
aria-label={labelConfig['controls.zoomout.title']}
disabled={minZoomReached}
{...buttonProps}
>
@@ -105,8 +106,8 @@
<ControlButton
class="svelte-flow__controls-fitview"
onclick={onFitViewHandler}
title="fit view"
aria-label="fit view"
title={labelConfig['controls.fitview.title']}
aria-label={labelConfig['controls.fitview.title']}
{...buttonProps}
>
<FitViewIcon />
@@ -116,8 +117,8 @@
<ControlButton
class="svelte-flow__controls-interactive"
onclick={onToggleInteractivity}
title="toggle interactivity"
aria-label="toggle interactivity"
title={labelConfig['controls.interactive.title']}
aria-label={labelConfig['controls.interactive.title']}
{...buttonProps}
>
{#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}