feat: enhance ambassador card social media buttons#5113
feat: enhance ambassador card social media buttons#5113yashdarekar17 wants to merge 21 commits intoasyncapi:masterfrom
Conversation
yashdarekar17
requested review from
akshatnema,
anshgoyalevil,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
yashdarekar17
requested review from
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughReplaces plain-text social links on the Ambassadors page with branded icon components (GitHub, LinkedIn, Twitter), adds an Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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)
No actionable comments were generated in the recent review. 🎉 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #5113 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 796 796
Branches 146 146
=========================================
Hits 796 796 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5113--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@pages/community/ambassadors/index.tsx`:
- Line 77: The img element uses an invalid Tailwind class "full" (see the JSX
<img ... className='full' />); replace it with the proper Tailwind utility(s)
such as "w-full" (and optionally "h-auto" to preserve aspect ratio) so the image
regains its width constraint—for example, update the className on the <img>
element to use "w-full" instead of "full".
- Around line 145-154: Add accessible names to the social icon links by adding
an aria-label (or title) to each anchor that wraps the icons so screen readers
can announce them; for example update the anchor that uses ambassador.twitterUrl
and IconTwitter (data-testid='Ambassadors-members-twitter') to include a
descriptive aria-label like "Twitter — {ambassador.name}" and do the same for
the other two social anchors (the LinkedIn and GitHub icon anchors) referencing
their respective ambassador.{linkedinUrl} and ambassador.{githubUrl} properties
so each icon link has a clear accessible label.
🧹 Nitpick comments (1)
pages/community/ambassadors/index.tsx (1)
144-175: Social icon links look good overall — minor inconsistency withdata-testidattributes.The Twitter link has
data-testid='Ambassadors-members-twitter'but the GitHub and LinkedIn links are missing theirdata-testidattributes. For test consistency, consider adding them.🔧 Proposed fix
{ambassador.githubUrl && ( <a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-black transition-colors' + data-testid='Ambassadors-members-github' > <IconGithub className='h-5 w-5 fill-current' /> </a> )} {ambassador.linkedinUrl && ( <a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='text-gray-500 hover:text-[`#0077b5`] transition-colors' + data-testid='Ambassadors-members-linkedin' > <IconLinkedIn className='h-5 w-5 fill-current' /> </a> )}
| {ambassador.twitterUrl && ( | ||
| <a | ||
| href={ambassador.twitterUrl} | ||
| target='_blank' | ||
| rel='noreferrer' | ||
| className='text-gray-500 hover:text-black transition-colors' | ||
| data-testid='Ambassadors-members-twitter' | ||
| > | ||
| <IconTwitter className='h-5 w-5 fill-current' /> | ||
| </a> |
There was a problem hiding this comment.
Social icon links missing accessible labels.
Screen readers will announce these links as empty since there's no visible text and no aria-label. Each icon link should have an accessible name.
♿ Proposed fix — add aria-labels to all three social links
<a
href={ambassador.twitterUrl}
target='_blank'
rel='noreferrer'
className='text-gray-500 hover:text-black transition-colors'
data-testid='Ambassadors-members-twitter'
+ aria-label={`${ambassador.name} on Twitter`}
>
<a
href={ambassador.githubUrl}
target='_blank'
rel='noreferrer'
className='text-gray-500 hover:text-black transition-colors'
+ aria-label={`${ambassador.name} on GitHub`}
>
<a
href={ambassador.linkedinUrl}
target='_blank'
rel='noreferrer'
className='text-gray-500 hover:text-[`#0077b5`] transition-colors'
+ aria-label={`${ambassador.name} on LinkedIn`}
>🤖 Prompt for AI Agents
In `@pages/community/ambassadors/index.tsx` around lines 145 - 154, Add accessible
names to the social icon links by adding an aria-label (or title) to each anchor
that wraps the icons so screen readers can announce them; for example update the
anchor that uses ambassador.twitterUrl and IconTwitter
(data-testid='Ambassadors-members-twitter') to include a descriptive aria-label
like "Twitter — {ambassador.name}" and do the same for the other two social
anchors (the LinkedIn and GitHub icon anchors) referencing their respective
ambassador.{linkedinUrl} and ambassador.{githubUrl} properties so each icon link
has a clear accessible label.
|
|
@yashdarekar17 this is totally insane , 21 commits without any discussion . |
3 participants
Description
Replaced the plain text social media links (Twitter, GitHub, LinkedIn) on the Ambassador cards with brand-specific icons to improve visual consistency across the community page.
Implemented interactive hover states for each icon: black for GitHub and Twitter/X, and the official brand blue (#0077b5) for LinkedIn.
Refactored the Index component in pages/community/ambassadors/index.tsx to utilize existing icon components (IconTwitter, IconGithub, IconLinkedIn) while maintaining the original card layout and flexbox logic.
Related issue(s)
Fixes #5097
Summary by CodeRabbit
New Features
Style