feat(a11y): add keyboard navigation support (#631)

[vibeetroot]

Related Issue

• Closes: Enhancement: Add keyboard navigation support across the app for accessibility #631

---

Description

-autoFocus on the GitHub Username input so users can start typing immediately on page load
-E-cape key clears the username input and returns focus to it
-focus-visible ring added to all Navbar buttons (theme toggle, mobile menu toggle)
-focus-visible ring added to the Hero "Start Tracking" CTA link
-Global :focus-visible CSS in index.css for consistent focus indicators across the app — suppresses outline for mouse users, shows it for keyboard users
-aria-label added to Tabs and Tab components for screen reader support```
---

### How Has This Been Tested?

-Manually tabbed through the entire app in Chrome and verified all interactive elements are reachable and show a visible focus ring
-Verified autoFocus lands on the username input on page load
-Verified Escape clears the input and returns focus
-Verified existing functionality (search, filters, tabs, pagination) is unaffected

---

### Screenshots 

<img width="1902" height="924" alt="image" src="https://github.com/user-attachments/assets/e4c8e3c4-17e8-432f-8c18-48f83d45af82" />


---

### Type of Change

- [Y] New feature


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Accessibility**
  * Enhanced keyboard navigation with improved focus indicators on buttons and form fields for better visibility.
  * Added Escape key support to quickly clear the GitHub username input.
  * Improved form labeling and added descriptive labels for tracker tabs to enhance screen reader support.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	ce25ba7
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a2261000939c4000885b049
😎 Deploy Preview	https://deploy-preview-715--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds keyboard navigation support and focus accessibility improvements across the app. Global CSS distinguishes keyboard from mouse focus, component CTAs and buttons gain focus-visible ring styling, and the Tracker page now includes username input keyboard handling, autofocus, and aria-labels for improved tab navigation.

Changes

Keyboard Navigation & Focus Accessibility

Layer / File(s)	Summary
Global focus styling foundation src/index.css	Global CSS rules suppress outline for mouse focus and apply a visible blue focus ring with offset for keyboard-navigated elements.
Navigation component focus indicators src/components/Hero.tsx, src/components/Navbar.tsx	Hero "Start Tracking" CTA and Navbar theme/menu toggle buttons gain focus-visible ring and offset styling for consistent keyboard focus feedback.
Tracker form and tabs accessibility src/pages/Tracker/Tracker.tsx	Username input gains useRef wiring and an onKeyDown handler that clears the username and refocuses the field when Escape is pressed. Input field now includes autofocus and aria-labels. Result tabs are enhanced with per-tab aria-labels reflecting issue/PR counts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• GitMetricsLab/github_tracker#316: Both PRs modify the Hero "Start Tracking" CTA styling in src/components/Hero.tsx to add or enhance focus-visible ring classes for keyboard accessibility.
• GitMetricsLab/github_tracker#330: Both PRs update button styling in src/components/Navbar.tsx for theme toggle and mobile menu controls, with focus-visible ring and accessibility improvements.
• GitMetricsLab/github_tracker#517: Both PRs modify the GitHub username input interaction in src/pages/Tracker/Tracker.tsx, including ref handling and input event behavior.

Suggested labels

type:accessibility, type:feature, level:intermediate, quality:clean

Poem

🐰 A rabbit hops through keyboard lanes,
Where focus rings now light the way,
No mouse required—tab and Escape remain,
Accessibility blooms bright today!
All users welcome, keystroke by keystroke, hooray! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change—adding keyboard navigation support (a11y feature) with a clear reference to the issue number.
Description check	✅ Passed	The description follows the template with all required sections populated: Related Issue, Description, How Has This Been Tested, Type of Change, and a screenshot. All key changes are documented.
Linked Issues check	✅ Passed	The PR successfully implements the core keyboard navigation requirements: auto-focus on search input, Escape key support, focus-visible styling for interactive elements, and aria-labels for screen readers. All coding objectives from issue #631 are addressed.
Out of Scope Changes check	✅ Passed	All code changes are directly aligned with the linked issue #631 objectives. Updates to Hero, Navbar, index.css, and Tracker components all target keyboard navigation and accessibility improvements with no extraneous changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 Thank you @vibeetroot for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 83-88: handleUsernameKeyDown clears username then incorrectly
calls usernameInputRef.current?.querySelector("input")?.focus(), which fails
because usernameInputRef.current is already the HTMLInputElement; change the
logic to call focus directly on the input ref
(usernameInputRef.current?.focus()) after setUsername, updating the
handleUsernameKeyDown callback to reference usernameInputRef.current.focus() and
keep dependencies (setUsername) intact.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f5e793b8-4ea5-4f37-92aa-4194bc44129e

📥 Commits

Reviewing files that changed from the base of the PR and between 53f820b and ce25ba7.

📒 Files selected for processing (4)

• src/components/Hero.tsx
• src/components/Navbar.tsx
• src/index.css
• src/pages/Tracker/Tracker.tsx