Accordion: make toggle button names unique

[shleewhite]

📌 Summary

If merged, this PR would update the accordion toggle to make the button names unique.

🛠️ Detailed description

To make aria-label not required on each item but still create unique labels for the toggle buttons, I decided to use aria-labelledby. aria-labelledby is set to the id of the wrapper around the toggle block and I removed the aria-label default value. This makes it so the accessible name is just the title of the accordion.

If the developer passes an aria-label to the accordion item, aria-labelledby isn't set.

NOTE:

I used to have a different implementation where I also included a visually hidden piece of text that said "Expand" so the button name would be "Expand {title}", but after discussing with @MelSumner we decided that wasn't even necessary because the fact that it shows/hide content is implied by aria-expanded. When you navigate to the button with VoiceOver it says "{title}, collapsed, button" and then when you press the button it says "expanded". this makes including the word "expand" in the button name redundnant.

📸 Screenshots

DOM after changes:

🔗 External links

Jira ticket: HDS-3809

---

👀 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	Sep 4, 2024 6:59pm
hds-website	✅ Ready (Inspect)	Visit Preview	Sep 4, 2024 6:59pm

[zamoore]

Cool change!

What do you think about adding an integration test to make sure the property value is set correctly?

[shleewhite]

Cool change!

What do you think about adding an integration test to make sure the property value is set correctly?

@zamoore for sure! just added a couple tests.

[KristinLBradley]

Looks good!