HDS-5265: Adds a11y guardrails in Dropdown ToggleIcon component

[annawanggg]

📌 Summary

If merged, this PR adds a11y guardrails to the Dropdown ToggleIcon component, so the consumer can only set @hasChevron to false if the icon is in a list of allowed values.

🛠️ Detailed description

• Adds a check/assertion to @hasChevron
• Adds allowed icon list as a type (so the list can be expanded later if needed, and we only need to update the list)
• Adds a test to check that an assertion is thrown if the component is used incorrectly

📸 Screenshots

Tests pass.

Smoke testing

• Cloud UI: 🟢
• Atlas: 🟡
  • there is 1 instance of a failing dropdown and it is the user menu in the mobile view header (screenshot is what it looks like with the chevron). it should be safe to add the chevron bc when the dropdown is in desktop view there is one.

• Boundary: 🟢
• Vault: I manually checked and there are no instances of Dropdowns with @hasChevron={{false}} with an invalid icon

🔗 External links

Jira ticket: HDS-5265

---

👀 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.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Oct 16, 2025 7:13pm
hds-website	Ready	Preview	Oct 16, 2025 7:13pm

[hashicorp-cla-app]

All committers have signed the CLA.

[annawanggg]

In this PR, we include both more-horizontal and more-vertical in the allowed icon list, but existing documentation seems to only refer to more-horizontal being permitted without chevrons (when used as an overflow menu inTable components).

Just to check, it's okay to have more-vertical in the allowed list, and update documentation to reflect this?

[MelSumner]

We didn't have both when we first made this component, I think, but @hashicorp/hds-design could confirm.

[didoo]

As mentioned during our HDS Engineering sync today, better to involve the HDS designers on this, to discuss/decide which icons are "allowed" to have when the chevron is not visible. We can't make an unilateral decision on this (even if it's documented, better to double check with them).

[annawanggg]

Yes agreed! Just marked the PR for review so everyone can discuss :)

[jorytindall]

Thanks for looping @hashicorp/hds-design in! I think this change is logical given how we expect this component to be used, and I can't think of any other icons that would fall into this category at this time.

However, where this gives me pause is whether this is a guidance over control question. The reasoning behind supporting this variant when used in the table is because this is a common pattern across the web for consolidating options and CRUD actions in dense UIs, and while I can't think of other icon examples right now, I imagine there are others that are logical given the context.

I'll invite other designers to chime in with opinions, we discussed this briefly today, but were missing a few folks that would benefit the discussion. I might request holding off until after our design sync later this week for us to discuss it with a full quorum.

[github-actions]

📦 RC Packages Published

Latest commit: fb70667

Published 1 packages

@hashicorp/[email protected]

yarn up -C @hashicorp/design-system-components@rc

[MelSumner]

🎉 👍