From feefe03bf2de127165f3238eabf9a867c5c463a9 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Fri, 30 Oct 2026 17:18:20 -0400
Subject: [PATCH] fix(a11y): the Ports list's Refresh and Open in new tab
 buttons aren't inside other buttons (#33430)

---
 .../components/chat/FileNav/PortList.svelte   | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/chat/FileNav/PortList.svelte b/src/lib/components/chat/FileNav/PortList.svelte
index 995951ca72..2105821630 100644
--- a/src/lib/components/chat/FileNav/PortList.svelte
+++ b/src/lib/components/chat/FileNav/PortList.svelte
@@ -57,25 +57,26 @@
 </script>
 
 <div class="px-2 py-1">
-	<button
+	<div
 		class="flex items-center gap-1 w-full text-xs font-normal text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-100"
-		on:click={() => (expanded = !expanded)}
 	>
-		<Icon
-			name="chevron-down"
-			size={12}
-			strokeWidth={1.4}
-			class="transition-transform {expanded ? '' : '-rotate-90'}"
-		/>
-		{$i18n.t('Ports')}
-		<span class="ml-auto flex items-center gap-1">
+		<button class="flex flex-1 items-center gap-1" on:click={() => (expanded = !expanded)}>
+			<Icon
+				name="chevron-down"
+				size={12}
+				strokeWidth={1.4}
+				class="transition-transform {expanded ? '' : '-rotate-90'}"
+			/>
+			{$i18n.t('Ports')}
 			{#if ports.length > 0}
 				<span
-					class="text-[0.625rem] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
+					class="ml-auto text-[0.625rem] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
 				>
 					{ports.length}
 				</span>
 			{/if}
+		</button>
+		<span class="flex items-center gap-1">
 			<Tooltip content={$i18n.t('Refresh')}>
 				<button
 					class="flex h-5 w-5 items-center justify-center rounded transition-colors duration-100 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
@@ -86,7 +87,7 @@
 				</button>
 			</Tooltip>
 		</span>
-	</button>
+	</div>
 
 	{#if expanded}
 		<div class="mt-1 space-y-0.5 max-h-[9.375rem] overflow-y-auto">
@@ -96,28 +97,30 @@
 				</div>
 			{:else}
 				{#each ports as port}
-					<button
+					<div
 						class="flex h-7 items-center w-full gap-2 px-1.5 text-xs rounded-lg hover:bg-gray-50/40 dark:hover:bg-white/4 transition-colors duration-75 group"
-						on:click={() => previewPort(port.port)}
 					>
-						<span class="font-mono text-blue-500 dark:text-blue-400 shrink-0">
-							:{port.port}
-						</span>
-						<span class="text-gray-500 dark:text-gray-400 truncate flex-1 text-left">
-							{port.process ?? ''}
-						</span>
+						<button
+							class="flex min-w-0 flex-1 items-center gap-2 self-stretch"
+							on:click={() => previewPort(port.port)}
+						>
+							<span class="font-mono text-blue-500 dark:text-blue-400 shrink-0">
+								:{port.port}
+							</span>
+							<span class="text-gray-500 dark:text-gray-400 truncate flex-1 text-left">
+								{port.process ?? ''}
+							</span>
+						</button>
 						<Tooltip content={$i18n.t('Open in new tab')}>
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<span
-								role="button"
-								tabindex="-1"
+							<button
 								class="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition shrink-0 flex h-5 w-5 items-center justify-center rounded hover:text-gray-600 dark:hover:text-gray-300"
-								on:click|stopPropagation={() => openPortExternal(port.port)}
+								aria-label={$i18n.t('Open in new tab')}
+								on:click={() => openPortExternal(port.port)}
 							>
 								<Icon name="external-link" size={11} strokeWidth={1.4} />
-							</span>
+							</button>
 						</Tooltip>
-					</button>
+					</div>
 				{/each}
 			{/if}
 		</div>