diff --git a/src/lib/components/AddConnectionModal.svelte b/src/lib/components/AddConnectionModal.svelte
index ba46cd275d..53422f87a3 100644
--- a/src/lib/components/AddConnectionModal.svelte
+++ b/src/lib/components/AddConnectionModal.svelte
@@ -296,8 +296,11 @@
 							</Tooltip>
 
 							<div class="flex flex-col shrink-0 self-end">
+								<label class="sr-only" for="toggle-connection"
+									>{$i18n.t('Toggle whether current connection is active.')}</label
+								>
 								<Tooltip content={enable ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
-									<Switch bind:state={enable} />
+									<Switch id="toggle-connection" bind:state={enable} />
 								</Tooltip>
 							</div>
 						</div>
diff --git a/src/lib/components/common/Switch.svelte b/src/lib/components/common/Switch.svelte
index d19b160f4f..0923e64f55 100644
--- a/src/lib/components/common/Switch.svelte
+++ b/src/lib/components/common/Switch.svelte
@@ -2,6 +2,7 @@
 	import { createEventDispatcher, tick } from 'svelte';
 	import { Switch } from 'bits-ui';
 	export let state = true;
+	export let id = '';
 
 	const dispatch = createEventDispatcher();
 
@@ -10,6 +11,7 @@
 
 <Switch.Root
 	bind:checked={state}
+	{id}
 	class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] mx-[1px] transition  {state
 		? ' bg-emerald-600'
 		: 'bg-gray-200 dark:bg-transparent'} outline outline-1 outline-gray-100 dark:outline-gray-800"