Skip to content

fix(app): focus the matching review navigation arrow - #59920

Merged
usrnk1 merged 4 commits into
devfrom
review-arrow-focus
Oct 29, 2026
Merged

usrnk1 merged 4 commits into
devfrom
review-arrow-focus

Conversation

@usrnk1

@usrnk1 usrnk1 commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

Issue for this PR

Reported in a desktop session; no matching open GitHub issue found.

Type of change

  • Bug fix

What does this PR do?

When a review navigation arrow already has focus, move focus to the matching previous/next button as arrow keys switch files. Preserve focus elsewhere. Previously, focus stayed on the last clicked arrow, so Enter could navigate in the wrong direction.

How did you verify your code works?

  • Regression fails on origin/dev; passes 10/10 against this change.
  • Extended regression also preserves focus on Home for both arrow keys; this case fails before the review follow-up and passes 10/10 after it.
  • App and session-ui bun typecheck pass; nearby unit tests pass (2/2).
  • Root bun run check passes (pre-push hook).
  • Before/after screenshots reviewed.
  • Full review suite previously passed 25/27; both other failures reproduce without the fix. Broader e2e typechecking also has pre-existing errors.

Visual

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" fill="none">
  <rect x="1" y="1" width="238" height="70" rx="10" stroke="currentColor" opacity=".15"/>
  <text x="18" y="41" fill="currentColor" font-size="12">Changes</text>
  <g stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M112 36H96m6-6-6 6 6 6M146 36h16m-6-6 6 6-6 6"/>
    <rect x="86" y="20" width="36" height="32" rx="7">
      <animate attributeName="x" values="86;86;138;138;86" keyTimes="0;.3;.4;.8;1" dur="3s" repeatCount="indefinite"/>
    </rect>
  </g>
  <text x="190" y="41" fill="currentColor" font-size="12" opacity=".6">1/3</text>
</svg>

Screenshots / recordings

Before (after pressing Right Arrow):

Focus remains on Previous file

After (same action):

Focus follows Next file

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed fixed: the new regression test fails on dev (Next file not focused after Right Arrow) and passes with this change (3/3). tsc for session-ui is clean.

Public API is unchanged.

One concern: the arrow-key listener is attached to the whole page (document), so this now moves focus into the review toolbar even when the user is focused somewhere else. In a quick probe I focused the sidebar's "Home" button and pressed Right Arrow. On dev, focus stays on Home; with this change it jumps to "Next file" (see inline comment).

if (!file) return
event.preventDefault()
cycle(file)
;(previous ? previousButton : nextButton)?.focus({ preventScroll: true })

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This listener is attached to the whole page (document), so the arrow keys now pull focus into the review toolbar from anywhere (e.g. a focused button in the sidebar or timeline). I checked this: focusing "Home" and pressing Right Arrow leaves focus on Home on dev, but moves it to "Next file" here. Could this only move focus when it is already on one of the arrows? For example:

const active = document.activeElement
if (active === previousButton || active === nextButton) (previous ? previousButton : nextButton)?.focus({ preventScroll: true })

That still fixes the Enter-goes-the-wrong-way case without taking focus away from elsewhere.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in 9961792. Focus now moves only when one of the review arrows already had focus; global file navigation otherwise preserves the current focus. Extended the existing regression with the Home-button case in both directions: it fails before this guard and passes 10/10 afterward. Both package typechecks and the root pre-push checks pass.

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The focus-stealing point is addressed: focus now moves only when one of the arrow buttons already has it. The extended regression test (which also checks that focus stays on Home) passes 3/3, and tsc for session-ui is clean. Public API is unchanged. No further concerns.

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new push only merges dev; this PR's own changes are the same as last time. The regression test still passes after the merge (2/2). Public API is unchanged. No further concerns.

@usrnk1
usrnk1 enabled auto-merge (squash) October 29, 2026 08:51

@opencodejr opencodejr Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This push only merges dev; this PR's own changes are the same as before. The earlier focus-stealing point stays addressed: focus moves only when an arrow button already has it. The regression test still passes after the merge. Public API is unchanged. No further concerns.

@usrnk1
usrnk1 merged commit 5093326 into dev Oct 29, 2026
20 checks passed
@usrnk1
usrnk1 deleted the review-arrow-focus branch October 29, 2026 08:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants