fix(widgets): give the proof badge and pill link a 24x24 target size (WCAG 2.2 AA) - #2
Merged
Merged
Conversation
…(WCAG 2.2 AA) Co-authored-by: Cursor <cursoragent@cursor.com>
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
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.
Defect
WCAG 2.2 AA Target Size (Minimum) requires a 24x24 CSS px hit area. The
smpill computed to 16px tall: 10px text atline-height: 1, pluspadding: 2px 0, plus a 1px border per side.Measured as an axe
target-size(serious) violation on the neus product app, identically against a local production build and against livedev.proofable.me:Mobile width only — these pills sit in a list, and the spacing exception does not apply where two stack.
/pricingand/verifypass, so this is localized to the badge.Fix
Both exported pills —
ProofBadgeandProofablePillLink— getmin-height: 24,min-width: 24,box-sizing: border-box, andjustifyContent: center(so the label stays centred once the pill is taller than its text).border-boxmatters: it keeps the pill at exactly 24px instead of letting the padding push it past the floor, so the visual weight stays as designed and only the hit area grows.Why it belongs here and not in a consumer
The element is owned by this widget, and the widget ships to every consumer. A
[&_a]:override from neus would be a one-off hack beside the design system and would leave every other consumer non-compliant. Fixing it at the source means the next consumer inherits compliance.Test
Two assertions in
test/proof-badge.test.jspin the floor for both components and both sizes. They read the rendered inline style rather than a class name, so a refactor cannot pass them by accident.Negative control run: setting the source floor to 16 fails exactly these two tests (
Tests 2 failed | 14 passed) withexpected ... to contain 'min-height:24px', then passes again when restored. An assertion that cannot fail is not an assertion.dist/is gitignored and built byprepack, so only source and test change here.Follow-up for consumers
The fix reaches the rendered page only after a publish and a version bump in the consuming app. neus is on
@proofable/sdk ^0.1.2; its/and/connectmobile a11y checks stay red until that bump lands.