Skip to content

fix: add target blank and rel noopener to external footer links #653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zahnentferner merged 1 commit into from
Mar 14, 2026
Merged

fix: add target blank and rel noopener to external footer links #653

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/shared/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,19 @@ export function Footer() {
<Link aria-label="Contact by Mail" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />
</Link>
<Link aria-label="Follow on GitHub" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
<Link aria-label="Follow on GitHub" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size='xl' />
</Link>
<Link aria-label="Join on Discord" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
<Link aria-label="Join on Discord" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on LinkedIn" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/'>
<Link aria-label="Follow on LinkedIn" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faLinkedin} size='xl' />
</Link>
<Link aria-label="Follow on X (Twitter)" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org'>
<Link aria-label="Follow on X (Twitter)" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faXTwitter} size='xl' />
</Link>
<Link aria-label="Subscribe on YouTube" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org'>
<Link aria-label="Subscribe on YouTube" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faYoutube} size='xl' />
Comment on lines +62 to 75
Copy link

@coderabbitai coderabbitai bot Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Expose the new-tab behavior in the accessible name.

These icon-only links now open a new browsing context, but the aria-labels still read like normal navigation. Please append something like “(opens in a new tab)” so screen-reader users get the same behavior cue.

♿ Suggested update 
-                  <Link aria-label="Follow on GitHub" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
+                  <Link aria-label="Follow on GitHub (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faGithub} size='xl' />
                   </Link>
-                  <Link aria-label="Join on Discord" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn' target="_blank" rel="noopener noreferrer">
+                  <Link aria-label="Join on Discord (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn' target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faDiscord} size='xl' />
                   </Link>
-                  <Link aria-label="Follow on LinkedIn" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/' target="_blank" rel="noopener noreferrer">
+                  <Link aria-label="Follow on LinkedIn (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/' target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faLinkedin} size='xl' />
                   </Link>
-                  <Link aria-label="Follow on X (Twitter)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org' target="_blank" rel="noopener noreferrer">
+                  <Link aria-label="Follow on X (Twitter) (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org' target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faXTwitter} size='xl' />
                   </Link>
-                  <Link aria-label="Subscribe on YouTube" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org' target="_blank" rel="noopener noreferrer">
+                  <Link aria-label="Subscribe on YouTube (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org' target="_blank" rel="noopener noreferrer">
                     <FontAwesomeIcon icon={faYoutube} size='xl' />
                   </Link>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Link aria-label="Follow on GitHub" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size='xl' />
</Link>
<Link aria-label="Join on Discord" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
<Link aria-label="Join on Discord" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on LinkedIn" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/'>
<Link aria-label="Follow on LinkedIn" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faLinkedin} size='xl' />
</Link>
<Link aria-label="Follow on X (Twitter)" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org'>
<Link aria-label="Follow on X (Twitter)" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faXTwitter} size='xl' />
</Link>
<Link aria-label="Subscribe on YouTube" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org'>
<Link aria-label="Subscribe on YouTube" className='text-zinc-500 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faYoutube} size='xl' />
<Link aria-label="Follow on GitHub (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faGithub} size='xl' />
</Link>
<Link aria-label="Join on Discord (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on LinkedIn (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.linkedin.com/company/aossie/' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faLinkedin} size='xl' />
</Link>
<Link aria-label="Follow on X (Twitter) (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://x.com/aossie_org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faXTwitter} size='xl' />
</Link>
<Link aria-label="Subscribe on YouTube (opens in a new tab)" className='text-zinc-500 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org' target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faYoutube} size='xl' />
</Link>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/shared/Footer.jsx` around lines 62 - 75, Update the accessible
names for the icon-only Link components in Footer.jsx that open a new browsing
context (those with target="_blank" and rel="noopener noreferrer") by appending
a clear cue such as " (opens in a new tab)" to each aria-label (e.g., the Link
instances with aria-labels "Follow on GitHub", "Join on Discord", "Follow on
LinkedIn", "Follow on X (Twitter)", and "Subscribe on YouTube") so screen
readers announce the new-tab behavior; keep the rest of the attributes
(className, href, FontAwesomeIcon usage) unchanged.

</Link>
</div>
Expand All @@ -94,4 +94,4 @@ export function Footer() {
</Container.Outer>
</motion.footer>
)
}
}