Media Fields: Fix filename truncation with Tooltip#78453
Merged
Conversation
andrewserong
added
[Type] Bug
|
Size Change: +132 B (0%) Total Size: 7.97 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 12c1b0f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26137264965
|
ramonjd
approved these changes
May 20, 2026
Member
ramonjd
left a comment
ramonjd
left a comment
There was a problem hiding this comment.
Tooltip looks good
I can't focus the title anymore (trunk):
| @@ -0,0 +1,14 @@ | |||
| // CSS-based truncation (rather than `__experimentalTruncate`) so the full | |||
| // filename stays in the DOM — keeps it available to assistive technology | |||
Member
There was a problem hiding this comment.
I noticed some components now using <WCText truncate> around the place. Looks like it's not recommended yet: https://wordpress.github.io/gutenberg/?path=/docs/components-text--docs
Contributor
Author
There was a problem hiding this comment.
Cheers, we can revisit further down the track if/when it's recommended 👍
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Author
|
Thanks for the quick review! 🙇 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Update how the filename field truncates its text by avoiding a tab stop while ensuring the full filename is still accessible to screen readers.
Part of:
And addresses the review feedback in: #78423 (comment) from @talldan (thanks for catching it!)
Why?
The previous approach of using
Tooltipwithout explicitly settingtabIndex={ -1 }on its child meant that in the DataViewsPicker the filename field would receive an extra tab stop while navigating across the media modal by keyboard.This is unexpected and particularly in large lists makes it harder to navigate around the media library.
From comparing some other web apps, it turns out that in web apps like Google Drive, truncated titles are available via a tooltip on hover, but don't result in a tab stop. By adjusting the filename field to use CSS truncation instead of
Truncate, we can take a similar approach here while ensuring the full filename is still reachable to screen readers.How?
Truncateusage and instead use aspanwith CSS truncationtabIndex={ -1 }to prevent the tab stopTesting Instructions
Screenshots or screencast
It should look like this, with no tab stop:
Use of AI Tools
Claude Code