fix: add noopener noreferrer and aria-labels to external links

[JaiswalShivang]

Description

This PR addresses security and accessibility issues found in the external links within the Footer and About components.

• Security: Added rel="noopener noreferrer" to all links using target="_blank" to prevent reverse tabnabbing vulnerabilities.
• Accessibility: Added descriptive aria-label attributes to all icon-only social links (using React Icons) so they are properly announced by screen readers.

Fixes #124

Type of change

• Bug fix (non-breaking CHANGE which fixes an issue)

How Has This Been Tested?

• Production Build Check: Ran npm run build to ensure the production build compiles successfully. (Note: The warnings generated during the build are related to deprecated Next.js metadata in the layout.js/page.js files, not this PR).
• Manual DOM Verification: Spun up the local dev server and verified via browser DevTools that the anchor tags now correctly contain the rel and aria-label attributes without altering the visual UI.
• (Note: npm test was skipped as there is currently no test script configured in package.json.)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

Maintainer Checklist

• closes Security Vulnerability & Accessibility: External links missing rel="noopener" and aria-labels #124
• Tag the PR with the appropriate labels

Summary by CodeRabbit

• Bug Fixes
  • Enhanced accessibility of social media links with improved screen reader support and descriptive labels.
  • Strengthened security of external links with enhanced safe handling practices.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c4341f2f-2509-435c-8d61-7d736664e8d6

📥 Commits

Reviewing files that changed from the base of the PR and between ee40ec9 and c058e53.

📒 Files selected for processing (1)

• app/components/About/About.jsx

---

📝 Walkthrough

Walkthrough

This PR adds security and accessibility attributes to external social links in About.jsx. The changes include adding aria-label attributes to all social links and applying target="_blank" with rel="noopener noreferrer" to external links. No functional logic modifications are made.

Changes

Cohort / File(s)	Summary
Security & Accessibility Enhancements app/components/About/About.jsx	Added rel="noopener noreferrer" to external links and aria-label attributes to mailto and social media links (GitHub, GitLab, Discord, X) for improved security and screen reader accessibility.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• fix(hero): open AOSSIE link in new tab #90: Applies identical security and accessibility attribute changes to external links in Hero.js component.

Suggested labels

enhancement, good first issue

Suggested reviewers

• M4dhav

Poem

🐰 Links now safer, dressed in care,
noopener guards from attacks unfair,
Aria-labels sing their names so clear,
Accessibility blooms for all to hear! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR partially addresses issue #124: it adds rel='noopener noreferrer' and aria-labels to external links in About.jsx, but does not modify Footer.js which is also mentioned in the issue.	Apply the same security and accessibility fixes to Footer.js links as specified in issue #124 to fully resolve the vulnerability and accessibility concerns.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately summarizes the main changes: adding security attributes (noopener noreferrer) and accessibility labels (aria-labels) to external links, which matches the actual modifications in About.jsx.
Out of Scope Changes check	✅ Passed	All changes in About.jsx are directly related to issue #124's requirements: adding rel='noopener noreferrer' and descriptive aria-labels to external links for security and accessibility.
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
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can make CodeRabbit's review stricter and more nitpicky using the `assertive` profile, if that's what you prefer.

Change the reviews.profile setting to assertive to make CodeRabbit's nitpick more issues in your PRs.