Tag - Text truncation for overflow fix

[dchyun]

📌 Summary

This PR fixes an overflow issue present in the Tag when text wraps to > 3 lines. It implements the intended design change to address this, which truncates any text that goes to multiple lines. When truncation occurs, an ellipsis is rendered, and a tooltip showing the full text is added.

It also adds width: fit-content; to the tag to ensure a tag's width never goes beyond its content.

🛠️ Detailed description

It was observed in the Tag in HDS-3854 that when the text exceeds 3 lines, the background of the dismiss button obscures the border of the element.

Per design guidance, the chosen solution has been to truncate any text in the tag that goes beyond one line, and add an ellipsis and tooltip with the full text when this truncation occurs.

The text is truncated when the text would wrap to multiple lines using overflow: hidden and -webkit-line-clamp: 1. When this occurs a tooltip is also added using the hds-tooltip modifier, and the Hds::TooltipButton.

There are several other changes related to this fix.

• The max-width of the text is set to 150px
• A new property @tooltipPlacement has been added to allow for customization of the tooltip placement
• width: fit-content has been added to prevent the tag width from ever exceeding its content. This was present previously when the tag had a parent with display: grid.

📸 Screenshots

Text Truncation

Before

After

After - Hover / Focus

Width

Before

After

🔗 External links

Jira ticket: HDS-4317
Figma file: Link

---

👀 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	Feb 14, 2025 9:40pm
hds-website	✅ Ready (Inspect)	Visit Preview	Feb 14, 2025 9:40pm

[majedelass]

This is looking great, although I did find an interesting "bug"

The tooltip is still there even if the text is fully revealed. Wonder if there is a way to fix this?

UPDATE: It looks like something that was once truncated, but then isn't will have a tooltip. We should also check screen reader behavior. Does the text get read out twice or just once? I think we can loop in the entire team for A11Y

[dchyun]

This is looking great, although I did find an interesting "bug"

The tooltip is still there even if the text is fully revealed. Wonder if there is a way to fix this?

Did you notice this after doing some resizing of the page, or on load? One open issue with the fix is that the tooltip will be added if the text goes from not cut off to cut off on a resize, but not removed if the text goes from cut off to shown.

I figure this isn't a use case that will come up often as users aren't usually resizing their browser back and forth, but will see if I can find some fix.

Update: This edge case issue with resizing has been resolved

[MelSumner]

Def want to call out that the there needs to be documentation that informs consumers that truncated text is not accessible for all users and they should prefer limiting the text length before the need for truncation exists.

[majedelass]

Def want to call out that the there needs to be documentation that informs consumers that truncated text is not accessible for all users and they should prefer limiting the text length before the need for truncation exists.

Can you elaborate on this? Truncated text will always have tooltips associated to it. Also from my understanding, truncation is a CSS based visual indicator that should still be accessible by a screen reader. One call out is to make sure that the text isn't read out twice. Is there something else I'm missing?

[dchyun]

Def want to call out that the there needs to be documentation that informs consumers that truncated text is not accessible for all users and they should prefer limiting the text length before the need for truncation exists.

Can you elaborate on this? Truncated text will always have tooltips associated to it. Also from my understanding, truncation is a CSS based visual indicator that should still be accessible by a screen reader. One call out is to make sure that the text isn't read out twice. Is there something else I'm missing?

Yes the truncation is only via CSS. In the DOM the text will still be un-truncated. I did test with voiceover and this does mean that the text does get read twice, which isn't ideal, but no content is lost. It reads the text of the button and then the tooltip associated with it.

[majedelass]

Def want to call out that the there needs to be documentation that informs consumers that truncated text is not accessible for all users and they should prefer limiting the text length before the need for truncation exists.

Can you elaborate on this? Truncated text will always have tooltips associated to it. Also from my understanding, truncation is a CSS based visual indicator that should still be accessible by a screen reader. One call out is to make sure that the text isn't read out twice. Is there something else I'm missing?

Yes the truncation is only via CSS. In the DOM the text will still be un-truncated. I did test with voiceover and this does mean that the text does get read twice, which isn't ideal, but no content is lost. It reads the text of the button and then the tooltip associated with it.

I wonder if there is a way to assign the ".sr-hidden" (do we have a class name like that, I thought?) class name to truncated text and then remove it if its un-truncated? Seems like a whole level of complexity.

[zamoore]

This makes sense and looks great, but I think we can improve it with custom modifiers. Let's set up some time next week to work on this if you'd like. Or if you'd prefer to explore the modifier conversion on your own, that's cool too.

[zamoore]

Nice work. Good use of Ember modifiers!

[KristinLBradley]

Looks good overall. I added a minor suggestion to add a comment to one of the styles.

Note: If the visual diff is as expected you can approve the Percy diff to get rid of the related test failure.

[shleewhite]

🚢

[majedelass]

Looks great!