GeezerVison is showing github.com — fix(site/src): show truncated filter labels in a tooltip by chrifro · Pull Request #32054 · coder/coder
Conversation
chrifro
commented
Nov 11, 2026
•
edited
Loading
Uh oh!
There was an error while loading. Please reload this page.
Under WCAG 1.4.12 text spacing overrides (letter spacing 0.12em, word spacing 0.16em, line height 1.5), the SelectFilter trigger and options cut their labels off with no way to read the full text. Examples are "All providers" on AI Gateway sessions and "All resource types" and "All organizations" on the audit log.
- Trigger: stays on one line with an ellipsis. When the label is cut off,
ComboboxButton shows the full label in a tooltip on hover and keyboard focus. The tooltip only opens if the label is truncated at the moment it opens, so a spacing override applied after load is still caught. It stays closed while the dropdown is open so it never covers the list.
- Width: the filters are a little wider so the default placeholders fit under spacing: AI Gateway sessions 150 to 165px, audit log 175px (multi-org) or 200px to 210px.
- Options: long option labels in the dropdown wrap instead of truncating, because cmdk options never receive DOM focus and so can't show a focus tooltip.
ComboboxButton is shared, so its six form callers (workspace version, preset, IdP sync, AI budget dialogs) also get the tooltip when their selected value is truncated. That's additive: they truncated on main too, with no way to read the full text.
The W3C Understanding document for 1.4.12 allows ellipses caused by spacing overrides "so long as the content is still available". The tooltip is how the content stays available here.
Closes DEQ-365
Closes DEQ-430
| Ticket |
Surface |
Screenshots |
| DEQ-365 |
Audit log filters (resource type, organization) |
before/after |
| DEQ-430 |
AI Gateway sessions filters (provider, model) |
before/after |
Grouping, decisions, and review notes
Grouping. The batch label text-spacing-cut-off had three eligible tickets with two root causes. DEQ-365 and DEQ-430 come from the shared SelectFilter/ComboboxButton and are fixed here. DEQ-434 comes from StaticWidth in agent metadata and is fixed in #32055.
Revision. The first version wrapped the trigger label onto several lines. A human reviewer rejected that, so the trigger now truncates on one line and shows a tooltip, with a little more width.
Tooltip details.
- The tooltip is a controlled Radix
Tooltip, and onOpenChange compares the label's scrollWidth to its clientWidth.
- The trigger combines the popover trigger and the tooltip trigger, both rendered
asChild. The popover's data-state and aria-expanded win, so the chevron still rotates. I verified this in the browser.
- The tooltip opens on focus as well as hover. Escape and moving the pointer onto it work as WCAG 1.4.13 requires, through the Radix defaults.
Verification.
- I injected the WCAG spacing stylesheet into Storybook (
pages/AuditPage MultiOrg, pages/AIBridgePage/ListSessionsFilter Default) and listed elements whose scrollWidth exceeded clientWidth. On main, "All providers", "All resource types" and "All organizations" are clipped. On this branch, nothing is clipped and every trigger stays 40px tall.
- A truncated label shows its tooltip on hover and on focus. A label that fits gets none, with or without spacing.
- New Vitest cases check that the focused trigger's accessible description is the full label when it's truncated, and empty when it fits.
- The new
LongLabelTooltip story gives Pixel the tooltip-open state.
Accessibility audit (axe 4.11, WCAG A/AA and best practices). No new violations. aria-dialog-name on the popover already fails on main, and this diff doesn't touch it.
Review findings.
- Applied: keep the tooltip closed while the popover is open (should-fix), and split a conditional
it.each into two plain tests (nit).
- Accepted: when the label isn't truncated, refusing the controlled open still sends Radix's tooltip-open event to the provider. The only effect is a 100ms skip-delay window, so I didn't add pointer and focus handlers to avoid it.
- Accepted: after a mouse user picks an option, focus returns to the trigger, so a truncated label's tooltip opens. That matches the keyboard behavior.
Doc check. No docs describe filter label truncation, so no docs changes are needed.
🤖 Generated by Coder Agents on behalf of @chrifro.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
linear-code
Bot
commented
Nov 11, 2026
•
edited
Loading
Uh oh!
There was an error while loading. Please reload this page.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
chrifro
changed the title
fix(site/src/components): wrap SelectFilter labels instead of truncating
fix(site/src): show truncated filter labels in a tooltip
Nov 12, 2026
This branch was previously deployed
1 inactive
deployment
Uh oh!
There was an error while loading. Please reload this page.
Milestone
No milestone
Development
Successfully merging this pull request may close these issues.
Uh oh!
There was an error while loading. Please reload this page.
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.
|