Apply WCAG 2.5.8 (24px min hit target) consistently across small controls
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 55/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- react, typescript
- Ambito
- accessibility, frontend
Direzione di ricerca
Inizia individuando le implementazioni di checkbox, radio, icon-button, toggle, slider, chip, callout, color-picker e sidebar-handle e i relativi stili per i toggle raggruppati. Esamina il commit annullato b3ab3bcb e gli attuali token di spaziatura prima di scegliere una policy uniforme inferiore a 24 px. Il lavoro è completato quando ogni controllo elencato segue questa policy, i toggle raggruppati sono gestiti e qualsiasi eccezione di spaziatura o esenzione per l’etichetta è documentata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 70
- Fork
- 13
- Merge medio
- 8g 56m
- PR unite (30g)
- 16
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di raystack/apsara
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 75/100
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog Apertaenhancement global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
-
bug global
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
Tutte le issue di raystack/apsara
Issue simili
-
Difficoltà 1/5 1-3 ore Idoneità per principianti 88/100
motiondivision/motion#3849 ·
-
Add: S Play Event HD Apertacheck:passed streams:add
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
LiteLLM proxy response_cost (x-litellm-response-cost) is never applied to ChatModelOutput.cost Apertabug
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
i-am-bee/beeai-framework#1697 · 1 reazione ·
-
Support bun dedupe Apertaenhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
antfu/node-modules-inspector#214 ·