From b82bbaa2dd18fdec5e8a51527bc82f4031f4f6b3 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.com>
Date: Thu, 8 Oct 2026 17:42:11 +0200
Subject: [PATCH] fix(ui): drop the switch label tab stop with no focus ring
 (#3297)

---
 .../ui/components/form/FormSwitch.module.css  |  3 ---
 .../ui/components/form/FormSwitch.tsx         | 20 ++++++-------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/fluxer_app/src/features/ui/components/form/FormSwitch.module.css b/fluxer_app/src/features/ui/components/form/FormSwitch.module.css
index 7ee6e799d..3d123f01c 100644
--- a/fluxer_app/src/features/ui/components/form/FormSwitch.module.css
+++ b/fluxer_app/src/features/ui/components/form/FormSwitch.module.css
@@ -22,9 +22,6 @@
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 0.25rem;
-	border: 0;
-	background: transparent;
-	padding: 0;
 	text-align: left;
 }
 
diff --git a/fluxer_app/src/features/ui/components/form/FormSwitch.tsx b/fluxer_app/src/features/ui/components/form/FormSwitch.tsx
index 6df590c00..9bf119d47 100644
--- a/fluxer_app/src/features/ui/components/form/FormSwitch.tsx
+++ b/fluxer_app/src/features/ui/components/form/FormSwitch.tsx
@@ -29,6 +29,7 @@ export const Switch = observer(
 		const baseId = useId();
 		const labelId = useMemo(() => `${baseId}-switch-label`, [baseId]);
 		const descriptionId = useMemo(() => `${baseId}-switch-description`, [baseId]);
+		const switchId = useMemo(() => `${baseId}-switch`, [baseId]);
 		const hasLabel = useMemo(
 			() => label !== undefined && label !== null && !(typeof label === 'string' && label.trim().length === 0),
 			[label],
@@ -50,11 +51,6 @@ export const Switch = observer(
 			},
 			[disabled, onChange],
 		);
-		const handleLabelToggle = useCallback(() => {
-			if (disabled) return;
-			onChange(!value);
-			rootRef.current?.focus();
-		}, [disabled, onChange, value]);
 		return (
 			<div
 				ref={forwardedRef}
@@ -62,15 +58,10 @@ export const Switch = observer(
 				data-flx="ui.form.switch.container"
 			>
 				{(hasLabel || hasDescription) && (
-					<button
-						type="button"
+					<label
+						htmlFor={switchId}
 						className={clsx(styles.labelContainer, !disabled && styles.clickable)}
-						disabled={disabled}
-						onClick={handleLabelToggle}
-						aria-pressed={value}
-						aria-labelledby={hasLabel ? labelId : undefined}
-						aria-describedby={hasDescription ? descriptionId : undefined}
-						data-flx="ui.form.switch.label-container.label-toggle"
+						data-flx="ui.form.switch.label-container"
 					>
 						{hasLabel && (
 							<span
@@ -86,11 +77,12 @@ export const Switch = observer(
 								{description}
 							</span>
 						)}
-					</button>
+					</label>
 				)}
 				<FocusRing focusTarget={rootRef} ringTarget={rootRef} offset={-2} data-flx="ui.form.switch.focus-ring">
 					<SwitchPrimitive.Root
 						ref={rootRef}
+						id={switchId}
 						checked={value}
 						onCheckedChange={valueChange}
 						disabled={disabled}