SideNav - Conditionally set aria-labelledby

[dchyun]

📌 Summary

If merged, this PR would set the aria-labelledby attribute in the SideNav toggle button, only if the @ariaLabel argument is not provided.

🛠️ Detailed description

Currently in the SideNav component's toggle button, there is a hardcoded aria-labelledby value of hds-side-nav-header present. The @ariaLabel argument sets the aria-label on the toggle button, but when this argument is set, the existing aria-labelledby is not removed. This leads to both aria-label and aria-labelledby being present on the toggle button. Since aria-labelledby overrides aria-label for screenreaders, the provided aria-label value is never announced.

To correct this behavior, the functionality has been changed so the hardcoded aria-labelledby is only set when the @ariaLabel argument is not used.

📸 Screenshots

Before

After

🔗 External links

Jira ticket: HDS-4549

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Mar 25, 2025 5:03pm
hds-website	✅ Ready (Inspect)	Visit Preview	Mar 25, 2025 5:03pm

[MelSumner]

Please add documentation so that users understand what's happening and how to use this component correctly. Thank you!

[dchyun]

Please add documentation so that users understand what's happening and how to use this component correctly. Thank you!

We have marked the @ariaLabel argument as deprecated. So, these changes I believe are only needed for teams that are still relying on that eventually deprecated argument. The docs already provide guidance on the preferred approach, using the SideNav::Header instead of @ariaLabel. I can add a note into the @ariaLabel component API anyway if we think that is needed.