Tap Targets — WCAG 2.5.8 AA

AA requires a 24×24 CSS px minimum tap target (met by size OR spacing). Every box below is measured from the real rendered control. The recommended box floors each axis to 24 independently — a dimension that already passes (e.g. a 32px-wide switch) is never shrunk.
NEEDS HARDENING
Tokenizer (in context)Needs hardening
Measured (current)
Alice JohnsonCharlie Brown
— — under 24
Recommended (≥24 each axis)
Alice JohnsonCharlie Brown
— — under 24
Recommendation: The trailing clear-all “×” measures 20×20 — expand its hit area to 28 via a ::after inset on the shared InputClearButton (see the core hit-area PR). The per-token remove “×” is 16×16 visually but already passes via a 44px ::after hit area — no change.
TextInput — clear buttonNeeds hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Clear × is 16×16 — this input rolls its own clearButton (no ::after) instead of using the shared InputClearButton (which Typeahead/Tokenizer use and which passes at 28×28). Fix: route through InputClearButton for a 28×28 hit area (visual × unchanged).
NumberInput — clear buttonNeeds hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Same as TextInput — self-rolled 16×16 clear ×. Adopt the shared InputClearButton (::after inset:-4px → 28×28).
DateInput — clear buttonNeeds hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Clear × is 16×16 (self-rolled). Adopt InputClearButton → 28×28. Note: the calendar-toggle glyph beside it is ALSO 16×16 (see next).
DateInput — calendar toggleExempt (2.5.8)
Measured (current)
— — under 24
Recommendation: EXEMPT under WCAG 2.5.8 (equivalent control). The 16×16 toggle opens the calendar, but so does clicking the field itself (role=combobox, 442×32 — measured & hit-tested). The function has an equivalent target ≥24, so the small glyph is permitted. No change required — a redundant affordance, not a failure.
TimeInput — clear buttonNeeds hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Self-rolled 16×16 clear ×. Adopt the shared InputClearButton (::after inset:-4px → 28×28).
Slider thumbNeeds hardening
Measured (current)
Volume
— — under 24
Recommended (≥24 each axis)
Volume
— — under 24
Recommendation: Thumb is 20×20 with no hit expansion. Add a ::after inset to reach a 28×28 hit area (visual thumb unchanged).
Checkbox (sm, label hidden)Needs hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Box is 20×20 on sm. Make the whole box the target (fill the input) and floor to 24×24 on pointer: coarse.
Radio (sm, list item)Needs hardening
Measured (current)
Notify me via
— — under 24
Recommended (≥24 each axis)
Notify me via
— — under 24
Recommendation: Radio circle is 20×20 on sm (24×24 on md, which passes). Make the whole circle the target (fill the input) and floor to 24×24 on pointer: coarse — same fix as Checkbox.
Switch (sm, label hidden)Needs hardening
Measured (current)
— — under 24
Recommended (≥24 each axis)
— — under 24
Recommendation: Track is 32×20 — width already passes, only the height fails. Make the whole switch the target (fill the input) and floor the HEIGHT to 24 on coarse; keep the 32px width.