Apply WCAG 2.5.8 (24px min hit target) consistently across small controls
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Several interactive controls render below the WCAG 2.5.8 (Target Size, Minimum — 24×24px) threshold. An earlier attempt (commit b3ab3bcb) added transparent ::before pseudo-elements to pad the hit boxes, but it was reverted because the 24px rule was applied unevenly and left gaps. This issue tracks doing it consistently.
Sub-24px controls today
| Control | Size(s) below 24px |
|---|---|
| checkbox | .small 12px, .large 16px |
| radio | .small 12px, default 16px |
| icon-button | size-1 12px, size-2 16px, size-3 20px |
| toggle | size-1 12px, size-2 16px |
| slider | small thumb 8×16px |
| chip | dismiss button ~12px |
| callout | dismiss ~20px |
| color-picker | thumbs (small) |
| sidebar handle | 4px |
(space-4 = 12px, space-5 = 16px, space-6 = 20px, space-7 = 24px.)
Problems with the reverted attempt
- Inconsistent threshold. icon-button and toggle expanded both their 12px and 16px sizes; checkbox and radio expanded only 12px, leaving the 16px
.largecheckbox and 16px default radio untouched. Same pixel size, different treatment. - 20px controls left as-is. icon-button size-3 (20px) and callout dismiss (20px) still fall under 24px — they pass only via WCAG's spacing exception, not the minimum.
- Coverage gaps. chip dismiss (~12px) and color-picker thumbs were never touched.
- Grouped-toggle clip. Inside
.group(overflow: clip, 1px gaps) the::beforeexpansion is clipped at the group edge, so the fix is partly defeated there.
Suggested approach
- Decide the policy explicitly: expand every interactive target below 24px, or rely on the spacing exception for ≥20px targets and document that. Then apply it uniformly.
- If checkboxes/radios are exempt because they sit inside a clickable label, state that and skip their box expansion entirely (don't expand only the 12px variant).
- Consider a shared pattern for the pseudo-element expansion — a
--rs-space-7(24px) named min-target with the inset derived viacalc()— to avoid repeating magic insets (-6/-4/-8) across five files. - Resolve the grouped-toggle clipping (e.g. rethink the group's
overflow, or accept and document the limit).
Notes
The mechanism itself (transparent absolutely-positioned ::before, position: relative host, layout/visuals unchanged) was correct and the per-size math was right — the issue is scope/consistency, not technique.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the checkbox, radio, icon-button, toggle, slider, chip, callout, color-picker, and sidebar-handle implementations and their grouped-toggle styles. Review the reverted commit b3ab3bcb and the current spacing tokens before choosing a uniform below-24px policy. Done means every listed control follows that policy, grouped toggles are handled, and any spacing-exception or label exemption is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100