fix(app): restore keyboard project switching in open sidebar (#18682)

2 files changed, 39 insertions, 1 deletions

diff --git a/packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts b/packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts
index 4dc5e6acd..1317d2bb6 100644
--- a/packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts
+++ b/packages/app/e2e/sidebar/sidebar-popover-actions.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from "../fixtures"
 import {
+  defocus,
   cleanupSession,
   cleanupTestProject,
   closeSidebar,
@@ -78,3 +79,40 @@ test("open sidebar project popover stays closed after clicking avatar", async ({
     await cleanupTestProject(other)
   }
 })
+
+test("open sidebar project switch activates on first tabbed enter", async ({ page, withProject }) => {
+  await page.setViewportSize({ width: 1400, height: 800 })
+
+  const other = await createTestProject()
+  const slug = dirSlug(other)
+
+  try {
+    await withProject(
+      async () => {
+        await openSidebar(page)
+        await defocus(page)
+
+        const project = page.locator(projectSwitchSelector(slug)).first()
+
+        await expect(project).toBeVisible()
+
+        let hit = false
+        for (let i = 0; i < 20; i++) {
+          hit = await project.evaluate((el) => {
+            return el.matches(":focus") || !!el.parentElement?.matches(":focus")
+          })
+          if (hit) break
+          await page.keyboard.press("Tab")
+        }
+
+        expect(hit).toBe(true)
+
+        await page.keyboard.press("Enter")
+        await waitSession(page, { directory: other })
+      },
+      { extra: [other] },
+    )
+  } finally {
+    await cleanupTestProject(other)
+  }
+})
diff --git a/packages/ui/src/components/hover-card.tsx b/packages/ui/src/components/hover-card.tsx
index 210fd5416..8330375aa 100644
--- a/packages/ui/src/components/hover-card.tsx
+++ b/packages/ui/src/components/hover-card.tsx
@@ -13,7 +13,7 @@ export function HoverCard(props: HoverCardProps) {
 
   return (
     <Kobalte gutter={4} {...rest}>
-      <Kobalte.Trigger as="div" data-slot="hover-card-trigger">
+      <Kobalte.Trigger as="div" data-slot="hover-card-trigger" tabIndex={-1}>
         {local.trigger}
       </Kobalte.Trigger>
       <Kobalte.Portal mount={local.mount}>