From bb08b7ed7788119c07f3f2e4c8ff16e0a3ab4850 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sat, 24 Oct 2026 23:04:06 -0400
Subject: [PATCH] fix(a11y): an attached file's Remove button is no longer
 inside the file's own button (#33121)

---
 src/lib/components/common/FileItem.svelte | 251 +++++++++++-----------
 1 file changed, 127 insertions(+), 124 deletions(-)

diff --git a/src/lib/components/common/FileItem.svelte b/src/lib/components/common/FileItem.svelte
index 1172f05c42..1fbe877c4a 100644
--- a/src/lib/components/common/FileItem.svelte
+++ b/src/lib/components/common/FileItem.svelte
@@ -51,145 +51,148 @@
 	<FileItemModal bind:show={showModal} bind:item {edit} />
 {/if}
 
-<button
-	class="relative group {className} flex items-center {colorClassName} {small
-		? 'h-8 gap-1.5 rounded-xl px-2.5 text-[0.8125rem] leading-5'
-		: 'gap-1 rounded-2xl p-1.5'} text-left"
-	type="button"
-	on:click={async () => {
-		const filesystemPath = item?.type === 'filesystem' ? (item.path ?? item.url ?? item.id) : null;
+<div class="relative group {className}">
+	<button
+		class="flex w-full items-center {colorClassName} {small
+			? 'h-8 gap-1.5 rounded-xl px-2.5 text-[0.8125rem] leading-5'
+			: 'gap-1 rounded-2xl p-1.5'} text-left"
+		type="button"
+		on:click={async () => {
+			const filesystemPath =
+				item?.type === 'filesystem' ? (item.path ?? item.url ?? item.id) : null;
 
-		if (filesystemPath) {
-			showFileNavPath.set(filesystemPath);
-		} else if (item?.file?.data?.content || item?.type === 'file' || item?.content || modal) {
-			showModal = !showModal;
-		} else {
-			if (url) {
-				if (type === 'file') {
-					if (url.startsWith('http')) {
-						window.open(`${url}/content`, '_blank').focus();
-					} else {
-						window.open(`${WEBUI_API_BASE_URL}/files/${url}/content`, '_blank').focus();
+			if (filesystemPath) {
+				showFileNavPath.set(filesystemPath);
+			} else if (item?.file?.data?.content || item?.type === 'file' || item?.content || modal) {
+				showModal = !showModal;
+			} else {
+				if (url) {
+					if (type === 'file') {
+						if (url.startsWith('http')) {
+							window.open(`${url}/content`, '_blank').focus();
+						} else {
+							window.open(`${WEBUI_API_BASE_URL}/files/${url}/content`, '_blank').focus();
+						}
+					} else if (safeLinkUrl(url)) {
+						window.open(`${url}`, '_blank').focus();
 					}
-				} else if (safeLinkUrl(url)) {
-					window.open(`${url}`, '_blank').focus();
 				}
 			}
-		}
-
-		dispatch('click');
-	}}
->
-	{#if !small}
-		<div
-			class="size-10 shrink-0 flex justify-center items-center bg-black/20 dark:bg-white/10 text-white rounded-xl"
-		>
-			{#if !loading}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					aria-hidden="true"
-					class=" size-4.5"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
-						clip-rule="evenodd"
-					/>
-					<path
-						d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
-					/>
-				</svg>
-			{:else}
-				<Spinner />
-			{/if}
-		</div>
-	{:else}
-		<div class="shrink-0 text-gray-500 dark:text-gray-400">
-			{#if !loading}
-				<Tooltip
-					content={type === 'collection'
-						? $i18n.t('Collection')
-						: type === 'note'
-							? $i18n.t('Note')
-							: type === 'chat'
-								? $i18n.t('Chat')
-								: type === 'file' || type === 'filesystem'
-									? $i18n.t('File')
-									: $i18n.t('Document')}
-					placement="top"
-				>
-					{#if type === 'collection'}
-						<Database className="size-3.5" />
-					{:else if type === 'note'}
-						<PageEdit className="size-3.5" />
-					{:else if type === 'chat'}
-						<ChatBubble className="size-3.5" />
-					{:else if type === 'folder'}
-						<Folder className="size-3.5" />
-					{:else}
-						<DocumentPage className="size-3.5" />
-					{/if}
-				</Tooltip>
-			{:else}
-				<Spinner className="size-3.5" />
-			{/if}
-		</div>
-	{/if}
-
-	{#if !small}
-		<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
-			<div class=" dark:text-gray-100 text-sm font-normal line-clamp-1 mb-1">
-				{decodeString(name)}
-			</div>
 
+			dispatch('click');
+		}}
+	>
+		{#if !small}
 			<div
-				class=" flex justify-between text-xs line-clamp-1 {($settings?.highContrastMode ?? false)
-					? 'text-gray-800 dark:text-gray-100'
-					: 'text-gray-500'}"
+				class="size-10 shrink-0 flex justify-center items-center bg-black/20 dark:bg-white/10 text-white rounded-xl"
 			>
-				{#if type === 'file' || type === 'filesystem'}
-					{$i18n.t('File')}
-				{:else if type === 'note'}
-					{$i18n.t('Note')}
-				{:else if type === 'doc'}
-					{$i18n.t('Document')}
-				{:else if type === 'collection'}
-					{$i18n.t('Collection')}
+				{#if !loading}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						aria-hidden="true"
+						class=" size-4.5"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
+							clip-rule="evenodd"
+						/>
+						<path
+							d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
+						/>
+					</svg>
 				{:else}
-					<span class=" capitalize line-clamp-1">{type}</span>
-				{/if}
-				{#if size}
-					<span class="capitalize">{formatFileSize(size)}</span>
+					<Spinner />
 				{/if}
 			</div>
-		</div>
-	{:else}
-		<Tooltip
-			content={decodeString(name)}
-			className="flex min-w-0 flex-1 overflow-hidden"
-			placement="top-start"
-		>
-			<div class="flex min-w-0 flex-1 items-center overflow-hidden">
-				<div class="flex min-w-0 flex-1 items-center justify-between dark:text-gray-100">
-					<div class="min-w-0 flex-1 truncate pr-1 font-normal">{decodeString(name)}</div>
-					{#if size}
-						<div class="max-w-[35%] shrink-0 truncate text-[0.6875rem] capitalize text-gray-500">
-							{formatFileSize(size)}
-						</div>
+		{:else}
+			<div class="shrink-0 text-gray-500 dark:text-gray-400">
+				{#if !loading}
+					<Tooltip
+						content={type === 'collection'
+							? $i18n.t('Collection')
+							: type === 'note'
+								? $i18n.t('Note')
+								: type === 'chat'
+									? $i18n.t('Chat')
+									: type === 'file' || type === 'filesystem'
+										? $i18n.t('File')
+										: $i18n.t('Document')}
+						placement="top"
+					>
+						{#if type === 'collection'}
+							<Database className="size-3.5" />
+						{:else if type === 'note'}
+							<PageEdit className="size-3.5" />
+						{:else if type === 'chat'}
+							<ChatBubble className="size-3.5" />
+						{:else if type === 'folder'}
+							<Folder className="size-3.5" />
+						{:else}
+							<DocumentPage className="size-3.5" />
+						{/if}
+					</Tooltip>
+				{:else}
+					<Spinner className="size-3.5" />
+				{/if}
+			</div>
+		{/if}
+
+		{#if !small}
+			<div class="flex flex-col justify-center -space-y-0.5 px-2.5 w-full">
+				<div class=" dark:text-gray-100 text-sm font-normal line-clamp-1 mb-1">
+					{decodeString(name)}
+				</div>
+
+				<div
+					class=" flex justify-between text-xs line-clamp-1 {($settings?.highContrastMode ?? false)
+						? 'text-gray-800 dark:text-gray-100'
+						: 'text-gray-500'}"
+				>
+					{#if type === 'file' || type === 'filesystem'}
+						{$i18n.t('File')}
+					{:else if type === 'note'}
+						{$i18n.t('Note')}
+					{:else if type === 'doc'}
+						{$i18n.t('Document')}
+					{:else if type === 'collection'}
+						{$i18n.t('Collection')}
 					{:else}
-						<div class="max-w-[35%] shrink-0 truncate text-[0.6875rem] capitalize text-gray-500">
-							{type}
-						</div>
+						<span class=" capitalize line-clamp-1">{type}</span>
+					{/if}
+					{#if size}
+						<span class="capitalize">{formatFileSize(size)}</span>
 					{/if}
 				</div>
 			</div>
-		</Tooltip>
-	{/if}
+		{:else}
+			<Tooltip
+				content={decodeString(name)}
+				className="flex min-w-0 flex-1 overflow-hidden"
+				placement="top-start"
+			>
+				<div class="flex min-w-0 flex-1 items-center overflow-hidden">
+					<div class="flex min-w-0 flex-1 items-center justify-between dark:text-gray-100">
+						<div class="min-w-0 flex-1 truncate pr-1 font-normal">{decodeString(name)}</div>
+						{#if size}
+							<div class="max-w-[35%] shrink-0 truncate text-[0.6875rem] capitalize text-gray-500">
+								{formatFileSize(size)}
+							</div>
+						{:else}
+							<div class="max-w-[35%] shrink-0 truncate text-[0.6875rem] capitalize text-gray-500">
+								{type}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</Tooltip>
+		{/if}
+	</button>
 
 	{#if dismissible}
-		<div class=" absolute -top-1 -right-1">
+		<div class=" absolute -top-[3px] -right-[3px] flex">
 			<button
 				aria-label={$i18n.t('Remove File')}
 				class=" bg-white text-black border border-gray-50 rounded-full {($settings?.highContrastMode ??
@@ -214,4 +217,4 @@
 			</button> -->
 		</div>
 	{/if}
-</button>
+</div>