fix(a11y): add visible focus rings to footer links (Closes #122)

[SakethSumanBathini]

Closes #122

A correction to the premise first

The footer doesn't have social icons. LandingPage.tsx:408-414 has a single GitHub link with a visible "GitHub" text label, sitting beside Terms and Privacy text links:

<a href="https://github.com/harsharajkumar/proofdesk" ...>
  <Github className="w-4 h-4" /> GitHub
</a>
<Link to="/terms" ...>Terms</Link>
<Link to="/privacy" ...>Privacy</Link>

There's no icon-only social row anywhere in the codebase — I checked for Twitter, LinkedIn, Discord and mail icons and found none. So "descriptive tooltips for each social icon" and "hover animations on icons" have nothing to apply to.

Two of the four proposals are real, and this PR does those.

What's fixed

Keyboard focus. None of the six footer links across the two footers had a visible focus ring — only the browser default, which is close to invisible against these muted greys (text-zinc-400). A keyboard user tabbing through the footer genuinely couldn't tell where they were.

Now using focus-visible:ring-2 focus-visible:ring-indigo-500 with an offset, matching the convention already established in EditorImportPane.tsx:360 rather than introducing a second focus style. focus-visible rather than focus means mouse clicks don't leave a ring behind.

Both footers, not one. The issue mentions the landing page footer; LegalPage.tsx has its own with three more links in the same state. Fixing one and leaving the other would be a strange result for anyone tabbing between the two pages.

A tooltip and a new-tab announcement on the GitHub link. rel="noopener noreferrer" was already correct, but nothing told a screen reader the link opens elsewhere — so there's now an sr-only note alongside the title, and the decorative icon is aria-hidden.

What I deliberately didn't do

The issue suggests transform: translateY(-3px) on hover. That link sits inline with Terms and Privacy — lifting it on hover would break the baseline alignment of the row. Transform animations suit standalone icon buttons, which is what the proposal had in mind; for text links in a row, the existing transition-colors is the right treatment and it's already there.

Happy to add a lift if the footer later gains a proper icon row.

Verification

npm run build in frontend/ completes cleanly. The change is CSS classes and two accessibility attributes — no logic touched.

Worth a manual check before merge: tab through the footer on both / and /terms and confirm the ring is visible in light and dark mode. I can't verify the rendered contrast from here.

Note on assignment

@asiya2123 filed this and is still assigned alongside me. I've asked on the issue whether they have work in progress — if so I'll close this in favour of theirs.

Summary by CodeRabbit

• Accessibility Improvements
  • Added visible keyboard focus indicators to footer links across landing and legal pages.
  • Improved screen-reader support for the GitHub link with descriptive text and hidden decorative imagery.
  • Added dark-mode-compatible focus styling while preserving existing hover and navigation behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 477a40af-b877-4ec4-8b25-e10f8791970f

📥 Commits

Reviewing files that changed from the base of the PR and between 859f0c5 and 62657bd.

📒 Files selected for processing (2)

• frontend/src/components/LandingPage.tsx
• frontend/src/components/LegalPage.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (1)

• GitHub Check: test

🔇 Additional comments (2)

frontend/src/components/LandingPage.tsx (1)

409-424: LGTM!

frontend/src/components/LegalPage.tsx (1)

58-60: LGTM!

---

📝 Walkthrough

Walkthrough

Footer links on the landing and legal pages now show keyboard focus indicators. The GitHub link also includes accessible external-link labeling and hides its decorative icon from assistive technology.

Changes

Footer accessibility

Layer / File(s)	Summary
Footer link focus and semantics frontend/src/components/LandingPage.tsx, frontend/src/components/LegalPage.tsx	Footer links now use visible focus styling. The GitHub link includes an accessible title and screen-reader text, while its decorative icon is hidden from assistive technology.

Estimated code review effort: 1 (Trivial) | ~4 minutes

Suggested reviewers: harsharajkumar-273

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR adds focus rings and tooltip-related accessibility improvements, but it does not implement the linked issue's hover animations or smooth interaction transitions.	Add hover animations and smooth hover/focus transitions, or update issue scope with explicit approval for the reduced implementation.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main accessibility change: visible focus rings for footer links.
Out of Scope Changes check	✅ Passed	All reported changes support footer-link accessibility and remain within the scope of issue #122.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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.}