From 33e4c5f514d57ca8f654c1015dfb32774b833db6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 21 Oct 2026 09:47:21 +0900
Subject: [PATCH] refac

---
 .../admin/Settings/AdminSettingRow.svelte        | 10 +++++++---
 .../admin/Settings/Authentication.svelte         | 13 ++++++++++---
 src/lib/components/chat/Settings/Audio.svelte    |  7 ++++++-
 .../chat/Settings/Personalization.svelte         |  2 ++
 .../chat/Settings/UserSettingRow.svelte          | 16 ++++++++++++----
 src/lib/components/common/Switch.svelte          |  2 +-
 6 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/admin/Settings/AdminSettingRow.svelte b/src/lib/components/admin/Settings/AdminSettingRow.svelte
index 530a92bcf9..6290e5ef6a 100644
--- a/src/lib/components/admin/Settings/AdminSettingRow.svelte
+++ b/src/lib/components/admin/Settings/AdminSettingRow.svelte
@@ -9,10 +9,14 @@
 	const labelId = `admin-setting-${uuidv4()}`;
 </script>
 
-<div class="flex items-center justify-between gap-4 {className}">
-	<div id={labelId} class="min-w-0 text-xs text-gray-600 dark:text-gray-400 {labelClassName}">
+<div class="group/setting-row flex items-center justify-between gap-4 {className}">
+	<label
+		for={`${labelId}-control`}
+		id={labelId}
+		class="min-w-0 text-xs text-gray-600 group-has-[[role=switch]:enabled]/setting-row:cursor-pointer group-has-[[role=switch]:disabled]/setting-row:cursor-not-allowed transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:text-gray-400 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white {labelClassName}"
+	>
 		<slot name="label">{label}</slot>
-	</div>
+	</label>
 
 	<div class="min-w-0">
 		<slot {labelId} />
diff --git a/src/lib/components/admin/Settings/Authentication.svelte b/src/lib/components/admin/Settings/Authentication.svelte
index 5461078a60..0e245dbf01 100644
--- a/src/lib/components/admin/Settings/Authentication.svelte
+++ b/src/lib/components/admin/Settings/Authentication.svelte
@@ -263,8 +263,9 @@
 			</AdminSettingSection>
 
 			<AdminSettingSection title={$i18n.t('Multi-factor authentication')}>
-				<AdminSettingRow label={$i18n.t('Require an authenticator for all users')}>
+				<AdminSettingRow let:labelId label={$i18n.t('Require an authenticator for all users')}>
 					<Switch
+						ariaLabelledbyId={labelId}
 						bind:state={adminConfig.ENABLE_MFA}
 						ariaLabel={$i18n.t('Require an authenticator for all users')}
 					/>
@@ -273,14 +274,20 @@
 					{$i18n.t('Changes sign out all devices. Users enroll on their next sign-in.')}
 				</p>
 				{#if adminConfig.ENABLE_MFA}
-					<AdminSettingRow label={$i18n.t('Allow OAuth sign-in without an authenticator')}
+					<AdminSettingRow
+						let:labelId
+						label={$i18n.t('Allow OAuth sign-in without an authenticator')}
 						><Switch
+							ariaLabelledbyId={labelId}
 							bind:state={adminConfig.MFA_ALLOW_OAUTH_BYPASS}
 							ariaLabel={$i18n.t('Allow OAuth sign-in without an authenticator')}
 						/></AdminSettingRow
 					>
-					<AdminSettingRow label={$i18n.t('Allow trusted-header sign-in without an authenticator')}
+					<AdminSettingRow
+						let:labelId
+						label={$i18n.t('Allow trusted-header sign-in without an authenticator')}
 						><Switch
+							ariaLabelledbyId={labelId}
 							bind:state={adminConfig.MFA_ALLOW_TRUSTED_HEADER_BYPASS}
 							ariaLabel={$i18n.t('Allow trusted-header sign-in without an authenticator')}
 						/></AdminSettingRow
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 679a406521..7981743f01 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -224,12 +224,14 @@
 			{/if}
 
 			<UserSettingRow
+				let:labelId
 				label={$i18n.t('settings.personal.audio.instantAutoSendAfterVoiceTranscription.label')}
 				description={$i18n.t(
 					'settings.personal.audio.instantAutoSendAfterVoiceTranscription.description'
 				)}
 			>
 				<Switch
+					ariaLabelledbyId={labelId}
 					state={speechAutoSend}
 					ariaLabel={$i18n.t(
 						'settings.personal.audio.instantAutoSendAfterVoiceTranscription.label'
@@ -276,10 +278,12 @@
 			{/if}
 
 			<UserSettingRow
+				let:labelId
 				label={$i18n.t('settings.personal.audio.autoPlaybackResponse.label')}
 				description={$i18n.t('settings.personal.audio.autoPlaybackResponse.description')}
 			>
 				<Switch
+					ariaLabelledbyId={labelId}
 					state={responseAutoPlayback}
 					ariaLabel={$i18n.t('settings.personal.audio.autoPlaybackResponse.label')}
 					on:change={(event) => {
@@ -368,10 +372,11 @@
 					</SettingsSelect>
 				</UserSettingField>
 				<UserSettingRow
+					let:labelId
 					label={$i18n.t('settings.personal.audio.allowNonLocalVoices.label')}
 					description={$i18n.t('settings.personal.audio.allowNonLocalVoices.description')}
 				>
-					<Switch bind:state={nonLocalVoices} />
+					<Switch ariaLabelledbyId={labelId} bind:state={nonLocalVoices} />
 				</UserSettingRow>
 			</UserSettingSection>
 		{:else if $config.audio.tts.engine !== ''}
diff --git a/src/lib/components/chat/Settings/Personalization.svelte b/src/lib/components/chat/Settings/Personalization.svelte
index 1d879fea01..268b63a4f9 100644
--- a/src/lib/components/chat/Settings/Personalization.svelte
+++ b/src/lib/components/chat/Settings/Personalization.svelte
@@ -119,6 +119,7 @@
 			first
 		>
 			<UserSettingRow
+				let:labelId
 				description={$i18n
 					.t('settings.personal.personalization.memory.description')
 					.replace(
@@ -132,6 +133,7 @@
 				</div>
 
 				<Switch
+					ariaLabelledbyId={labelId}
 					bind:state={enableMemory}
 					on:change={async () => {
 						saveSettings({ memory: enableMemory });
diff --git a/src/lib/components/chat/Settings/UserSettingRow.svelte b/src/lib/components/chat/Settings/UserSettingRow.svelte
index 7b187ad1d6..8bd0d17919 100644
--- a/src/lib/components/chat/Settings/UserSettingRow.svelte
+++ b/src/lib/components/chat/Settings/UserSettingRow.svelte
@@ -1,17 +1,25 @@
 <script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+
 	export let label = '';
 	export let description = '';
 	export let className = '';
 	export let labelClassName = '';
+
+	const labelId = `user-setting-${uuidv4()}`;
 </script>
 
-<div class="flex items-center justify-between gap-2.5 {className}">
-	<div class="min-w-0 text-xs text-gray-600 dark:text-gray-400 {labelClassName}">
+<div class="group/setting-row flex items-center justify-between gap-2.5 {className}">
+	<label
+		id={labelId}
+		for={`${labelId}-control`}
+		class="min-w-0 text-xs text-gray-600 group-has-[[role=switch]:enabled]/setting-row:cursor-pointer group-has-[[role=switch]:disabled]/setting-row:cursor-not-allowed transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:text-gray-400 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white {labelClassName}"
+	>
 		<slot name="label">{label}</slot>
-	</div>
+	</label>
 
 	<div class="min-w-0">
-		<slot />
+		<slot {labelId} />
 	</div>
 </div>
 
diff --git a/src/lib/components/common/Switch.svelte b/src/lib/components/common/Switch.svelte
index 5702e6a8da..be27f0e110 100644
--- a/src/lib/components/common/Switch.svelte
+++ b/src/lib/components/common/Switch.svelte
@@ -35,7 +35,7 @@
 		<Switch.Root
 			bind:checked={state}
 			{disabled}
-			{id}
+			id={id || (ariaLabelledbyId ? `${ariaLabelledbyId}-control` : '')}
 			aria-labelledby={ariaLabelledbyId || undefined}
 			aria-label={ariaLabel || undefined}
 			class="focus-ring relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 {($settings?.highContrastMode ??