Add tabnav arrow-key navigation

[Baskarayelu]

Summary

Left/Right to move tabs, Home/End to jump to ends.

Background

Users who navigate with assistive technology (screen readers, keyboard-only, voice control, high-contrast modes) cannot fully use this surface today. The change should bring the behaviour in line with WCAG 2.1 AA and our internal accessibility checklist.

Acceptance criteria

• The change matches the summary above.
• Axe report attached to the PR shows zero violations on the affected route.
• Keyboard-only walkthrough recorded or described in the PR description.
• Lint, type-check, and tests all pass locally.
• PR description references this issue with Closes #<this-issue>.

Implementation hints

• Verify with at least one screen reader (VoiceOver on macOS / NVDA on Windows / TalkBack on Android).
• Verify keyboard-only operation: every interactive element must be reachable and operable without a pointer.
• Verify colour contrast meets WCAG AA (4.5:1 for text, 3:1 for UI components and graphical objects).
• Run axe (Playwright @axe-core/playwright or DevTools) on the affected route and attach the report to the PR.

Repo-specific notes

• Run npm run lint, npm run build, and the unit tests locally before pushing.
• If you change a public component prop, update the matching Storybook story and the docs/COMPONENTS.md entry.
• Respect the design tokens (CSS variables / Tailwind config); do not hard-code colours, spacing, or radii.

Out of scope

• Unrelated refactors in adjacent files.
• Stylistic-only changes (formatting, renaming) that are not required by the fix.
• Anything beyond the acceptance criteria above; surface follow-ups as separate issues.

How to claim and submit

1. Comment on this issue saying you'd like to take it on; wait for a maintainer to assign you (avoids duplicated effort).
2. Open a PR that references this issue (Closes #<this-issue>).
3. Make sure CI is green and request review from a CODEOWNERS maintainer.
4. PRs that close this issue and pass review may qualify for a reward — see the MAYBE REWARDED label and the GrantFox OSS campaign page.

---

Category: accessibility  ·  Campaign: GrantFox OSS · Official Campaign · Maybe Rewarded

[udeachudivine-spec]

@udeachudivine-spec has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to apply for this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @udeachudivine-spec to this issue.

[grantfox-oss]

🦊 GrantFox — @udeachudivine-spec has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #731)
2. Your PR will be reviewed by the Remitwise-Org maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @udeachudivine-spec! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @udeachudivine-spec: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊