raystack / raystack/apsara

Apply WCAG 2.5.8 (24px min hit target) consistently across small controls

Open
#854 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Inconsistent threshold. icon-button and toggle expanded both their 12px and 16px sizes; checkbox and radio expanded only 12px, leaving the 16px .large checkbox and 16px default radio untouched. Same pixel size, different treatment.
  2. 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.
  3. Coverage gaps. chip dismiss (~12px) and color-picker thumbs were never touched.
  4. Grouped-toggle clip. Inside .group (overflow: clip, 1px gaps) the ::before expansion 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 via calc() — 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.