fix(a11y): hold a Chip to 44px on the axis its label leaves short - #297
Merged
Conversation
A Chip pays for its pointer target in layout rather than in an overlay, because it stands in a scrolling row of its own kind where a centred overlay would reach into its neighbour's (`ui/touch-target.ts`). Only `min-h` was ever spelled, and a Chip is as wide as its label -- so the width was held by whatever the label happened to be. Three sat under the target. ASCII//Convert's PNG scale chips `1×` / `2×` / `4×` draw 31px at both breakpoints, GLITCH//Studio's `VHS` Preset 38px, and its add-effect `+` 29px above `sm`, where the callsite's `sm:w-auto` drops the 60px it holds on mobile. The fix belongs in the primitive rather than at those three callsites: the next two-character label would arrive under 44 the same way. `justify-center` comes along because it is only observable in the case `min-w` creates -- a container wider than its content -- where the slack would otherwise fall entirely to one side of the label. Verified it is a no-op for the one Chip that sets `flex-col` (ASCII's charset chips): its two lines already fill the 44px box, insets unchanged at 7px either side. Measured across both programs at 390px and 900px: nine chips move, all width-only, none in height, and no other chip geometry changes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Follow-up to #295, which noted this in passing but left it alone as out of scope.
A
Chippays for its pointer target in layout rather than in an overlay, because it stands in ascrolling row of its own kind where a centred overlay would reach into its neighbour's
(
ui/touch-target.ts). But onlymin-hwas ever spelled — and a Chip is exactly as wide as itslabel, so the width was held by whatever the label happened to be.
What was under the target
Measured in Chrome across both programs at 390px and 900px:
1×2×4×VHS+add effectsmThe
+holds 60px on mobile from its callsite'sw-[60px], and loses it tosm:w-autoabove thebreakpoint — which is why it only offends at desktop widths.
The fix belongs in the primitive rather than at those three callsites: the next two-character label
would arrive under 44 exactly the same way.
justify-centerIt is only observable in the case
min-wcreates — a flex container wider than its content. Belowthat it is inert, since a Chip is sized to its content. Without it, the stretched width falls
entirely to one side of a label that no longer fills it.
The one Chip that sets
flex-col(ASCII//Convert's charset chips, wherejustify-*would act on thevertical axis instead) was checked rather than assumed: its two lines already fill the 44px box, and
the content insets are unchanged at 7px top and bottom either way.
Verification
Nine chips move across the two programs and four viewport/tab combinations — all width-only, none
in height, and no other chip geometry changes. Full sweep diffed before/after:
Full suite green (2138 tests across 5 workspaces), typecheck and Biome clean.
🤖 Generated with Claude Code