Skip to content

feat: enhance ambassador card social media buttons #5113

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

Open
yashdarekar17 wants to merge 21 commits into
base: master
Choose a base branch
from
+44 −27
Open

feat: enhance ambassador card social media buttons #5113

Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a368d89
added social media logo instead of text
yashdarekar17 Feb 8, 2026
b05ada8
Merge branch 'master' into yashdarekar
asyncapi-bot Feb 8, 2026
15b639c
fixed linting issue
yashdarekar17 Feb 8, 2026
d8a5063
fixed linting issue
yashdarekar17 Feb 8, 2026
5a1fd37
fixed linting issue3
yashdarekar17 Feb 8, 2026
4984ea4
fixed linting issue
yashdarekar17 Feb 8, 2026
fd36f95
fixed linting issue
yashdarekar17 Feb 8, 2026
5269193
fixed linting issue
yashdarekar17 Feb 8, 2026
dfd65ee
fixed linting issue4
yashdarekar17 Feb 8, 2026
f6981d9
fixed linting issue4
yashdarekar17 Feb 8, 2026
77b8faa
fixed linting issue4
yashdarekar17 Feb 8, 2026
dd1214b
fixed linting issue4
yashdarekar17 Feb 8, 2026
2e7bf8c
fixed linting issue4
yashdarekar17 Feb 8, 2026
2a7c4a5
fixed lint error
yashdarekar17 Feb 8, 2026
21c45af
fixed lint error
yashdarekar17 Feb 8, 2026
dc2e896
lint error fixed
yashdarekar17 Feb 8, 2026
0b67095
lint error fixed
yashdarekar17 Feb 8, 2026
88a3588
lint error fixed
yashdarekar17 Feb 8, 2026
77032b2
fixed critical errors by coderabitai
yashdarekar17 Feb 8, 2026
35c5ad3
changed social media links to logo
yashdarekar17 Feb 8, 2026
a770077
final commit
yashdarekar17 Feb 8, 2026
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
73 changes: 45 additions & 28 deletions pages/community/ambassadors/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import type { Ambassador } from '@/types/pages/community/Community';
import { HeadingTypeStyle } from '@/types/typography/Heading';

import Button from '../../../components/buttons/Button';
import IconGithub from '../../../components/icons/Github';
import IconLinkedIn from '../../../components/icons/LinkedIn';
import IconTwitter from '../../../components/icons/Twitter';
import GenericLayout from '../../../components/layout/GenericLayout';
import NewsletterSubscribe from '../../../components/NewsletterSubscribe';
import Heading from '../../../components/typography/Heading';
Expand All @@ -21,7 +24,6 @@ export function addAdditionalUserInfo(user: Ambassador) {
...user
};

// add social links
if (userData.github) {
userData.githubUrl = `https://www.github.com/${userData.github}`;
}
Expand All @@ -32,8 +34,6 @@ export function addAdditionalUserInfo(user: Ambassador) {
userData.twitterUrl = `https://www.twitter.com/${userData.twitter}`;
}

// add img url
// github redirects to avatar url using `https://www.github.com/<username>.png`
userData.img = `${userData.githubUrl}.png`;

return userData;
Expand All @@ -49,11 +49,15 @@ export default function Index() {
['name']
);

// Variable to handle long URL and pass max-len linter
const ambassadorProgramUrl =
'https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/AMBASSADOR_PROGRAM.md';

return (
<GenericLayout title='AsyncAPI Ambassador Program' description='The AsyncAPI Ambassador Program' image={image} wide>
<div className='flex flex-col items-center justify-between lg:flex-row' data-testid='Ambassadors-main'>
<div className='w-full text-center lg:w-[45%] lg:text-left' data-testid='Ambassadors-content'>
<h1 className='mt-10 text-3xl font-semibold md:text-4xl lg:text-5xl' data-testid='Ambassadors-title'>
<h1 className='mt-10 text-3xl font-semibold md:text-4xl lg:text-5xl' data-testid='Ambassadors-title'>
Teachers. Champions. <span className='countdown-text-gradient'>Ambassadors!</span>
</h1>
<Heading typeStyle={HeadingTypeStyle.bodyLg} textColor='text-gray-700' className='mt-5 text-slate-500'>
Expand All @@ -64,13 +68,13 @@ export default function Index() {
<Button
className='mt-10 block text-center focus:outline-none md:inline-block'
text='Become an AsyncAPI Ambassador'
href='https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/AMBASSADOR_PROGRAM.md'
href={ambassadorProgramUrl}
target='_blank'
/>
</div>
</div>
<div className='hidden w-1/2 lg:block'>
<img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='w-full' />
<img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='full' />
</div>
</div>
<div className='mt-20'>
Expand Down Expand Up @@ -123,11 +127,8 @@ export default function Index() {
<div data-testid='Ambassadors-members-country'>{ambassador.country}</div>
</div>
<Link href={`ambassadors/${ambassador.github}`} as={`ambassadors/${ambassador.github}`}>
<div className='p-2'>
<div
className='h-auto w-full cursor-pointer rounded-md bg-center'
data-testid='Ambassadors-members-img'
>
<div className='p-2 cursor-pointer'>
<div className='h-auto w-full rounded-md bg-center' data-testid='Ambassadors-members-img'>
<img
src={ambassador.img}
alt={ambassador.name}
Expand All @@ -140,22 +141,38 @@ export default function Index() {
</div>
<div className='flex h-full flex-col justify-between'>
<div className='p-2 text-sm'>{ambassador.bio}</div>
<div className='flex border-t p-2' data-testid='Ambassadors-members-socials'>
<a
href={ambassador.twitterUrl}
target='_blank'
rel='noreferrer'
className='underline'
data-testid='Ambassadors-members-twitter'
>
Twitter ↗
</a>
<a href={ambassador.githubUrl} target='_blank' rel='noreferrer' className='ml-3 underline'>
Github ↗
</a>
<a href={ambassador.linkedinUrl} target='_blank' rel='noreferrer' className='ml-3 underline'>
Linkedin ↗
</a>
<div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'>
{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>
Comment on lines +145 to +154
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 8, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

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.

)}
{ambassador.githubUrl && (
<a
href={ambassador.githubUrl}
target='_blank'
rel='noreferrer'
className='text-gray-500 hover:text-black transition-colors'
>
<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'
>
<IconLinkedIn className='h-5 w-5 fill-current' />
</a>
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -205,7 +222,7 @@ export default function Index() {
<Button
className='mt-5 block text-center focus:outline-none md:mt-10 md:inline-block md:w-[48%]'
text='Become an Ambassador now'
href='https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/AMBASSADOR_PROGRAM.md'
href={ambassadorProgramUrl}
target='_blank'
/>
<Button
Expand Down