keyboard navigation for the swap interface list (roving tabindex)

[mikewheeleer]

Summary

The swap interface list isn't keyboard-navigable — every item is a tab stop and arrow keys do nothing. Implement roving-tabindex navigation with proper focus semantics.

Why this matters

A list that can't be driven by keyboard excludes power and AT users. Roving tabindex is the ARIA-correct, testable pattern.

Requirements

• One tab stop for the swap interface list; arrow keys move focus between items.
• Home/End jump to first/last; Enter/Space activate the focused item.
• Correct roles and tabindex management (roving).
• Focus is always visible.

Technical guidance

• Only the active item has tabindex=0; others -1.
• Keep focus in sync when the list changes.

Edge cases — each must have a test

• Tab -> enters the list at one item
• ArrowDown/Up -> moves focus
• Home/End -> first/last
• Enter -> activates
• focus ring always visible

Acceptance criteria

• All requirements and every edge case above implemented and covered by tests
• New unit and integration tests; existing tests still pass and no regressions
• Structured, typed errors (no leaked internals; stable codes)
• npm run lint, npm test, and npm run build all pass locally
• Code follows the repo's existing conventions; no duplication or dead code
• Short docs/comments explaining the design and any non-obvious decisions
• PR description explains the approach and includes Closes #<issue>

Out of scope

• Type-ahead search
• Drag-and-drop reordering

Rewards

Part of the GrantFox OSS / Official Campaign (FWC26) — this task may be rewarded. PR quality is assessed by AI: depth, correctness under edge cases, meaningful tests, and clean design are what earn the reward. Shallow changes (typos, formatting, trivial docs) do not qualify.

[guptakumarranjeet150]

Hi maintainers,

I can tackle keyboard navigation for the swap interface list (roving tabindex). Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in StableRoute-Org/Stableroute-frontend
• Implementation: Build keyboard navigation for the swap interface list (roving tabindex) with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• PR: Atomic commit with clean git hygiene and passing CI

Excited to work on this—please assign to me and I'll submit a clean PR shortly!