-
Notifications
You must be signed in to change notification settings - Fork 535
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix ellipsis truncation in Token
#2974
Conversation
🦋 Changeset detectedLatest commit: b9f3a69 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
@iansan5653 this might be out of scope for this PR, but from an a11y perspective would we need to provide a mechanism for someone to view the full label contents if it is truncated? Otherwise could this fall under: https://www.w3.org/TR/WCAG21/#resize-text |
I totally agree. That being said I'm not sure what a good answer is in this case:
I don't think this fix makes the accessibility problem worse - the current situation with visual overflow is a bug that does need to be fixed. Generally I think the first option (encourage shorter text) is preferred. When user-controlled though, we do have to do something. |
@iansan5653 thanks for taking the time to write this up! I appreciate it so much 🙏 And definitely agreed with what you shared around. I'm not sure how much we could build-in to this component due to the different circumstances you shared, but what would you think of this as a rule of thumb:
|
Yep, that sounds about right to me 👍. That seems like something we could use an interface guideline document for. In the meantime, are you OK with merging this PR? |
@iansan5653 definitely 👍 it seems like this is similar to some other components so I'll make a note of this under the umbrella of truncation so we can revisit it! |
Text in
Token
is supposed to truncate with an ellipsis when theToken
reaches 100% of the container width. But theTokenTextContainer
hasoverflow: visible
, which disables truncation. Removing that rule allows the precedingoverflow: hidden
line to activate.However, in inline elements
overflow
cannot behidden
only in the x direction, sooverflow: hidden
will also clip descenders (like the tail on a "g"). To fix this, we also need to also change theline-height
tonormal
.Before:
After: