chore(a11y): rename props, fix linting error
This commit is contained in:
@@ -1,16 +1,16 @@
|
||||
<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
|
||||
import type { SvelteFlowStore } from '$lib/store/types';
|
||||
import type { a11yMessages } from '@xyflow/system';
|
||||
import type { descriptions as DescriptionsType } from '@xyflow/system'; // Rename the imported type
|
||||
import type { Node, Edge } from '$lib/types';
|
||||
import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '.';
|
||||
|
||||
const { store, a11yMessages = {} }: {
|
||||
const { store, descriptions = {} }: {
|
||||
store: SvelteFlowStore<NodeType, EdgeType>;
|
||||
a11yMessages?: Partial<a11yMessages>;
|
||||
descriptions?: Partial<DescriptionsType>;
|
||||
} = $props();
|
||||
|
||||
|
||||
const defaultA11yMessages = {
|
||||
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':
|
||||
@@ -22,11 +22,11 @@ const defaultA11yMessages = {
|
||||
|
||||
<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
|
||||
{store.disableKeyboardA11y
|
||||
? a11yMessages['a11yDescription.node.default'] || defaultA11yMessages['a11yDescription.node.default']
|
||||
: a11yMessages['a11yDescription.node.keyboardDisabled'] || defaultA11yMessages['a11yDescription.node.keyboardDisabled']}
|
||||
? descriptions['a11yDescription.node.default'] || defaultDescriptions['a11yDescription.node.default']
|
||||
: descriptions['a11yDescription.node.keyboardDisabled'] || defaultDescriptions['a11yDescription.node.keyboardDisabled']}
|
||||
</div>
|
||||
<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
|
||||
{a11yMessages['a11yDescription.edge.default'] || defaultA11yMessages['a11yDescription.edge.default']}
|
||||
{descriptions['a11yDescription.edge.default'] || defaultDescriptions['a11yDescription.edge.default']}
|
||||
</div>
|
||||
|
||||
{#if !store.disableKeyboardA11y}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
nodes = $bindable([]),
|
||||
edges = $bindable([]),
|
||||
viewport = $bindable(undefined),
|
||||
a11yMessages,
|
||||
descriptions,
|
||||
...props
|
||||
}: SvelteFlowProps<NodeType, EdgeType> &
|
||||
Omit<HTMLAttributes<HTMLDivElement>, 'onselectionchange'> = $props();
|
||||
@@ -218,6 +218,6 @@
|
||||
</Pane>
|
||||
</Zoom>
|
||||
<Attribution {proOptions} position={attributionPosition} />
|
||||
<A11yDescriptions {store} a11yMessages={a11yMessages} />
|
||||
<A11yDescriptions {store} descriptions={descriptions} />
|
||||
{@render children?.()}
|
||||
</Wrapper>
|
||||
|
||||
@@ -92,6 +92,7 @@
|
||||
noDragClass,
|
||||
noPanClass,
|
||||
noWheelClass,
|
||||
descriptions,
|
||||
...divAttributes
|
||||
} = $derived(rest);
|
||||
/* eslint-enable @typescript-eslint/no-unused-vars */
|
||||
|
||||
@@ -21,7 +21,7 @@ import type {
|
||||
OnReconnect,
|
||||
OnReconnectStart,
|
||||
OnReconnectEnd,
|
||||
a11yMessages
|
||||
descriptions
|
||||
} from '@xyflow/system';
|
||||
|
||||
import type {
|
||||
@@ -476,5 +476,5 @@ export type SvelteFlowProps<
|
||||
* Custom accessibility messages for screen readers and a11y features.
|
||||
* Allows localization and customization of ARIA descriptions.
|
||||
*/
|
||||
a11yMessages?: a11yMessages;
|
||||
descriptions?: descriptions;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user