helpscout / hsds-react

Help Scout Design System (HSDS) — React Component Library
MIT License
86 stars 17 forks source link

Add custom remove label option to Tag component #1047

Closed justinwolfe closed 2 years ago

justinwolfe commented 2 years ago

Problem/Feature

In the beautiful CC/BCC implementation that @plbabin did for the mailbox rewrite, we're using the Tag component as a badge to represent the email address. During accessibility review, we found it would be best to be able to customize the label, since it reads "Remove Tag" but in this context there isn't a tag. This adds a prop to be able to set the aria-label and test ID of the removal element to a different value:

CleanShot 2022-03-23 at 14 28 43

Guidelines

Make sure the pull request:

cloudflare-pages[bot] commented 2 years ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0121a62
Status: ✅  Deploy successful!
Preview URL: https://b092d46f.hsds-react.pages.dev

View logs

justinwolfe commented 2 years ago

@plbabin had the great idea, rather than just passing a custom label, to pass in a removeProps object so that we could have flexibility to pass additional props, so I've switched to that!