From c8f8fa451a60974dfa4ebaf7cd6163ef30c45fd6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 11 Aug 2026 01:25:20 -0600
Subject: [PATCH] a11y

Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
---
 src/app.css                                   | 10 +++++++
 src/lib/components/NotificationToast.svelte   |  2 +-
 .../calendar/CalendarSidebar.svelte           |  6 ++--
 .../components/channel/MessageInput.svelte    |  2 +-
 .../channel/Messages/Message.svelte           |  9 +++---
 .../chat/EmbeddedChatHistoryDropdown.svelte   |  2 +-
 .../chat/EmbeddedChatHistoryItem.svelte       | 11 ++++----
 .../components/chat/FileNav/PortList.svelte   |  2 +-
 src/lib/components/chat/MessageInput.svelte   |  2 +-
 .../Messages/Markdown/ColonFenceBlock.svelte  |  2 +-
 .../Messages/Markdown/MarkdownTokens.svelte   |  2 +-
 .../Messages/MultiResponseMessages.svelte     |  4 +--
 .../chat/Messages/OutputEditView.svelte       |  2 +-
 .../chat/Messages/ResponseMessage.svelte      | 28 +++++++++----------
 .../chat/Messages/UserMessage.svelte          | 12 ++++----
 src/lib/components/chat/Overview/Node.svelte  |  2 +-
 .../Settings/Account/UserProfileImage.svelte  | 12 ++++----
 src/lib/components/common/FileItem.svelte     |  2 +-
 src/lib/components/common/Folder.svelte       |  5 +++-
 src/lib/components/common/Image.svelte        |  2 +-
 src/lib/components/layout/Sidebar.svelte      |  4 +--
 .../layout/Sidebar/ChannelItem.svelte         |  8 ++----
 .../components/layout/Sidebar/ChatItem.svelte | 21 ++++++++++----
 .../components/layout/Sidebar/ChatMenu.svelte | 15 ++++++----
 .../layout/Sidebar/PinnedNoteList.svelte      |  2 +-
 .../layout/Sidebar/RecursiveFolder.svelte     |  2 +-
 .../components/layout/Sidebar/Section.svelte  |  2 +-
 src/lib/components/playground/Images.svelte   |  4 +--
 .../workspace/Models/ModelEditor.svelte       |  2 +-
 29 files changed, 103 insertions(+), 76 deletions(-)

diff --git a/src/app.css b/src/app.css
index 93df455113..d315544e0f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -64,6 +64,16 @@ code {
 	@apply bg-gray-50/40 dark:bg-gray-800/40;
 }
 
+/* visibility:hidden is not focusable, so a keyboard user could never reveal these */
+.hover-reveal {
+	@apply opacity-0 pointer-events-none;
+}
+
+.group:hover .hover-reveal,
+.group:focus-within .hover-reveal {
+	@apply opacity-100 pointer-events-auto;
+}
+
 .marked a {
 	@apply underline;
 }
diff --git a/src/lib/components/NotificationToast.svelte b/src/lib/components/NotificationToast.svelte
index 5862585226..d503f760b8 100644
--- a/src/lib/components/NotificationToast.svelte
+++ b/src/lib/components/NotificationToast.svelte
@@ -101,7 +101,7 @@
 	<!-- Close button (visible on hover) -->
 	<button
 		bind:this={closeButtonElement}
-		class="absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-opacity z-10"
+		class="absolute -top-0.5 -left-0.5 p-0.5 rounded-full opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-opacity z-10"
 		on:click|stopPropagation={closeHandler}
 		aria-label="Dismiss notification"
 	>
diff --git a/src/lib/components/calendar/CalendarSidebar.svelte b/src/lib/components/calendar/CalendarSidebar.svelte
index dc4c60de4d..d0bbc096eb 100644
--- a/src/lib/components/calendar/CalendarSidebar.svelte
+++ b/src/lib/components/calendar/CalendarSidebar.svelte
@@ -149,7 +149,9 @@
 			</div>
 		</div>
 
-		<div class="grid grid-cols-7 text-center text-[0.5625rem] text-gray-400 dark:text-gray-500 mb-0.5">
+		<div
+			class="grid grid-cols-7 text-center text-[0.5625rem] text-gray-400 dark:text-gray-500 mb-0.5"
+		>
 			{#each ['S', 'M', 'T', 'W', 'T', 'F', 'S'] as d}
 				<div class="py-0.5">{d}</div>
 			{/each}
@@ -224,7 +226,7 @@
 					{#if isDeletable(cal)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<span
-							class="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100
+							class="shrink-0 p-0.5 rounded opacity-0 group-hover:opacity-100 group-focus-within:opacity-100
 								transition-all duration-150"
 							role="button"
 							tabindex="-1"
diff --git a/src/lib/components/channel/MessageInput.svelte b/src/lib/components/channel/MessageInput.svelte
index 4c670b7fce..4e48c50e62 100644
--- a/src/lib/components/channel/MessageInput.svelte
+++ b/src/lib/components/channel/MessageInput.svelte
@@ -850,7 +850,7 @@
 												</div>
 												<div class=" absolute -top-1 -right-1">
 													<button
-														class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
+														class=" bg-white text-black border border-white rounded-full hover-reveal transition"
 														type="button"
 														aria-label={$i18n.t('Remove file')}
 														on:click={() => {
diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index 452ca50b0d..b0ad2084e2 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -209,9 +209,7 @@
 				: 'transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);'}"
 		>
 			{#if !edit && !disabled}
-				<div
-					class=" absolute {showButtons ? '' : 'invisible group-hover:visible'} right-1 -top-2 z-10"
-				>
+				<div class=" absolute {showButtons ? '' : 'hover-reveal'} right-1 -top-2 z-10">
 					<div
 						class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100/30 dark:border-gray-850/30"
 					>
@@ -413,7 +411,7 @@
 
 						{#if message.created_at}
 							<div
-								class="mt-1.5 flex shrink-0 items-center text-xs self-center invisible group-hover:visible text-gray-500 font-normal first-letter:capitalize"
+								class="mt-1.5 flex shrink-0 items-center text-xs self-center hover-reveal text-gray-500 font-normal first-letter:capitalize"
 							>
 								<Tooltip content={dayjs(message.created_at / 1000000).format('LLLL')}>
 									{dayjs(message.created_at / 1000000).format('HH:mm')}
@@ -555,7 +553,8 @@
 										allowEmbeds={!!message?.meta?.model_id}
 									/>
 								</span>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
-										class="text-gray-500 text-[0.625rem] pl-1 self-center">({$i18n.t('edited')})</span
+										class="text-gray-500 text-[0.625rem] pl-1 self-center"
+										>({$i18n.t('edited')})</span
 									>{/if}
 							{/if}
 						</div>
diff --git a/src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte b/src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte
index 61c4c000d5..5b63f9fb5d 100644
--- a/src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte
+++ b/src/lib/components/chat/EmbeddedChatHistoryDropdown.svelte
@@ -40,7 +40,7 @@
 	>
 		<span class="min-w-0 truncate">{title}</span>
 		<ChevronRight
-			className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 dark:text-gray-500/70"
+			className="size-3.5 shrink-0 text-gray-400/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-500/70"
 			strokeWidth="2"
 		/>
 	</button>
diff --git a/src/lib/components/chat/EmbeddedChatHistoryItem.svelte b/src/lib/components/chat/EmbeddedChatHistoryItem.svelte
index 9a1eebf4ba..1abf14b762 100644
--- a/src/lib/components/chat/EmbeddedChatHistoryItem.svelte
+++ b/src/lib/components/chat/EmbeddedChatHistoryItem.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div
-	class="group/item flex h-[1.6875rem] 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 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
+	class="group flex h-[1.6875rem] 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 [&_button:hover]:bg-transparent! dark:[&_button:hover]:bg-transparent! {selected
 		? 'bg-gray-50/70 dark:bg-gray-800/60'
 		: ''}"
 >
@@ -41,9 +41,7 @@
 	</button>
 
 	<div
-		class="{showMenu
-			? 'visible'
-			: 'invisible group-hover/item:visible'} ml-auto flex shrink-0 items-center gap-1.5 pl-2"
+		class="{showMenu ? 'visible' : 'hover-reveal'} ml-auto flex shrink-0 items-center gap-1.5 pl-2"
 	>
 		<Dropdown
 			bind:show={showMenu}
@@ -54,7 +52,10 @@
 				onMenuOpenChange(item.id, state);
 			}}
 		>
-			<Tooltip content={$i18n.t('More')} className="group-hover/item:opacity-100 opacity-0">
+			<Tooltip
+				content={$i18n.t('More')}
+				className="group-hover:opacity-100 group-focus-within:opacity-100 opacity-0"
+			>
 				<button
 					type="button"
 					aria-label={$i18n.t('More Options')}
diff --git a/src/lib/components/chat/FileNav/PortList.svelte b/src/lib/components/chat/FileNav/PortList.svelte
index db723ca0f4..736f7350de 100644
--- a/src/lib/components/chat/FileNav/PortList.svelte
+++ b/src/lib/components/chat/FileNav/PortList.svelte
@@ -125,7 +125,7 @@
 							<span
 								role="button"
 								tabindex="-1"
-								class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+								class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
 								on:click|stopPropagation={() => openPortExternal(port.port)}
 							>
 								<svg
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index a835851dcd..f276db9de7 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1765,7 +1765,7 @@
 														class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
 														false)
 															? ''
-															: 'outline-hidden focus:outline-hidden group-hover:visible invisible transition'}"
+															: 'hover-reveal transition'}"
 														type="button"
 														aria-label={$i18n.t('Remove file')}
 														on:click={() => {
diff --git a/src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte b/src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte
index 71f9d4f2d3..2dbcd44111 100644
--- a/src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte
+++ b/src/lib/components/chat/Messages/Markdown/ColonFenceBlock.svelte
@@ -46,7 +46,7 @@
 			{header}
 		</span>
 
-		<div class="invisible group-hover:visible flex gap-0.5 shrink-0">
+		<div class="hover-reveal flex gap-0.5 shrink-0">
 			<Tooltip content={copied ? $i18n.t('Copied') : $i18n.t('Copy')}>
 				<button
 					class="p-1 rounded-lg bg-transparent hover:bg-black/5 dark:hover:bg-white/5 transition"
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 89321227ea..c113c572aa 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -245,7 +245,7 @@
 				</table>
 			</div>
 
-			<div class=" absolute top-1 right-1.5 z-20 invisible group-hover:visible flex gap-0.5">
+			<div class=" absolute top-1 right-1.5 z-20 hover-reveal flex gap-0.5">
 				<Tooltip content={$i18n.t('Copy')}>
 					<button
 						class="p-1 rounded-lg bg-transparent transition"
diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
index d836f84407..c52a6de388 100644
--- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte
+++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte
@@ -443,7 +443,7 @@
 										>
 											<time
 												datetime={new Date(message.timestamp * 1000).toISOString()}
-												class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+												class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 											>
 												{formatMessageTimestamp(message.timestamp * 1000)}
 											</time>
@@ -462,7 +462,7 @@
 									id="merge-response-button"
 									class="{true
 										? 'visible'
-										: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+										: 'hover-reveal'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 									on:click={() => {
 										mergeResponsesHandler();
 									}}
diff --git a/src/lib/components/chat/Messages/OutputEditView.svelte b/src/lib/components/chat/Messages/OutputEditView.svelte
index 83a96d69d8..0fc07373ac 100644
--- a/src/lib/components/chat/Messages/OutputEditView.svelte
+++ b/src/lib/components/chat/Messages/OutputEditView.svelte
@@ -335,8 +335,8 @@
 					<!-- Delete -->
 					<div class="pt-1.5">
 						<button
+							class="hover-reveal p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
 							aria-label={$i18n.t('Delete')}
-							class="invisible group-hover:visible p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
 							on:click={() => deleteIndices(di.indices)}
 						>
 							<svg
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index dc31394b97..d48565d4ba 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1026,7 +1026,7 @@
 												aria-label={$i18n.t('Edit')}
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 												on:click={() => {
 													editMessageHandler();
 												}}
@@ -1056,7 +1056,7 @@
 										aria-label={$i18n.t('Copy')}
 										class="{isLastMessage || ($settings?.highContrastMode ?? false)
 											? 'visible'
-											: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
+											: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
 										on:click={() => {
 											copyToClipboard(visibleResponseContent);
 										}}
@@ -1085,7 +1085,7 @@
 											aria-label={$i18n.t('Insert into note')}
 											class="{isLastMessage || ($settings?.highContrastMode ?? false)
 												? 'visible'
-												: 'invisible group-hover:visible'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
+												: 'hover-reveal'} rounded-lg px-2 py-1.5 text-xs text-gray-500 transition hover:bg-black/5 hover:text-black dark:hover:bg-white/5 dark:hover:text-white"
 											on:click={() => {
 												onInsertToNote?.(visibleResponseContent);
 											}}
@@ -1102,7 +1102,7 @@
 											id="speak-button-{message.id}"
 											class="{isLastMessage || ($settings?.highContrastMode ?? false)
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+												: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 											on:click={() => {
 												if (!loadingSpeech) {
 													if (speaking) {
@@ -1202,7 +1202,7 @@
 											aria-hidden="true"
 											class=" {isLastMessage || ($settings?.highContrastMode ?? false)
 												? 'visible'
-												: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
+												: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
 											on:click={() => {
 												console.log(message);
 											}}
@@ -1234,7 +1234,7 @@
 												aria-label={$i18n.t('Good Response')}
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
 													message?.annotation?.rating ?? ''
 												).toString() === '1'
 													? 'bg-gray-100 dark:bg-gray-800'
@@ -1272,7 +1272,7 @@
 												aria-label={$i18n.t('Bad Response')}
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
 													message?.annotation?.rating ?? ''
 												).toString() === '-1'
 													? 'bg-gray-100 dark:bg-gray-800'
@@ -1314,7 +1314,7 @@
 												id="continue-response-button"
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 												on:click={() => {
 													continueResponse();
 												}}
@@ -1390,7 +1390,7 @@
 														aria-label={$i18n.t('Regenerate')}
 														class="{isLastMessage || ($settings?.highContrastMode ?? false)
 															? 'visible'
-															: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+															: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 													>
 														<svg
 															xmlns="http://www.w3.org/2000/svg"
@@ -1417,7 +1417,7 @@
 													aria-label={$i18n.t('Regenerate')}
 													class="{isLastMessage || ($settings?.highContrastMode ?? false)
 														? 'visible'
-														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
+														: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
 													on:click={() => {
 														showRateComment = false;
 														regenerateResponse(message);
@@ -1462,7 +1462,7 @@
 												aria-label={action.name}
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 												on:click={() => {
 													actionMessage(action.id, message);
 												}}
@@ -1492,7 +1492,7 @@
 												aria-label="Fork chat"
 												class="{isLastMessage || ($settings?.highContrastMode ?? false)
 													? 'visible'
-													: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+													: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 												on:click={() => {
 													forkHandler?.(message.id);
 												}}
@@ -1526,7 +1526,7 @@
 													id="delete-response-button"
 													class="{isLastMessage || ($settings?.highContrastMode ?? false)
 														? 'visible'
-														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
+														: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition disabled:opacity-50 disabled:hover:bg-transparent"
 													disabled={!allowDelete}
 													on:click={(e) => {
 														if (!allowDelete) {
@@ -1567,7 +1567,7 @@
 										>
 											<time
 												datetime={new Date(message.timestamp * 1000).toISOString()}
-												class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+												class="hover-reveal ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 											>
 												{formatMessageTimestamp(message.timestamp * 1000)}
 											</time>
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index b9324ea219..1357e9cf12 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -225,7 +225,7 @@
 												class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
 												false)
 													? ''
-													: 'group-hover:visible invisible transition'}"
+													: 'hover-reveal transition'}"
 												type="button"
 												on:click={() => {
 													editedFiles.splice(fileIdx, 1);
@@ -421,9 +421,7 @@
 						>
 							<time
 								datetime={new Date(message.timestamp * 1000).toISOString()}
-								class="{compactPreview
-									? ''
-									: 'invisible group-hover:visible'} {($settings?.chatBubble ?? true)
+								class="{compactPreview ? '' : 'hover-reveal'} {($settings?.chatBubble ?? true)
 									? 'mr-1'
 									: 'ml-1 shrink-0 whitespace-nowrap'} text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 							>
@@ -533,7 +531,7 @@
 							<button
 								class="{($settings?.highContrastMode ?? false)
 									? ''
-									: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
+									: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition edit-user-message-button"
 								aria-label={$i18n.t('Edit')}
 								on:click={() => {
 									editMessageHandler();
@@ -562,7 +560,7 @@
 							<button
 								class="{($settings?.highContrastMode ?? false)
 									? ''
-									: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
+									: 'hover-reveal'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
 								aria-label={$i18n.t('Copy')}
 								on:click={() => {
 									copyToClipboard(message.content);
@@ -593,7 +591,7 @@
 									aria-label={$i18n.t('Delete')}
 									class="{($settings?.highContrastMode ?? false)
 										? ''
-										: 'invisible group-hover:visible'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
+										: 'hover-reveal'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
 									on:click={(e) => {
 										if (e.shiftKey) {
 											deleteMessageHandler();
diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index 09f40b2b99..ecc20a32da 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/src/lib/components/chat/Overview/Node.svelte
@@ -61,7 +61,7 @@
 						</div>
 
 						<button
-							class={data?.message?.favorite ? '' : 'invisible group-hover:visible'}
+							class={data?.message?.favorite ? '' : 'hover-reveal'}
 							aria-label={data?.message?.favorite
 								? $i18n.t('Remove from favorites')
 								: $i18n.t('Add to favorites')}
diff --git a/src/lib/components/chat/Settings/Account/UserProfileImage.svelte b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
index 79a1fde541..1aa54b4372 100644
--- a/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
+++ b/src/lib/components/chat/Settings/Account/UserProfileImage.svelte
@@ -101,7 +101,7 @@
 				class="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200 group-hover:bg-black/40"
 			>
 				<svg
-					class="h-4 w-4 text-white opacity-0 drop-shadow-sm transition-opacity duration-200 group-hover:opacity-100"
+					class="h-4 w-4 text-white opacity-0 drop-shadow-sm transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -187,7 +187,9 @@
 					class=" rounded-full {imageClassName} object-cover"
 				/>
 
-				<div class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition">
+				<div
+					class="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition"
+				>
 					<div class="p-1 rounded-full bg-white text-black border-gray-100 shadow">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +207,7 @@
 		</div>
 		<div class="flex flex-col w-full justify-center mt-2">
 			<button
-				class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 transition-all"
+				class=" text-xs text-center text-gray-500 rounded-lg py-0.5 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-all"
 				type="button"
 				on:click={async () => {
 					profileImageUrl = `${WEBUI_BASE_URL}/user.png`;
@@ -213,7 +215,7 @@
 			>
 
 			<button
-				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
+				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-400"
 				type="button"
 				on:click={async () => {
 					if (canvasPixelTest()) {
@@ -232,7 +234,7 @@
 			>
 
 			<button
-				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 dark:text-gray-400"
+				class="rounded-lg py-0.5 text-center text-xs text-gray-600 opacity-0 transition-all group-hover:opacity-100 group-focus-within:opacity-100 dark:text-gray-400"
 				type="button"
 				on:click={async () => {
 					const url = await getGravatarUrl(localStorage.token, user?.email);
diff --git a/src/lib/components/common/FileItem.svelte b/src/lib/components/common/FileItem.svelte
index c025f4e11f..9ebe7d004b 100644
--- a/src/lib/components/common/FileItem.svelte
+++ b/src/lib/components/common/FileItem.svelte
@@ -183,7 +183,7 @@
 				class=" bg-white text-black border border-gray-50 rounded-full {($settings?.highContrastMode ??
 				false)
 					? ''
-					: 'outline-hidden focus:outline-hidden group-hover:visible invisible transition'}"
+					: 'hover-reveal transition'}"
 				type="button"
 				on:click|stopPropagation={() => {
 					dispatch('dismiss');
diff --git a/src/lib/components/common/Folder.svelte b/src/lib/components/common/Folder.svelte
index 0d5c324552..3562eaea47 100644
--- a/src/lib/components/common/Folder.svelte
+++ b/src/lib/components/common/Folder.svelte
@@ -174,7 +174,10 @@
 
 					{#if onAdd}
 						<button
-							class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+							class="absolute z-10 right-2 hover-reveal self-center flex items-center dark:text-gray-300"
+							on:pointerup={(e) => {
+								e.stopPropagation();
+							}}
 							on:click={(e) => {
 								e.stopPropagation();
 								onAdd();
diff --git a/src/lib/components/common/Image.svelte b/src/lib/components/common/Image.svelte
index 7d535fca4c..6cf0733c19 100644
--- a/src/lib/components/common/Image.svelte
+++ b/src/lib/components/common/Image.svelte
@@ -80,7 +80,7 @@
 		<div class=" absolute -top-1 -right-1">
 			<button
 				aria-label={$i18n.t('Remove image')}
-				class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
+				class=" bg-white text-black border border-white rounded-full hover-reveal transition"
 				type="button"
 				on:click={() => {
 					onDismiss();
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index b1a3f49722..d61359a430 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1204,7 +1204,7 @@
 									<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('New Chat')}</div>
 								</div>
 
-								<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
+								<HotkeyHint name="newChat" className=" hover-reveal " />
 							</a>
 						</div>
 
@@ -1225,7 +1225,7 @@
 								<div class="flex flex-1 self-center translate-y-[0.5px]">
 									<div class=" self-center text-[0.8125rem] leading-5">{$i18n.t('Search')}</div>
 								</div>
-								<HotkeyHint name="search" className=" group-hover:visible invisible" />
+								<HotkeyHint name="search" className=" hover-reveal " />
 							</button>
 						</div>
 
diff --git a/src/lib/components/layout/Sidebar/ChannelItem.svelte b/src/lib/components/layout/Sidebar/ChannelItem.svelte
index 2b6d20c658..834996ef4d 100644
--- a/src/lib/components/layout/Sidebar/ChannelItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChannelItem.svelte
@@ -203,9 +203,7 @@
 	</a>
 
 	{#if ['dm'].includes(channel?.type)}
-		<div
-			class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-		>
+		<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
 			<button
 				type="button"
 				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
@@ -230,9 +228,7 @@
 			</button>
 		</div>
 	{:else if $user?.role === 'admin' || channel.user_id === $user?.id}
-		<div
-			class="ml-0.5 mr-1 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-		>
+		<div class="ml-0.5 mr-1 hover-reveal self-center flex items-center dark:text-gray-300">
 			<button
 				type="button"
 				class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto"
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index d35adba28b..c59c49ee53 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -103,6 +103,8 @@
 	let chat = null;
 
 	let mouseOver = false;
+	let focusWithin = false;
+	let menuOpen = false;
 	let openPreview = false;
 
 	const closeHoverPreview = () => {
@@ -131,7 +133,8 @@
 		id !== $chatId &&
 		!active &&
 		(effectiveReadAt === null || (updatedAt !== null && updatedAt > effectiveReadAt));
-	$: showInlineActions = id === $chatId || confirmEdit || mouseOver || selected;
+	$: showInlineActions =
+		id === $chatId || confirmEdit || mouseOver || focusWithin || menuOpen || selected;
 	$: chatItemClass = ` w-full flex justify-between rounded-xl px-2 py-1.5 ${
 		id === $chatId || confirmEdit
 			? ($settings?.highContrastMode ?? false)
@@ -582,6 +585,12 @@
 	on:mouseleave={() => {
 		mouseOver = false;
 	}}
+	on:focusin={() => {
+		focusWithin = true;
+	}}
+	on:focusout={() => {
+		focusWithin = false;
+	}}
 >
 	{#if confirmEdit}
 		<div
@@ -669,7 +678,7 @@
 				? 'selected'
 				: showInlineActions
 					? 'selected'
-					: 'invisible group-hover:visible'} absolute {className === 'pr-2'
+					: 'hover-reveal'} absolute {className === 'pr-2'
 				? 'right-[0.5rem]'
 				: 'right-1'} inset-y-0 mr-1.5 flex items-center"
 		>
@@ -739,7 +748,12 @@
 							showDeleteConfirm = true;
 						}}
 						{markUnreadHandler}
+						onOpen={() => {
+							menuOpen = true;
+							dispatch('select');
+						}}
 						onClose={() => {
+							menuOpen = false;
 							dispatch('unselect');
 						}}
 						onPinChange={async () => {
@@ -750,9 +764,6 @@
 							type="button"
 							aria-label="Chat Menu"
 							class="flex size-5 items-center justify-center self-center dark:hover:text-white transition m-0"
-							on:click={() => {
-								dispatch('select');
-							}}
 						>
 							<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
 						</button>
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index df464bc69c..3f2eb983e6 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -39,11 +39,13 @@
 	export let archiveChatHandler: Function;
 	export let renameHandler: Function;
 	export let deleteHandler: Function;
+	export let onOpen: () => void = () => {};
 	export let onClose: Function;
 	export let markUnreadHandler: Function = () => {};
 
 	export let chatId = '';
 
+	let dropdown: Dropdown;
 	let show = false;
 	let pinned = false;
 
@@ -290,9 +292,12 @@
 {/if}
 
 <Dropdown
+	bind:this={dropdown}
 	bind:show
 	onOpenChange={(state) => {
-		if (state === false) {
+		if (state) {
+			onOpen();
+		} else {
 			onClose();
 		}
 	}}
@@ -363,7 +368,7 @@
 				draggable="false"
 				class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
 				on:click={() => {
-					show = false;
+					dropdown.close();
 					renameHandler();
 				}}
 			>
@@ -375,7 +380,7 @@
 				draggable="false"
 				class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
 				on:click={() => {
-					show = false;
+					dropdown.close();
 					markUnreadHandler();
 				}}
 			>
@@ -389,7 +394,7 @@
 				draggable="false"
 				class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
 				on:click={() => {
-					show = false;
+					dropdown.close();
 					pinHandler();
 				}}
 			>
@@ -407,7 +412,7 @@
 					draggable="false"
 					class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 w-full"
 					on:click={() => {
-						show = false;
+						dropdown.close();
 						cloneChatHandler();
 					}}
 				>
diff --git a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
index 750ac07f1f..9f22e7856b 100644
--- a/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
+++ b/src/lib/components/layout/Sidebar/PinnedNoteList.svelte
@@ -86,7 +86,7 @@
 				</div>
 			</a>
 			<button
-				class="invisible group-hover:visible self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
+				class="hover-reveal self-center p-0.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg transition"
 				on:click|preventDefault|stopPropagation={async () => {
 					await toggleNotePinnedStatusById(localStorage.token, note.id);
 					const _pinnedNotes = await getPinnedNoteList(localStorage.token).catch(() => []);
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index 5f9c916b58..58cd428d0d 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -855,7 +855,7 @@
 
 				{#if isWritable}
 					<button
-						class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+						class="absolute z-10 right-2 hover-reveal self-center flex items-center dark:text-gray-300"
 					>
 						<FolderMenu
 							onEdit={() => {
diff --git a/src/lib/components/layout/Sidebar/Section.svelte b/src/lib/components/layout/Sidebar/Section.svelte
index c52debebbd..db1a5fb02d 100644
--- a/src/lib/components/layout/Sidebar/Section.svelte
+++ b/src/lib/components/layout/Sidebar/Section.svelte
@@ -134,7 +134,7 @@
 					>
 						<span>{name}</span>
 						<span
-							class="flex opacity-0 group-hover:opacity-100 transition-all duration-100"
+							class="flex opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-all duration-100"
 							style="transform: rotate({open ? '90deg' : '0deg'})"
 						>
 							<ChevronRight className="size-[0.6875rem]" />
diff --git a/src/lib/components/playground/Images.svelte b/src/lib/components/playground/Images.svelte
index cc8671170b..d8906babe9 100644
--- a/src/lib/components/playground/Images.svelte
+++ b/src/lib/components/playground/Images.svelte
@@ -144,7 +144,7 @@
 											class="w-full aspect-square object-cover rounded-lg border border-gray-100/30 dark:border-gray-850/30"
 										/>
 										<div
-											class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition rounded-lg flex items-center justify-center"
+											class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition rounded-lg flex items-center justify-center"
 										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
@@ -188,7 +188,7 @@
 									</div>
 									<div class=" absolute -top-1 -right-1">
 										<button
-											class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
+											class=" bg-white text-black border border-white rounded-full hover-reveal transition"
 											type="button"
 											aria-label={$i18n.t('Remove image')}
 											on:click={() => removeImage(index)}
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 7f45fbf041..06cfb16ede 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -633,7 +633,7 @@
 										{/if}
 
 										<div
-											class="absolute bottom-0 right-0 z-10 opacity-0 transition group-hover:opacity-100"
+											class="absolute bottom-0 right-0 z-10 opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100"
 										>
 											<div class="m-1">
 												<div