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

chore(a11y): pass LabelConfig values through store SvelteFlow

Browse Source
This commit is contained in:
Abbey Yacoe
2025-05-21 14:03:50 +02:00
parent 54fc3c0717
commit 91ecfe73cc
9 changed files with 58 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+9 -19
View File
@@ -1,32 +1,22 @@
<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
import { derived } from 'svelte/store';
import type { SvelteFlowStore } from '$lib/store/types';
import type { descriptions as DescriptionsType } from '@xyflow/system'; // Rename the imported type
import type { Node, Edge } from '$lib/types';
import type { Node, Edge } from '$lib/types';
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.';
const { store, descriptions = {} }: {
store: SvelteFlowStore<NodeType, EdgeType>;
descriptions?: Partial<DescriptionsType>;
} = $props();
let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
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':
'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.',
};
</script>
<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
{store.disableKeyboardA11y
? descriptions['a11yDescription.node.default'] || defaultDescriptions['a11yDescription.node.default']
: descriptions['a11yDescription.node.keyboardDisabled'] || defaultDescriptions['a11yDescription.node.keyboardDisabled']}
{store.disableKeyboardA11y
? store.labelConfig['a11yDescription.node.default']
: store.labelConfig['a11yDescription.node.keyboardDisabled']}
</div>
<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
{descriptions['a11yDescription.edge.default'] || defaultDescriptions['a11yDescription.edge.default']}
{store.labelConfig['a11yDescription.edge.default']}
</div>
{#if !store.disableKeyboardA11y}
@@ -38,4 +28,4 @@ const defaultDescriptions = {
>
{store.ariaLiveMessage}
</div>
{/if}
{/if}