From 57524b5b9700b56716e9ff250b0210a72e683922 Mon Sep 17 00:00:00 2001
From: bookingseo <68512992+bookingseo@users.noreply.github.com>
Date: Sun, 19 Jul 2026 12:14:43 +0700
Subject: [PATCH] fix(search-tabs): select the right-hand neighbor when closing
 the active tab (#89)

---
 e2e/keyword-research-navigation.spec.ts            | 6 +++++-
 src/client/features/search-tabs/SearchTabStrip.tsx | 1 +
 src/client/features/search-tabs/useSearchTabs.ts   | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/e2e/keyword-research-navigation.spec.ts b/e2e/keyword-research-navigation.spec.ts
index 910051a..0da192c 100644
--- a/e2e/keyword-research-navigation.spec.ts
+++ b/e2e/keyword-research-navigation.spec.ts
@@ -115,6 +115,10 @@ test.describe("Keyword Research navigation", () => {
     await expect(
       page.locator(`[data-search-tab-id="${closedTabId}"]`),
     ).toHaveCount(0);
-    await expect(page.getByRole("tab")).toHaveCount(2);
+    // Count only search tabs: the app shell has grown other tablists
+    // (Browse/Chat), so a bare role=tab count would include them.
+    await expect(
+      page.getByRole("tablist", { name: "Search tabs" }).getByRole("tab"),
+    ).toHaveCount(2);
   });
 });
diff --git a/src/client/features/search-tabs/SearchTabStrip.tsx b/src/client/features/search-tabs/SearchTabStrip.tsx
index 4bb9b4d..00b00f8 100644
--- a/src/client/features/search-tabs/SearchTabStrip.tsx
+++ b/src/client/features/search-tabs/SearchTabStrip.tsx
@@ -43,6 +43,7 @@ export function SearchTabStrip({
     <div className="rounded-xl border border-base-300 bg-base-100 p-1">
       <div
         role="tablist"
+        aria-label="Search tabs"
         className="flex min-w-0 items-stretch gap-1 overflow-x-auto"
       >
         {tabs.map((tab) => {
diff --git a/src/client/features/search-tabs/useSearchTabs.ts b/src/client/features/search-tabs/useSearchTabs.ts
index 45ec299..c3460c7 100644
--- a/src/client/features/search-tabs/useSearchTabs.ts
+++ b/src/client/features/search-tabs/useSearchTabs.ts
@@ -255,7 +255,11 @@ export function useSearchTabs(key: string) {
         let activeTabId = current.activeTabId;
         if (current.activeTabId === tabId) {
           closedActive = true;
-          const neighbor = tabs[index - 1] ?? tabs[index] ?? null;
+          // Post-removal array: tabs[index] is the tab that slid into the
+          // closed tab's slot (its right-hand neighbor). Select it first —
+          // browser-tab convention and the documented e2e contract — and fall
+          // back to the left neighbor only when the last tab was closed.
+          const neighbor = tabs[index] ?? tabs[index - 1] ?? null;
           activeTabId = neighbor?.id ?? null;
           nextActiveTab = neighbor;
         }