fix: add target blank and rel noopener to external footer links#653
Open
reach2saksham wants to merge 1 commit intoAOSSIE-Org:mainfrom
Open
fix: add target blank and rel noopener to external footer links#653reach2saksham wants to merge 1 commit intoAOSSIE-Org:mainfrom
reach2saksham wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughExternal social media links in the Footer component now include Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/shared/Footer.jsx`:
- Around line 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.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ee470efd-f0e8-4e05-abcd-003cd7a049bd
📒 Files selected for processing (1)
src/components/shared/Footer.jsx
Comment on lines
+62
to
75
| <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' /> |
There was a problem hiding this comment.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #630
Screenshots/Recordings:
Note to reviewer: This is a behavior change (links opening in a new tab) rather than a visual UI change.
Before: Clicking social links in the footer navigated the current tab away from the AOSSIE website.
After: Clicking external social links (GitHub, Discord, LinkedIn, X, YouTube) now correctly opens them in a new browser tab.
Additional Notes:
target="_blank"andrel="noopener noreferrer"to all external social media links in theFooter.jsxcomponent. This ensures users are not navigated away from the AOSSIE website when clicking on external platforms.target="_blank"from themailto:link. This is a web accessibility best practice to prevent the browser from opening an empty tab before launching the user's default email client.AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit