Skip to content

fix(widgets): give the proof badge and pill link a 24x24 target size (WCAG 2.2 AA) - #2

Merged
chrisjleal merged 1 commit into
mainfrom
fix/proof-badge-target-size
Sep 28, 2026
Merged

chrisjleal merged 1 commit into
mainfrom
fix/proof-badge-target-size

Conversation

@chrisjleal

Copy link
Copy Markdown
Contributor

Defect

WCAG 2.2 AA Target Size (Minimum) requires a 24x24 CSS px hit area. The sm pill computed to 16px tall: 10px text at line-height: 1, plus padding: 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 live dev.proofable.me:

/         -> target-size(serious)x2 -> ... .inline-flex[title="Example account verification"] > a[aria-label="Verified"][rel="noreferrer"]
/connect  -> target-size(serious)x2 -> ... .inline-flex[title="Example account verification"] > a[aria-label="Verified"][rel="noreferrer"]

Mobile width only — these pills sit in a list, and the spacing exception does not apply where two stack. /pricing and /verify pass, so this is localized to the badge.

Fix

Both exported pills — ProofBadge and ProofablePillLink — get min-height: 24, min-width: 24, box-sizing: border-box, and justifyContent: center (so the label stays centred once the pill is taller than its text).

border-box matters: 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.js pin 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) with expected ... to contain 'min-height:24px', then passes again when restored. An assertion that cannot fail is not an assertion.

Test Files  1 passed (1)   Tests  16 passed (16)
full suite: 15 files / 199 tests passed, exit 0
lint: 0 errors

dist/ is gitignored and built by prepack, 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 /connect mobile a11y checks stay red until that bump lands.

…(WCAG 2.2 AA)

Co-authored-by: Cursor <cursoragent@cursor.com>
@chrisjleal
chrisjleal merged commit afb371e into main Sep 28, 2026
1 check passed
@chrisjleal
chrisjleal deleted the fix/proof-badge-target-size branch September 28, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant