From 679f8a94634acdbc0767b633b5fb29ee4da09506 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Mon, 2 Jun 2025 14:39:14 +0200
Subject: [PATCH] chore: add handle aria-label

---
 packages/svelte/src/lib/components/Handle/Handle.svelte | 3 +++
 packages/system/src/constants.ts                        | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index fbc0ea6e..055012bb 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -44,6 +44,8 @@
   );
 
   let store = useStore();
+  let labelConfig = $derived(store.labelConfig);
+
 
   let prevConnections: Map<string, HandleConnection> | null = null;
   $effect.pre(() => {
@@ -227,6 +229,7 @@ The Handle component is the part of a node that can be used to connect nodes.
   onkeypress={() => {}}
   {style}
   role="button"
+  aria-label={labelConfig[`handle.ariaLabel`]}
   tabindex="-1"
   {...rest}
 >
diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts
index 8bbdd005..cce76df7 100644
--- a/packages/system/src/constants.ts
+++ b/packages/system/src/constants.ts
@@ -56,6 +56,9 @@ export const defaultLabelConfig = {
 
   // Mini map
   'minimap.ariaLabel': 'Mini Map',
+
+  // Handle
+  'handle.ariaLabel': 'Handle',
 };
 
 export type LabelConfig = Required<typeof defaultLabelConfig>;