Fix Accessibility Violations: Social Media Link Labels

[huangkevin-apr]

This PR fixes accessibility violations in the footer where social media links lacked proper accessible names for screen reader users.

Description

Issue Description

The IBM Equal Access Accessibility Checker identified multiple violations:

• Issue: Accessible name does not match or contain the visible label text
• Elements: Social media icon links (GitHub, LinkedIn, X/Twitter, Discord) in the footer
• Impact: Screen reader users cannot properly identify the purpose of these links because the aria-label attribute on the element conflicts with the decorative icon inside

Root Cause
The previous implementation applied aria-label directly to the link element while the icon inside was not marked as decorative. This creates confusion for assistive technologies about which label to announce.

Fix Description

Refactored the social media links to follow accessibility best practices:

• Removed aria-label from the component
• Added aria-hidden="true" to the component to mark it as decorative
• Added a visually hidden containing the descriptive text

This approach ensures:

• The icon is hidden from screen readers (decorative only)
• The accessible name comes from visible/semantic content
• Screen readers announce the clear, descriptive label

Changes

- aria-label={ariaLabel}
  className="text-body hover:text-primary"
>
- <Icon className="h-9 w-9 hover:transform hover:transition-colors" />
+ <Icon
+   aria-hidden="true"
+   className="h-9 w-9 hover:transform hover:transition-colors"
+ />
+ <span className="sr-only">{ariaLabel}</span>
</BaseLink>

Related Issue

• Fixes Accessibility Violations: Social Media Link Labels #17138

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	5ceaf4a
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6971eb82de394f0008e4494c
😎 Deploy Preview	https://deploy-preview-17139.ethereum.it
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 57 (🟢 up 4 from production) Accessibility: 94 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[wackerow]

Looks good, thanks @huangkevin-apr!

[wackerow]

@all-contributors please add @huangkevin-apr for bug fix

[allcontributors]

@wackerow

I've put up a pull request to add @huangkevin-apr! 🎉