From b58f1baf5a15757ef564c51010725345a2e3fbdf Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:05:51 +0900
Subject: [PATCH 1/4] feat(ui): navigate explorer with keyboard

Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
---
 .../client/components/explorer/Explorer.vue   | 171 +++++++++++++++++-
 .../components/explorer/ExplorerItem.vue      |   5 +
 test/ui/test/ui.spec.ts                       |  53 ++++++
 3 files changed, 225 insertions(+), 4 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 3b40697cc0ec..357101e27af5 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { RunnerTestFile as File, RunnerTask as Task } from 'vitest'
+import type { UITaskTreeNode } from '~/composables/explorer/types'
 import { hideAllPoppers } from 'floating-vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import { RecycleScroller } from 'vue-virtual-scroller'
-import { availableProjects, config } from '~/composables/client'
+import { availableProjects, client, config } from '~/composables/client'
+import { explorerTree } from '~/composables/explorer'
 import { useSearch } from '~/composables/explorer/search'
 import { ALL_PROJECTS, projectSort } from '~/composables/explorer/state'
 import { activeFileId, selectedTest } from '~/composables/params'
@@ -38,6 +40,12 @@ const slowTime = computed(() => {
 const searchBox = ref<HTMLInputElement | undefined>()
 const selectProjectRef = ref<HTMLSelectElement | undefined>()
 const sortProjectRef = ref<HTMLSelectElement | undefined>()
+const scrollerRef = ref<{
+  el?: HTMLElement
+  scrollToItem: (index: number, options?: { align?: 'nearest' }) => void
+}>()
+const focusedTaskId = ref<string>()
+const selectedTaskId = ref<string>()
 
 const {
   initialized,
@@ -62,6 +70,143 @@ const {
   disableClearProjectSort,
   searchMatcher,
 } = useSearch(searchBox, selectProjectRef, sortProjectRef)
+
+const activeTaskId = computed(() => {
+  if (uiEntries.value.some(item => item.id === focusedTaskId.value)) {
+    return focusedTaskId.value
+  }
+  if (selectedTest.value && uiEntries.value.some(item => item.id === selectedTest.value)) {
+    return selectedTest.value
+  }
+  if (uiEntries.value.some(item => item.id === activeFileId.value)) {
+    return activeFileId.value
+  }
+  return uiEntries.value[0]?.id
+})
+
+const treeItemAria = computed(() => {
+  const siblings = new Map<string, UITaskTreeNode[]>()
+  for (const item of uiEntries.value) {
+    const entries = siblings.get(item.parentId) ?? []
+    entries.push(item)
+    siblings.set(item.parentId, entries)
+  }
+
+  const metadata = new Map<string, { posinset: number; setsize: number }>()
+  for (const entries of siblings.values()) {
+    for (let i = 0; i < entries.length; i++) {
+      metadata.set(entries[i].id, { posinset: i + 1, setsize: entries.length })
+    }
+  }
+  return metadata
+})
+
+function isSelected(taskId: string) {
+  const selectedId = selectedTaskId.value ?? selectedTest.value ?? activeFileId.value
+  return selectedId === taskId
+}
+
+function getTreeItemElement(taskId: string) {
+  return document.getElementById(`explorer-item-${taskId}`)
+}
+
+function nextFrame() {
+  return new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+}
+
+async function selectItem(index: number) {
+  const item = uiEntries.value[index]
+  const task = item && client.state.idMap.get(item.id)
+  if (!item || !task) {
+    return
+  }
+
+  selectedTaskId.value = item.id
+  onItemClick?.(task)
+  if (!getTreeItemElement(item.id)) {
+    scrollerRef.value?.scrollToItem(index, { align: 'nearest' })
+    await nextTick()
+    await nextFrame()
+  }
+  focusedTaskId.value = item.id
+}
+
+function onTreeKeydown(event: KeyboardEvent) {
+  const target = event.target
+  if (!(target instanceof HTMLElement) || target.getAttribute('role') !== 'tree') {
+    return
+  }
+
+  const index = uiEntries.value.findIndex(item => item.id === activeTaskId.value)
+  const item = uiEntries.value[index]
+  if (!item) {
+    return
+  }
+
+  let nextIndex: number | undefined
+  if (event.key === 'ArrowUp') {
+    nextIndex = Math.max(index - 1, 0)
+  }
+  else if (event.key === 'ArrowDown') {
+    nextIndex = Math.min(index + 1, uiEntries.value.length - 1)
+  }
+  else if (event.key === 'Home') {
+    nextIndex = 0
+  }
+  else if (event.key === 'End') {
+    nextIndex = uiEntries.value.length - 1
+  }
+  else if (event.key === 'ArrowRight') {
+    if (item.expandable && !item.expanded) {
+      explorerTree.expandNode(item.id)
+    }
+    else if (uiEntries.value[index + 1]?.indent > item.indent) {
+      nextIndex = index + 1
+    }
+  }
+  else if (event.key === 'ArrowLeft') {
+    if (item.expandable && item.expanded) {
+      explorerTree.collapseNode(item.id)
+    }
+    else {
+      nextIndex = uiEntries.value.findIndex(entry => entry.id === item.parentId)
+    }
+  }
+  else if (event.key === 'Enter') {
+    const task = client.state.idMap.get(item.id)
+    if (task) {
+      selectedTaskId.value = item.id
+      onItemClick?.(task)
+    }
+  }
+  else if (event.key !== ' ') {
+    return
+  }
+
+  event.preventDefault()
+  if (nextIndex !== undefined && nextIndex >= 0 && nextIndex !== index) {
+    selectItem(nextIndex)
+  }
+}
+
+function onTreeFocus(event: FocusEvent) {
+  if (event.target === event.currentTarget && !focusedTaskId.value) {
+    focusedTaskId.value = activeTaskId.value
+  }
+}
+
+function onTreeBlur(event: FocusEvent) {
+  if (event.target === event.currentTarget) {
+    focusedTaskId.value = undefined
+    selectedTaskId.value = undefined
+  }
+}
+
+function onTreeItemClick(taskId: string) {
+  focusedTaskId.value = taskId
+  selectedTaskId.value = taskId
+  scrollerRef.value?.el?.focus()
+}
 </script>
 
 <template>
@@ -314,21 +459,38 @@ const {
         </template>
         <template v-else>
           <RecycleScroller
+            ref="scrollerRef"
             class="scrolls"
             flex-auto
             key-field="id"
+            role="tree"
+            aria-label="Test explorer"
+            tabindex="0"
+            :aria-activedescendant="activeTaskId ? `explorer-item-${activeTaskId}` : undefined"
             :item-size="28"
             :items="uiEntries"
             :buffer="100"
             @scroll.passive="hideAllPoppers"
+            @blur="onTreeBlur"
+            @focus="onTreeFocus"
+            @keydown="onTreeKeydown"
           >
-            <template #default="{ item }">
+            <template #default="{ item, active }">
               <ExplorerItem
+                :id="active ? `explorer-item-${item.id}` : undefined"
                 class="h-28px m-0 p-0"
                 :task-id="item.id"
                 :expandable="item.expandable"
                 :type="item.type"
                 :current="activeFileId === item.id"
+                :role="active ? 'treeitem' : undefined"
+                :aria-hidden="active ? undefined : true"
+                :aria-level="active ? item.indent + 1 : undefined"
+                :aria-posinset="active ? treeItemAria.get(item.id)?.posinset : undefined"
+                :aria-setsize="active ? treeItemAria.get(item.id)?.setsize : undefined"
+                :aria-expanded="active && item.expandable ? item.expanded : undefined"
+                :aria-selected="active ? isSelected(item.id) : undefined"
+                :data-active="active && activeTaskId === item.id"
                 :indent="item.indent"
                 :name="item.name"
                 :typecheck="item.typecheck === true"
@@ -339,8 +501,9 @@ const {
                 :slow="item.slow === true"
                 :opened="item.expanded"
                 :disable-task-location="!includeTaskLocation"
-                :class="selectedTest === item.id || (!selectedTest && activeFileId === item.id) ? 'bg-active' : ''"
+                :class="isSelected(item.id) ? 'bg-active' : ''"
                 :on-item-click="onItemClick"
+                @click="onTreeItemClick(item.id)"
               />
             </template>
           </RecycleScroller>
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 5215b69ea8de..fe49809773b4 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -196,6 +196,7 @@ const tagsBgGradient = computed(() => {
     class="item-wrapper"
     :style="gridStyles"
     :aria-label="name"
+    :data-task-id="taskId"
     :data-current="current"
     data-testid="explorer-item"
     @click="onItemClick?.(task)"
@@ -300,4 +301,8 @@ const tagsBgGradient = computed(() => {
 .item-wrapper:hover .test-actions {
   display: flex;
 }
+.item-wrapper[data-active="true"] {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}
 </style>
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 8b2bcfcd8b0a..51bf6b6970df 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -141,6 +141,59 @@ test.describe('ui', () => {
     await expect(getExplorerItem(page, 'nested suite')).toBeVisible()
   })
 
+  test('navigates the explorer with keyboard', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    const suite = getExplorerItem(page, 'suite')
+    const nestedSuite = getExplorerItem(page, 'nested suite')
+    const tree = page.getByRole('tree', { name: 'Test explorer' })
+    await suite.click()
+    await expect(tree).toBeFocused()
+    await expect(tree).toHaveAttribute('aria-activedescendant', await suite.getAttribute('id') as string)
+
+    await tree.press('ArrowLeft')
+    await expect(tree).toBeFocused()
+    await expect(nestedSuite).not.toBeVisible()
+
+    await tree.press('ArrowRight')
+    await expect(tree).toBeFocused()
+    await expect(nestedSuite).toBeVisible()
+    await tree.press('ArrowRight')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await nestedSuite.getAttribute('id') as string)
+    await expect(nestedSuite).toHaveAttribute('aria-selected', 'true')
+
+    const testItem = getExplorerItem(page, 'test')
+    await tree.press('ArrowDown')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await testItem.getAttribute('id') as string)
+    await expect(testItem).toHaveAttribute('aria-selected', 'true')
+    await expect(page).toHaveURL(/test=/)
+    await tree.press('ArrowUp')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await nestedSuite.getAttribute('id') as string)
+
+    await tree.press('ArrowLeft')
+    await expect(testItem).not.toBeVisible()
+    await tree.press('ArrowLeft')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await suite.getAttribute('id') as string)
+
+    await page.setViewportSize({ width: 1000, height: 500 })
+    await expect(getExplorerItem(page, 'zz-last-file.test.ts')).not.toBeVisible()
+    const previousItemId = await tree.getAttribute('aria-activedescendant')
+    await tree.press('End')
+    await expect.poll(() => tree.getAttribute('aria-activedescendant')).not.toBe(previousItemId)
+    const lastItemId = await tree.getAttribute('aria-activedescendant') as string
+    const lastItem = page.locator(`#${lastItemId}`)
+    await expect(lastItem).toBeVisible()
+    await expect(lastItem).toHaveAttribute('aria-selected', 'true')
+    await tree.press('ArrowDown')
+    await expect(tree).toHaveAttribute('aria-activedescendant', lastItemId)
+
+    await tree.press('Home')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await getExplorerItem(page, 'aa-first-file.test.ts').getAttribute('id') as string)
+    await expect(getExplorerItem(page, 'aa-first-file.test.ts')).toHaveAttribute('aria-selected', 'true')
+    await tree.press('ArrowUp')
+    await expect(tree).toHaveAttribute('aria-activedescendant', await getExplorerItem(page, 'aa-first-file.test.ts').getAttribute('id') as string)
+  })
+
   test('error', async ({ page }) => {
     await page.goto(pageUrl)
     await testError(page)

From b1b4d728c9fe513f7eff13671414368077d08097 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:07:19 +0900
Subject: [PATCH 2/4] fix(ui): stabilize explorer key navigation

Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
---
 .../ui/client/components/explorer/Explorer.vue     | 14 ++++----------
 .../ui/client/components/explorer/ExplorerItem.vue |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 357101e27af5..13cc371d1a15 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -2,7 +2,7 @@
 import type { RunnerTestFile as File, RunnerTask as Task } from 'vitest'
 import type { UITaskTreeNode } from '~/composables/explorer/types'
 import { hideAllPoppers } from 'floating-vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { RecycleScroller } from 'vue-virtual-scroller'
 import { availableProjects, client, config } from '~/composables/client'
@@ -110,25 +110,19 @@ function getTreeItemElement(taskId: string) {
   return document.getElementById(`explorer-item-${taskId}`)
 }
 
-function nextFrame() {
-  return new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
-}
-
-async function selectItem(index: number) {
+function selectItem(index: number) {
   const item = uiEntries.value[index]
   const task = item && client.state.idMap.get(item.id)
   if (!item || !task) {
     return
   }
 
-  selectedTaskId.value = item.id
-  onItemClick?.(task)
   if (!getTreeItemElement(item.id)) {
     scrollerRef.value?.scrollToItem(index, { align: 'nearest' })
-    await nextTick()
-    await nextFrame()
   }
   focusedTaskId.value = item.id
+  selectedTaskId.value = item.id
+  onItemClick?.(task)
 }
 
 function onTreeKeydown(event: KeyboardEvent) {
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index fe49809773b4..ae84856632a4 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -196,7 +196,6 @@ const tagsBgGradient = computed(() => {
     class="item-wrapper"
     :style="gridStyles"
     :aria-label="name"
-    :data-task-id="taskId"
     :data-current="current"
     data-testid="explorer-item"
     @click="onItemClick?.(task)"
@@ -208,6 +207,7 @@ const tagsBgGradient = computed(() => {
       <button
         v-if="type === 'file' || type === 'suite'"
         type="button"
+        tabindex="-1"
         class="w-full h-full flex items-center"
         :aria-label="`${opened ? 'Collapse' : 'Expand'} ${name}`"
         @click.stop="toggleOpen"

From f0708ff773c952f728369be62156ea4ce3951357 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:11:45 +0900
Subject: [PATCH 3/4] fix(ui): sync virtual explorer focus

Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
---
 .../client/components/explorer/Explorer.vue   | 28 +++++++++++++++----
 test/ui/test/ui.spec.ts                       | 12 ++++++--
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 13cc371d1a15..987e11950793 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -2,7 +2,7 @@
 import type { RunnerTestFile as File, RunnerTask as Task } from 'vitest'
 import type { UITaskTreeNode } from '~/composables/explorer/types'
 import { hideAllPoppers } from 'floating-vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import { RecycleScroller } from 'vue-virtual-scroller'
 import { availableProjects, client, config } from '~/composables/client'
@@ -45,6 +45,7 @@ const scrollerRef = ref<{
   scrollToItem: (index: number, options?: { align?: 'nearest' }) => void
 }>()
 const focusedTaskId = ref<string>()
+const ariaActiveTaskId = ref<string>()
 const selectedTaskId = ref<string>()
 
 const {
@@ -110,6 +111,19 @@ function getTreeItemElement(taskId: string) {
   return document.getElementById(`explorer-item-${taskId}`)
 }
 
+async function updateAriaActiveTask(taskId: string, index: number) {
+  if (!getTreeItemElement(taskId)) {
+    scrollerRef.value?.scrollToItem(index, { align: 'nearest' })
+    for (let i = 0; i < 3 && !getTreeItemElement(taskId); i++) {
+      await nextTick()
+      await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+    }
+  }
+  if (focusedTaskId.value === taskId && getTreeItemElement(taskId)) {
+    ariaActiveTaskId.value = taskId
+  }
+}
+
 function selectItem(index: number) {
   const item = uiEntries.value[index]
   const task = item && client.state.idMap.get(item.id)
@@ -117,12 +131,10 @@ function selectItem(index: number) {
     return
   }
 
-  if (!getTreeItemElement(item.id)) {
-    scrollerRef.value?.scrollToItem(index, { align: 'nearest' })
-  }
   focusedTaskId.value = item.id
   selectedTaskId.value = item.id
   onItemClick?.(task)
+  void updateAriaActiveTask(item.id, index)
 }
 
 function onTreeKeydown(event: KeyboardEvent) {
@@ -186,18 +198,24 @@ function onTreeKeydown(event: KeyboardEvent) {
 function onTreeFocus(event: FocusEvent) {
   if (event.target === event.currentTarget && !focusedTaskId.value) {
     focusedTaskId.value = activeTaskId.value
+    const index = uiEntries.value.findIndex(item => item.id === focusedTaskId.value)
+    if (focusedTaskId.value && index >= 0) {
+      void updateAriaActiveTask(focusedTaskId.value, index)
+    }
   }
 }
 
 function onTreeBlur(event: FocusEvent) {
   if (event.target === event.currentTarget) {
     focusedTaskId.value = undefined
+    ariaActiveTaskId.value = undefined
     selectedTaskId.value = undefined
   }
 }
 
 function onTreeItemClick(taskId: string) {
   focusedTaskId.value = taskId
+  ariaActiveTaskId.value = taskId
   selectedTaskId.value = taskId
   scrollerRef.value?.el?.focus()
 }
@@ -460,7 +478,7 @@ function onTreeItemClick(taskId: string) {
             role="tree"
             aria-label="Test explorer"
             tabindex="0"
-            :aria-activedescendant="activeTaskId ? `explorer-item-${activeTaskId}` : undefined"
+            :aria-activedescendant="ariaActiveTaskId ? `explorer-item-${ariaActiveTaskId}` : undefined"
             :item-size="28"
             :items="uiEntries"
             :buffer="100"
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index 51bf6b6970df..5e73b18b8aed 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -177,6 +177,12 @@ test.describe('ui', () => {
 
     await page.setViewportSize({ width: 1000, height: 500 })
     await expect(getExplorerItem(page, 'zz-last-file.test.ts')).not.toBeVisible()
+    await tree.press('End')
+    await tree.press('Home')
+    const firstItem = getExplorerItem(page, 'aa-first-file.test.ts')
+    const firstItemId = await firstItem.getAttribute('id') as string
+    await expect(tree).toHaveAttribute('aria-activedescendant', firstItemId)
+
     const previousItemId = await tree.getAttribute('aria-activedescendant')
     await tree.press('End')
     await expect.poll(() => tree.getAttribute('aria-activedescendant')).not.toBe(previousItemId)
@@ -188,10 +194,10 @@ test.describe('ui', () => {
     await expect(tree).toHaveAttribute('aria-activedescendant', lastItemId)
 
     await tree.press('Home')
-    await expect(tree).toHaveAttribute('aria-activedescendant', await getExplorerItem(page, 'aa-first-file.test.ts').getAttribute('id') as string)
-    await expect(getExplorerItem(page, 'aa-first-file.test.ts')).toHaveAttribute('aria-selected', 'true')
+    await expect(tree).toHaveAttribute('aria-activedescendant', firstItemId)
+    await expect(firstItem).toHaveAttribute('aria-selected', 'true')
     await tree.press('ArrowUp')
-    await expect(tree).toHaveAttribute('aria-activedescendant', await getExplorerItem(page, 'aa-first-file.test.ts').getAttribute('id') as string)
+    await expect(tree).toHaveAttribute('aria-activedescendant', firstItemId)
   })
 
   test('error', async ({ page }) => {

From afaa6cc549a16347b41f029d71ece1806202a2ac Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:44:02 +0900
Subject: [PATCH 4/4] refactor(ui): reuse explorer selection style

Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
---
 packages/ui/client/components/explorer/Explorer.vue     | 1 -
 packages/ui/client/components/explorer/ExplorerItem.vue | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 987e11950793..56587b0123dd 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -502,7 +502,6 @@ function onTreeItemClick(taskId: string) {
                 :aria-setsize="active ? treeItemAria.get(item.id)?.setsize : undefined"
                 :aria-expanded="active && item.expandable ? item.expanded : undefined"
                 :aria-selected="active ? isSelected(item.id) : undefined"
-                :data-active="active && activeTaskId === item.id"
                 :indent="item.indent"
                 :name="item.name"
                 :typecheck="item.typecheck === true"
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index ae84856632a4..9786e9c15550 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -301,8 +301,4 @@ const tagsBgGradient = computed(() => {
 .item-wrapper:hover .test-actions {
   display: flex;
 }
-.item-wrapper[data-active="true"] {
-  outline: 2px solid currentColor;
-  outline-offset: -2px;
-}
 </style>