From 6816f3b17ca8368578bc3d223f872f20fcfff421 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <git@vladimir.berlin>
Date: Wed, 19 Aug 2026 15:51:48 +0900
Subject: [PATCH] feat(ui): navigate trace steps with keyboard and remove
 indirect editor focus (#11005)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode <noreply@opencode.ai>
---
 .../ui/client/components/trace/TraceView.vue  | 42 ++++++++++++++++++-
 .../ui/client/components/views/ViewEditor.vue |  7 ----
 test/ui/test/trace-stream.spec.ts             |  8 ++--
 test/ui/test/trace.spec.ts                    | 23 +++++++---
 test/ui/test/ui.spec.ts                       |  1 +
 5 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/packages/ui/client/components/trace/TraceView.vue b/packages/ui/client/components/trace/TraceView.vue
index 4286e840f..744debad2 100644
--- a/packages/ui/client/components/trace/TraceView.vue
+++ b/packages/ui/client/components/trace/TraceView.vue
@@ -29,6 +29,35 @@ function onSelectStep(index: number) {
   }
 }
 
+function onStepKeydown(event: KeyboardEvent, index: number) {
+  let nextIndex: number
+  if (event.key === 'ArrowUp') {
+    nextIndex = Math.max(index - 1, 0)
+  }
+  else if (event.key === 'ArrowDown') {
+    nextIndex = Math.min(index + 1, entries.value.length - 1)
+  }
+  else if (event.key === 'Home') {
+    nextIndex = 0
+  }
+  else if (event.key === 'End') {
+    nextIndex = entries.value.length - 1
+  }
+  else {
+    return
+  }
+
+  event.preventDefault()
+  if (nextIndex === index) {
+    return
+  }
+  onSelectStep(nextIndex)
+  const nextButton = (event.currentTarget as HTMLButtonElement).parentElement?.children[nextIndex]
+  if (nextButton instanceof HTMLButtonElement) {
+    nextButton.focus()
+  }
+}
+
 watch([selectedStep, iframeEl], ([step, iframe]) => {
   if (!step || !iframe) {
     return
@@ -143,18 +172,27 @@ function isTraceStepInProgress(step: NormalizedBrowserTraceEntry) {
     class="h-full min-h-0"
   >
     <Pane :size="30" min-size="20">
-      <div class="h-full min-h-0 p-4" flex="~ col gap-1" overflow-auto>
+      <div
+        class="h-full min-h-0 p-4"
+        flex="~ col gap-1"
+        overflow-auto
+        role="listbox"
+        aria-label="Trace steps"
+      >
         <button
           v-for="(step, index) of entries"
           :key="index"
           type="button"
+          role="option"
           data-testid="trace-step"
           :data-test-range="step.range?.phase"
           class="relative w-full text-left px-2 py-1 rounded text-sm"
           :class="getStepButtonClass(step, index)"
           :style="{ paddingInlineStart: `${0.5 + step.depth}rem` }"
-          :aria-current="selection.selectedStepIndex === index ? 'step' : undefined"
+          :aria-selected="selection.selectedStepIndex === index"
+          :tabindex="selection.selectedStepIndex === index ? 0 : -1"
           @click="onSelectStep(index)"
+          @keydown="onStepKeydown($event, index)"
         >
           <span
             v-if="step.depth > 0"
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
index b554e5970..397367fff 100644
--- a/packages/ui/client/components/views/ViewEditor.vue
+++ b/packages/ui/client/components/views/ViewEditor.vue
@@ -62,7 +62,6 @@ watch(
 
     await nextTick()
 
-    // fire focusing editor after loading
     loading.value = false
   },
   { immediate: true },
@@ -81,17 +80,11 @@ watch(() => [loading.value, saving.value, props.file, lineNumber.value, columnNu
         else {
           codemirrorRef.value?.scrollIntoView(line, 100)
           nextTick(() => {
-            codemirrorRef.value?.focus()
             codemirrorRef.value?.setCursor(line)
           })
         }
       })
     }
-    else {
-      nextTick(() => {
-        codemirrorRef.value?.focus()
-      })
-    }
   }
 }, { flush: 'post' })
 
diff --git a/test/ui/test/trace-stream.spec.ts b/test/ui/test/trace-stream.spec.ts
index c43cb6f93..48c0c71a1 100644
--- a/test/ui/test/trace-stream.spec.ts
+++ b/test/ui/test/trace-stream.spec.ts
@@ -66,7 +66,7 @@ test.describe('trace stream', () => {
     ])
 
     // first step is selected by default
-    await expect(traceSteps.nth(0)).toHaveAttribute('aria-current', 'step')
+    await expect(traceSteps.nth(0)).toHaveAttribute('aria-selected', 'true')
 
     // progresses up-to `render-b`
     await writeFile(resolve(gatesDir, 'b.txt'), 'open')
@@ -77,7 +77,7 @@ test.describe('trace stream', () => {
 
     // select next step
     await traceStepNames.nth(1).click()
-    await expect(traceSteps.nth(1)).toHaveAttribute('aria-current', 'step')
+    await expect(traceSteps.nth(1)).toHaveAttribute('aria-selected', 'true')
 
     // continue test and wait for finishes
     await writeFile(resolve(gatesDir, 'c.txt'), 'open')
@@ -89,7 +89,7 @@ test.describe('trace stream', () => {
       'test finished',
     ])
     // last selected step is preserved
-    await expect(traceSteps.nth(1)).toHaveAttribute('aria-current', 'step')
+    await expect(traceSteps.nth(1)).toHaveAttribute('aria-selected', 'true')
 
     // re-run and verify trace view is cleared
     await rm(gatesDir, { recursive: true, force: true })
@@ -100,7 +100,7 @@ test.describe('trace stream', () => {
     await expect.poll(() => traceStepNames.allInnerTexts()).toEqual([
       'render-a',
     ])
-    await expect(traceSteps.nth(0)).toHaveAttribute('aria-current', 'step')
+    await expect(traceSteps.nth(0)).toHaveAttribute('aria-selected', 'true')
     await writeFile(resolve(gatesDir, 'b.txt'), 'open')
     await writeFile(resolve(gatesDir, 'c.txt'), 'open')
     await expect.poll(() => traceStepNames.allInnerTexts()).toEqual([
diff --git a/test/ui/test/trace.spec.ts b/test/ui/test/trace.spec.ts
index ffdc9ae42..808e7e1d7 100644
--- a/test/ui/test/trace.spec.ts
+++ b/test/ui/test/trace.spec.ts
@@ -149,8 +149,9 @@ async function testBasic(page: Page) {
 
   // selecting steps should open source code view
   await expect(page.getByTestId('btn-report')).toContainClass('tab-button-active')
-  await traceStepNames.getByText('Render simple').click()
+  await traceSteps.nth(0).click()
   await expect(page.getByTestId('btn-code')).toContainClass('tab-button-active')
+  await expect(traceSteps.nth(0)).toBeFocused()
 
   // verify source location highlight
   const activeLine = page.getByTestId('editor').locator('.CodeMirror-activeline')
@@ -169,20 +170,32 @@ async function testBasic(page: Page) {
   // verify selector highlight
   await expect(traceFrame.getByTestId('trace-view-highlight')).toBeVisible()
 
-  // selecting 2nd trace step and verify again
-  await traceStepNames.getByText('Render another').click()
+  // selecting 2nd trace step with keyboard and verify again
+  await traceSteps.nth(0).press('ArrowDown')
   await expect(traceFrame.getByRole('button', { name: 'Another' })).toBeVisible()
   await expect(activeLine).toContainText('Render another')
-  await expect(traceSteps.nth(1)).toHaveAttribute('aria-current', 'step')
+  await expect(traceSteps.nth(1)).toBeFocused()
+  await expect(traceSteps.nth(1)).toHaveAttribute('aria-selected', 'true')
   await expect(traceEditorMarkers.nth(1)).not.toHaveAttribute('aria-current', 'step')
   await expect(traceEditorMarkers.nth(2)).toHaveAttribute('aria-current', 'step')
 
+  await traceSteps.nth(1).press('End')
+  await expect(traceSteps.nth(2)).toBeFocused()
+  await expect(traceSteps.nth(2)).toHaveAttribute('aria-selected', 'true')
+  await traceSteps.nth(2).press('ArrowDown')
+  await expect(traceSteps.nth(2)).toBeFocused()
+  await traceSteps.nth(2).press('Home')
+  await expect(traceSteps.nth(0)).toBeFocused()
+  await expect(traceSteps.nth(0)).toHaveAttribute('aria-selected', 'true')
+  await traceSteps.nth(0).press('ArrowUp')
+  await expect(traceSteps.nth(0)).toBeFocused()
+
   // selecting 1st trace step from editor and verify again
   await traceEditorMarkers.nth(1).click()
   await expect(traceFrame.getByRole('button', { name: 'Simple' })).toBeVisible()
   await expect(traceEditorMarkers.nth(1)).toHaveAttribute('aria-current', 'step')
   await expect(traceEditorMarkers.nth(2)).not.toHaveAttribute('aria-current', 'step')
-  await expect(traceSteps.nth(0)).toHaveAttribute('aria-current', 'step')
+  await expect(traceSteps.nth(0)).toHaveAttribute('aria-selected', 'true')
 
   // verify selecting another test switches trace viewer
   await openExplorerItem(page, 'switch-target')
diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts
index e3710863b..8b2bcfcd8 100644
--- a/test/ui/test/ui.spec.ts
+++ b/test/ui/test/ui.spec.ts
@@ -661,6 +661,7 @@ async function testWriteFile(page: Page, options: { enabled: boolean }) {
   await codeTabButton.click()
   const editor = page.getByTestId('editor')
   await expect(editor).toContainText('expect(1 + 1).toEqual(2)')
+  await editor.click()
   await expect(editor.locator('.CodeMirror-cursors')).toHaveCSS('visibility', options.enabled ? 'visible' : 'hidden')
   await page.keyboard.type('\n// edited \n')
   if (options.enabled) {
-- 
2.51.2