From 406c09aeff7e6bb6c45d0b88feda0ea4994dc3f4 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 3 Jun 2025 22:08:04 +0200 Subject: [PATCH] chore(a11y): cleanup config keys --- examples/react/src/examples/A11y/index.tsx | 10 +++++----- .../svelte/src/routes/examples/a11y/+page.svelte | 10 +++++----- .../src/additional-components/Controls/Controls.tsx | 12 ++++++------ packages/react/src/components/NodeWrapper/index.tsx | 2 +- .../lib/components/NodeWrapper/NodeWrapper.svelte | 2 +- .../svelte/src/lib/plugins/Controls/Controls.svelte | 12 ++++++------ packages/system/src/constants.ts | 10 +++++----- 7 files changed, 29 insertions(+), 29 deletions(-) diff --git a/examples/react/src/examples/A11y/index.tsx b/examples/react/src/examples/A11y/index.tsx index b0e5e429..f7f0b5b2 100644 --- a/examples/react/src/examples/A11y/index.tsx +++ b/examples/react/src/examples/A11y/index.tsx @@ -47,13 +47,13 @@ const initialEdges: Edge[] = [ const ariaLabelConfig: Partial = { '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', }; diff --git a/examples/svelte/src/routes/examples/a11y/+page.svelte b/examples/svelte/src/routes/examples/a11y/+page.svelte index a4a5afd8..07f53110 100644 --- a/examples/svelte/src/routes/examples/a11y/+page.svelte +++ b/examples/svelte/src/routes/examples/a11y/+page.svelte @@ -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' }} diff --git a/packages/react/src/additional-components/Controls/Controls.tsx b/packages/react/src/additional-components/Controls/Controls.tsx index ccf9c29b..128286ee 100644 --- a/packages/react/src/additional-components/Controls/Controls.tsx +++ b/packages/react/src/additional-components/Controls/Controls.tsx @@ -81,8 +81,8 @@ function ControlsComponent({ @@ -90,8 +90,8 @@ function ControlsComponent({ @@ -102,8 +102,8 @@ function ControlsComponent({ diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index 513b5bda..82302cc7 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -145,7 +145,7 @@ export function NodeWrapper({ 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, diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 00ba3436..28909dbc 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -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 diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte index 4225bd4e..be6a1d59 100644 --- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte +++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte @@ -84,8 +84,8 @@ @@ -94,8 +94,8 @@ @@ -106,8 +106,8 @@ diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts index 3e020762..ba92d9e8 100644 --- a/packages/system/src/constants.ts +++ b/packages/system/src/constants.ts @@ -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