From c086b80313fe0f5ce60831a0d150f695646c66e4 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 12 Aug 2026 00:51:12 -0600
Subject: [PATCH] refac

---
 src/app.css                                        |  3 +--
 .../components/chat/ModelSelector/ModelItem.svelte |  9 +++++----
 .../components/chat/ModelSelector/Selector.svelte  | 14 +++++++-------
 src/lib/components/common/AccessButton.svelte      |  2 +-
 src/lib/components/common/Checkbox.svelte          |  2 +-
 src/lib/components/common/MultiSelect.svelte       |  4 ++--
 src/lib/components/common/Select.svelte            |  4 ++--
 src/lib/components/common/SplitCreateButton.svelte |  6 +++---
 src/lib/components/common/Switch.svelte            |  2 +-
 9 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4308385dbc..2ff440c6e7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -409,8 +409,7 @@ input[type='number'] {
 	outline: none;
 }
 
-/* unlayered, so it beats outline-none utilities without ringing rich text editors */
-:focus-visible:not(.ProseMirror):not([contenteditable='true']) {
+html.high-contrast .focus-ring:focus-visible {
 	outline: 2px solid theme(--color-blue-500);
 	outline-offset: 2px;
 }
diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte
index 59dbf2a24d..5dcf24443a 100644
--- a/src/lib/components/chat/ModelSelector/ModelItem.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte
@@ -52,7 +52,7 @@
 	role="option"
 	aria-selected={isSelected}
 	aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
-	class="group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
+	class="focus-ring group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
 		selectedModelIdx && !compareEnabled
 		? 'bg-gray-50/70 dark:bg-gray-800/60'
 		: ''} {isSelected ? 'bg-gray-50/70 dark:bg-gray-800/60' : ''}"
@@ -121,7 +121,8 @@
 								}`}
 								className="self-end"
 							>
-								<span class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400"
+								<span
+									class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400"
 									>{item.model.ollama?.details?.parameter_size ?? ''}</span
 								>
 							</Tooltip>
@@ -250,7 +251,7 @@
 				className="flex-shrink-0 group-hover/item:opacity-100 opacity-0 "
 			>
 				<button
-					class="flex"
+					class="focus-ring flex"
 					aria-label={$i18n.t('Eject model')}
 					on:click={(e) => {
 						e.preventDefault();
@@ -275,7 +276,7 @@
 			>
 				<button
 					aria-label={`${$i18n.t('More Options')}`}
-					class="flex"
+					class="focus-ring flex"
 					on:click={(e) => {
 						e.preventDefault();
 						e.stopPropagation();
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index c0247c7ffd..10b74676da 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -746,7 +746,7 @@
 <div class="relative w-full">
 	<button
 		bind:this={triggerElement}
-		class="relative w-full {($settings?.highContrastMode ?? false)
+		class="focus-ring relative w-full {($settings?.highContrastMode ?? false)
 			? ''
 			: 'outline-hidden focus:outline-hidden'}"
 		aria-label={selectedModel
@@ -833,7 +833,7 @@
 										<Tooltip content={$i18n.t('Compare')}>
 											<button
 												type="button"
-												class="flex size-[1.375rem] shrink-0 items-center justify-center rounded-lg transition-colors duration-100 {compareEnabled
+												class="focus-ring flex size-[1.375rem] shrink-0 items-center justify-center rounded-lg transition-colors duration-100 {compareEnabled
 													? 'bg-gray-50 text-gray-700 hover:bg-gray-50 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-800/60'
 													: 'text-gray-500 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200'}"
 												aria-label={$i18n.t('Compare')}
@@ -880,7 +880,7 @@
 									</div>
 									<button
 										type="button"
-										class="mt-3 rounded-lg px-0 py-1 text-[0.6875rem] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
+										class="focus-ring mt-3 rounded-lg px-0 py-1 text-[0.6875rem] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
 										on:click={() => {
 											show = false;
 											showSettings.set('admin:connections');
@@ -900,7 +900,7 @@
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
 							<div
 								class="min-h-0 flex-1 overflow-y-auto"
-									style="max-height: 18rem;"
+								style="max-height: 18rem;"
 								role="listbox"
 								aria-label={$i18n.t('Available models')}
 								bind:this={listContainer}
@@ -940,7 +940,7 @@
 								placement="top-start"
 							>
 								<button
-									class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
+									class="focus-ring flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
 									on:click={() => {
 										pullModelHandler();
 									}}
@@ -987,7 +987,7 @@
 								<div class="mr-2 ml-1 translate-y-0.5">
 									<Tooltip content={$i18n.t('Cancel')}>
 										<button
-											class="text-gray-800 dark:text-gray-100"
+											class="focus-ring text-gray-800 dark:text-gray-100"
 											aria-label={$i18n.t('Cancel download of {{model}}', { model: model })}
 											on:click={() => {
 												cancelModelPullHandler(model);
@@ -1021,7 +1021,7 @@
 						<div class="flex shrink-0 items-center justify-end px-2 py-1 leading-none">
 							<button
 								type="button"
-								class="text-[0.65rem] font-normal leading-none text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
+								class="focus-ring text-[0.65rem] font-normal leading-none text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
 								on:click|stopPropagation={setDefaultHandler}
 							>
 								{$i18n.t('Set as default')}
diff --git a/src/lib/components/common/AccessButton.svelte b/src/lib/components/common/AccessButton.svelte
index 49d4d98062..24a2b048a6 100644
--- a/src/lib/components/common/AccessButton.svelte
+++ b/src/lib/components/common/AccessButton.svelte
@@ -13,7 +13,7 @@
 
 <button
 	type="button"
-	class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
+	class="focus-ring flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
 	{disabled}
 	on:click
 >
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
index a044974e97..6409f2cc57 100644
--- a/src/lib/components/common/Checkbox.svelte
+++ b/src/lib/components/common/Checkbox.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <button
-	class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
+	class="focus-ring outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
 	'unchecked'
 		? 'bg-black outline-black '
 		: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative {disabled
diff --git a/src/lib/components/common/MultiSelect.svelte b/src/lib/components/common/MultiSelect.svelte
index 2bfdbbe9be..ad7cab620f 100644
--- a/src/lib/components/common/MultiSelect.svelte
+++ b/src/lib/components/common/MultiSelect.svelte
@@ -88,7 +88,7 @@
 
 <button
 	bind:this={triggerEl}
-	class={className}
+	class="focus-ring {className}"
 	aria-label={placeholder}
 	type="button"
 	on:click={toggleOpen}
@@ -109,7 +109,7 @@
 		>
 			{#each items as item}
 				<button
-					class="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+					class="focus-ring flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
 					type="button"
 					on:click={() => toggleItem(item.value)}
 				>
diff --git a/src/lib/components/common/Select.svelte b/src/lib/components/common/Select.svelte
index e4f01e5138..efa8456d05 100644
--- a/src/lib/components/common/Select.svelte
+++ b/src/lib/components/common/Select.svelte
@@ -122,7 +122,7 @@
 
 <button
 	bind:this={triggerEl}
-	class={triggerClass}
+	class="focus-ring {triggerClass}"
 	type="button"
 	aria-expanded={open}
 	on:click={toggleOpen}
@@ -139,7 +139,7 @@
 		<DropdownMenu className={contentClass} style={`max-height: ${maxHeight}; overflow-y: auto;`}>
 			<slot {open} {selectItem}>
 				{#each items as item}
-					<button class={itemClass} type="button" on:click={() => selectItem(item)}>
+					<button class="focus-ring {itemClass}" type="button" on:click={() => selectItem(item)}>
 						<slot name="item" {item} selected={value === item.value}>
 							{item.label}
 						</slot>
diff --git a/src/lib/components/common/SplitCreateButton.svelte b/src/lib/components/common/SplitCreateButton.svelte
index 8da6fce4f4..00a701f3de 100644
--- a/src/lib/components/common/SplitCreateButton.svelte
+++ b/src/lib/components/common/SplitCreateButton.svelte
@@ -50,7 +50,7 @@
 
 {#if visibleActions.length === 1}
 	<button
-		class="ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
+		class="focus-ring ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
 		type="button"
 		on:click={() => {
 			runAction(primaryAction);
@@ -63,7 +63,7 @@
 		class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
 	>
 		<button
-			class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
+			class="focus-ring px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
 			on:click={() => {
 				runAction(primaryAction);
 			}}
@@ -73,7 +73,7 @@
 
 		<Dropdown bind:show={showMenu} align="end" sideOffset={6}>
 			<button
-				class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
+				class="focus-ring flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
 				aria-label={$i18n.t('Open create menu')}
 			>
 				<ChevronDown className="size-2.5" strokeWidth="2.5" />
diff --git a/src/lib/components/common/Switch.svelte b/src/lib/components/common/Switch.svelte
index d3979a971f..1bfb6c3274 100644
--- a/src/lib/components/common/Switch.svelte
+++ b/src/lib/components/common/Switch.svelte
@@ -36,7 +36,7 @@
 			{id}
 			aria-labelledby={ariaLabelledbyId || undefined}
 			aria-label={ariaLabel || undefined}
-			class="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 {($settings?.highContrastMode ??
+			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 {($settings?.highContrastMode ??
 			false)
 				? 'focus:outline focus:outline-2 focus:outline-gray-800! focus:dark:outline-gray-200!'
 				: ''} {state ? 'bg-gray-900 dark:bg-white' : 'bg-gray-300 dark:bg-gray-700'}"