fix: consistent focus outlines for header and footer

[cnaples79]

Summary

• add visible focus styles to header logo and menu button to avoid clipped outlines
• adjust footer accordion and links to prevent overflow clipping and add consistent focus-visible outlines

Rationale

• focus indicators for keyboard users were clipped around the header logo and footer links (issue UI/A11y: Inconsistent and clipped focus-visible outlines across Header and Footer #3561); updated styles ensure outlines stay visible and consistent

Changes

• header: add rounded focus-visible outlines to logo link and mobile menu toggle
• footer: remove overflow clipping when closed; add focus-visible outlines to section buttons, footer links, and social icons

Tests

• ran locally

Fixes #3561

[github-actions]

The linked issue must be assigned to the PR author.

[coderabbitai]

Summary by CodeRabbit

• Style

  • Enhanced visual styling across the interface with rounded corners on interactive elements.
  • Improved content visibility behavior in collapsible sections with better overflow handling.

• Accessibility

  • Added focus-visible outlines to buttons and links throughout the interface for improved keyboard navigation visibility.
  • Ensured consistent focus styling across all interactive components.

Walkthrough

Added focus-visible outlines, rounded corners, and overflow/max-height adjustments to interactive elements in Header and Footer to ensure consistent, non-clipped focus indicators and improved collapsible section behavior.

Changes

Cohort / File(s)	Summary
Header interactive elements frontend/src/components/Header.tsx	Added rounded-lg and focus-visible outline classes to logo Link elements and the mobile menu toggle Button. Mirrors styling between desktop and mobile logo links.
Footer interactive elements & collapsibles frontend/src/components/Footer.tsx	Applied focus-visible outlines and rounding to section toggle button, links, social icons, and bottom release link; updated collapsible content to use max-h-96 when open, overflow-hidden when closed, and lg:overflow-visible to prevent clipped focus rings.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Added Bluesky, GitHub, and Slack Icons to OWASP Nest Footer #1198: Modifies frontend/src/components/Footer.tsx (social icons and links) — overlaps with footer styling changes.
• Sidebar migration to chakra ui #1113: Touches frontend/src/components/Header.tsx mobile menu/header implementation — relates to header/mobile menu styling changes.
• fix(frontend): make dev footer version link to commit #3914: Updates footer version/release link logic in frontend/src/components/Footer.tsx — overlaps with the footer bottom release link edits.

Suggested reviewers

• kasya

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding consistent focus outlines to header and footer components, which aligns with the primary objective of the changeset.
Description check	✅ Passed	The description is well-related to the changeset, providing clear summary, rationale, and changes made to address focus outline issues in header and footer components.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #3561: adds focus-visible outlines to header logo and mobile menu button [#3561], removes overflow clipping in footer [#3561], and adds consistent focus-visible outlines to footer links and social icons [#3561].
Out of Scope Changes check	✅ Passed	All changes are in-scope and directly address the linked issue #3561. Header changes target the logo and menu button focus styles, footer changes target accordion overflow and focus styles on links and icons, with no unrelated modifications detected.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

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

96-106: Consider adding focus-visible outlines to the remaining nav links for full consistency.

The desktop header links (here) and mobile sidebar links (lines 193–219) don't receive the same focus-visible:outline treatment applied to the logo and menu toggle. Since the linked issue (#3561) calls for consistent focus indicators on all interactive elements in the header, these links may still show default or inconsistent focus rings.

This can be a follow-up if the browser defaults are deemed acceptable for now.

frontend/src/components/Footer.tsx (2)

45-49: Open state drops overflow-hidden — focus outlines won't clip, but the expand animation may look abrupt on mobile.

When openSection === section.title, there's no overflow-hidden, so the max-h transition from 0 → 96 won't mask the content as it slides in — links may pop into view rather than smoothly revealing. If a polished slide-open effect matters, you could toggle overflow-hidden off only after the transition ends (e.g., via onTransitionEnd). That said, if the current visual is acceptable, this trade-off for unclipped focus rings is reasonable.

---

57-57: Consider extracting the repeated focus-visible class string into a shared constant.

The pattern "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" is repeated four times in this file (Lines 30, 57, 83, 99), and Lines 57 and 99 share an identical full className. A constant (or a small utility like clsx) would reduce duplication and make future tweaks (e.g., changing outline color) a single-point change.

♻️ Example extraction

+const focusOutline =
+  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500'
+const footerLinkClasses = `rounded-md text-slate-600 hover:text-slate-900 ${focusOutline} dark:text-slate-400 dark:hover:text-slate-100`

Then reuse footerLinkClasses on Lines 57 and 99, and compose focusOutline into the button and social icon class strings.

Also applies to: 83-83, 99-99

---

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

[cubic-dev-ai]

No issues found across 2 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[arkid15r]

@kasya could you verify this one?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.79%. Comparing base (9164caa) to head (15b7412).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3950   +/-   ##
=======================================
  Coverage   99.79%   99.79%           
=======================================
  Files         517      517           
  Lines       15914    15914           
  Branches     2127     2127           
=======================================
  Hits        15881    15881           
  Misses          3        3           
  Partials       30       30           

Flag	Coverage Δ
backend	100.00% <ø> (ø)
frontend	99.16% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
frontend/src/components/Footer.tsx	100.00% <100.00%> (ø)
frontend/src/components/Header.tsx	100.00% <100.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9164caa...15b7412. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kasya]

@cnaples79 hi! Thanks for working on this 👍🏼
I can still see focus ring a bit cut off on the logo, but I think that's fine as is to be honest.

And I do like your updates to footer focus and mobile toggle button 🔥