[FEAT] Add aria-label attributes to platform icon links on public profile page for screen reader accessibility

[PranavAgarkar07]

Description

Adds aria-label attributes to all platform icon links on the public profile page (/[username]). Screen readers now announce the platform name instead of just "link".

Changes

• app/[username]/ProfileLinkItem.tsx — Added aria-label="Visit ${link.label || link.platform}" to the anchor tag wrapping each platform icon

Acceptance Criteria

• Every platform icon link has a unique aria-label
• GitHub, LinkedIn, LeetCode, YouTube, X, Instagram, Facebook, Discord, Twitch icons all get appropriate labels
• Custom website links dynamically generate labels from the user's custom link label
• No duplicate, empty, or generic aria-label values
• Page remains visually identical — zero visual diff
• Screen reader announces the platform name, not just "link"
• All existing functionality unchanged

Closes #312

Summary by CodeRabbit

• Accessibility
  • Enhanced profile links with improved accessible naming for assistive technologies, providing clearer context when navigating.

[vercel]

@PranavAgarkar07 is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

ProfileLinkItem now computes an aria-label attribute from the link's label or platform name and applies it to the anchor element, providing explicit accessible naming for screen readers.

Changes

Profile Link Accessibility

Layer / File(s)	Summary
Aria-label attribute addition app/[username]/ProfileLinkItem.tsx	The anchor element now includes a computed aria-label derived from link.label (with fallback to link.platform), ensuring screen readers announce the platform destination explicitly.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• vishnukothakapu/linkid#165: Both PRs modify app/[username]/ProfileLinkItem.tsx to adjust how link.label and link.platform are used in the component.

Suggested labels

quality:clean, level:beginner

Suggested reviewers

• vedhapprakashni

Poem

🐰 A hop, a skip, for screens of sight,
The rabbit whispers labels bright,
"Visit GitHub!" the reader calls,
Now every link knows where it falls. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding aria-label attributes to platform icon links for screen reader accessibility on the public profile page.
Linked Issues check	✅ Passed	The code change adds aria-label computation and application to the ProfileLinkItem component, directly satisfying the core requirement to add unique, descriptive aria-labels to platform icon links.
Out of Scope Changes check	✅ Passed	The change is narrowly focused on adding aria-label functionality to ProfileLinkItem and introduces no unrelated modifications or scope creep.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

🧹 Nitpick comments (1)

app/[username]/ProfileLinkItem.tsx (1)

26-26: 💤 Low value

Consider adding new window indication to aria-label (optional enhancement).

The anchor uses target="_blank" to open in a new window, but the aria-label doesn't inform screen reader users about this behavior. Consider updating the aria-label to include this information for better accessibility.

♻️ Optional enhancement

-    const ariaLabel = `Visit ${link.label || link.platform}`;
+    const ariaLabel = `Visit ${link.label || link.platform} (opens in new window)`;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/`[username]/ProfileLinkItem.tsx at line 26, The anchor has
target="_blank" but the aria-label (ariaLabel) doesn't indicate that it opens a
new window; update the ProfileLinkItem component to compute or adjust ariaLabel
when target="_blank" is used (e.g., append "— opens in a new window" or similar)
and pass that computed value into the aria-label prop, avoiding duplicate
phrases if ariaLabel already mentions it; locate the aria-label usage and the
anchor element in ProfileLinkItem.tsx and implement the conditional label
adjustment (keep existing rel and security attributes unchanged).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/`[username]/ProfileLinkItem.tsx:
- Line 26: The anchor has target="_blank" but the aria-label (ariaLabel) doesn't
indicate that it opens a new window; update the ProfileLinkItem component to
compute or adjust ariaLabel when target="_blank" is used (e.g., append "— opens
in a new window" or similar) and pass that computed value into the aria-label
prop, avoiding duplicate phrases if ariaLabel already mentions it; locate the
aria-label usage and the anchor element in ProfileLinkItem.tsx and implement the
conditional label adjustment (keep existing rel and security attributes
unchanged).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 23b6d420-0dc6-427c-9388-bbdebc57bd1f

📥 Commits

Reviewing files that changed from the base of the PR and between 1f0fa6b and fef61ed.

📒 Files selected for processing (1)

• app/[username]/ProfileLinkItem.tsx