Fix Accessibility Violations for Social Media Buttons

[huangkevin-apr]

Summary

This PR resolves 3 accessibility violations detected by the IBM Equal Access Accessibility Checker in the social buttons component. The fix adds accessible names to icon-only links by leveraging existing button data, ensuring screen reader users can identify the purpose of each social media button.

Why is this important?
When the purpose of a link is clear users can easily navigate links on the page without having to see the surrounding information for context.

Solution

Added aria-label attribute to the button links, utilizing the existing name property from the data structure:

diff --git a/layouts/partials/social-buttons.html b/layouts/partials/social-buttons.html
index cd9891d..ca392bd 100644
--- a/layouts/partials/social-buttons.html
+++ b/layouts/partials/social-buttons.html
@@ -1,7 +1,7 @@
 {{ $compact  := .compact }}
 {{ $outlined := .outlined }}
 {{ range .btns }}
-<a class="button is-{{ .bg_color }}" href="{{ .url }}" target="_blank">
+<a class="button is-{{ .bg_color }}" href="{{ .url }}" target="_blank" aria-label="{{ .name }}">
   <span class="icon has-text-{{ .icon_color }}">
     <i class="{{ .icon }}"></i>
   </span>

Why This Solution Is Elegant
This fix is particularly well-designed because it:

Leverages existing data: Uses the name property already present in the button configuration
Scales automatically: Any new social buttons added to the data will automatically have accessible names
Requires minimal changes: Single-line modification fixes all button instances
Maintains consistency: All buttons use the same accessibility pattern
No duplication: Doesn't require hard-coding labels for each button type

Checklist

• Commits are signed with Developer Certificate of Origin (DCO)

Fixes #1699

[github-actions]

Thank you for your contribution! 🙏 We will review your PR as soon as possible.

While you are waiting, make sure to:

• Add your contribution to all applicable KEDA versions
• GitHub checks are passing
• Is the DCO check failing? Here is how you can fix DCO issues

Learn more about:

• How to become a listed end-user or a listed commerical offering
• Our contribution guide

[netlify]

✅ Deploy Preview for keda ready!

Name	Link
🔨 Latest commit	e6a99c5
🔍 Latest deploy log	https://app.netlify.com/projects/keda/deploys/697df5c4974a410008e3b672
😎 Deploy Preview	https://deploy-preview-1700--keda.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for keda ready!

Name	Link
🔨 Latest commit	d253755
🔍 Latest deploy log	https://app.netlify.com/projects/keda/deploys/697e7aef94398800081c847a
😎 Deploy Preview	https://deploy-preview-1700--keda.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

Resolves accessibility violations for icon-only social media links by adding accessible names via aria-label in the social buttons partial (Fixes #1699).

Changes:

• Add aria-label to social button <a> elements using the existing .name field.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[JorTurFer]

Thanks a lot for the report and the fix!