Accessible Headings: Add tag arguments to components

[shleewhite]

📌 Summary

If merged, this PR will add a tag or titleTag argument to the following components:

• Accordion
• Alert
• ApplicationState
• CodeBlock
• DialogPrimitive

Note for reviewers: It is probably easiest to review this PR by commit because each component was done in a separate commit.

🛠️ Detailed description

The new argument accepts: "div" or "p", depending on which the component currently uses, and "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Accordion

• Add titleTag argument

Alert

• Add tag argument to Alert Title

ApplicationState

• Update the titleTag argument to only allow: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

CodeBlock

• Add tag argument to CodeBlock Header

DialogPrimitive

• add titleTag argument to DialogPrimitive Header
• update styles so changing the tag doesn't add margin

Also updates the showcase so there are examples of customized tags.

📸 Screenshots

The rendered HTML for Accordion when you pass titleTag

🔗 External links

RFC: https://go.hashi.co/rfc/ds-087
Jira ticket: HDS-3772

---

👀 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	Aug 23, 2024 5:50pm
hds-website	✅ Ready (Inspect)	Visit Preview	Aug 23, 2024 5:50pm

[alex-ju]

Generally looks good! I left a couple of questions and recommendations.

More generally, it would be good to add tests for the newly introduced arguments. We'd also need to update the API in website and update some examples (or add new ones), but that can be done in a separate PR if you prefer.

[shleewhite]

Generally looks good! I left a couple of questions and recommendations.

More generally, it would be good to add tests for the newly introduced arguments. We'd also need to update the API in website and update some examples (or add new ones), but that can be done in a separate PR if you prefer.

@alex-ju I was planning on updating the website in a separate PR! I wanted to take a bit of time to think about how to explain / demonstrate the correct usage.

[alex-ju]

Excellent work!

[zamoore]

Great work!

[KristinLBradley]

This is fine (and I see this is already merged) but just to let you know, another way to remove whitespace within Ember HBS files is to use tilde symbols "~" (sometimes referred to as "squishies" in Ember)

An example of using squishies in our code base: https://github.com/hashicorp/design-system/blob/main/packages/components/src/components/hds/rich-tooltip/index.hbs

[shleewhite]

Oh! Cool! Danger of copy/pasting from older files haha, I have another branch to update the default tags for Modal/Flyout so maybe I can clean that up in that PR.