Label touch targets below 44dp accessibility minimum #71

New issue

Open

opened 2026-07-11 20:14:30 +00:00 by starsetbyte · 0 comments

starsetbyte commented

2026-07-11 20:14:30 +00:00

Owner

Context

SafetyLabelPill and SocialLabelRun (in LabelBadge.kt) render inline in the post metadata row with only 2dp vertical padding on labelSmall text — effective touch target ~24dp, well below the 44dp WCAG/Android accessibility minimum.

The problem

Compose clickable modifier uses the layout box as the hit area. To get a 44dp touch target, the component must BE 44dp tall, which stretches the dense metadata row (normally ~20dp). The design spec (Section 10.2) says "Interactive targets are at least 44dp, preferably 48dp" but also "where density allows" — a feed metadata row isn't the right place for full-size targets.

What was tried

heightIn(min = 44.dp) + clickable on wrapper Box/Row: works but visibly stretches the metadata row (confirmed on emulator). Reverted in the geometry pass.

Possible approaches

Custom pointer input — use Modifier.pointerInput with detectTapGestures on a larger hit area than the layout bounds (Compose doesn't natively support touch delegates, but a custom gesture detector might work).
Move clickable to parent Row — make the entire metadata Row 44dp + clickable. Cost: handle/timestamp taps would also open the label sheet (behavior change, but could be acceptable since they're plain Text today).
Accept 44dp density hit — just make the row taller. Revisit after the rest of the design system lands and evaluate holistically.
Custom Layout with out-of-bounds touch handling — measure compact, but intercept touches in a larger region.

Files

app/src/main/java/com/peregrine/android/ui/common/moderation/LabelBadge.kt — SafetyLabelPill, SocialLabelRun
Design spec: Section 7.7 (label pill system), Section 10.2 (touch targets)

P2-2 from the consolidated roadmap (docs/plans/2026-07-11-consolidated-roadmap-and-review.md)
Geometry baseline: fix/post-card-density-baseline (preserves compact density)

## Context `SafetyLabelPill` and `SocialLabelRun` (in `LabelBadge.kt`) render inline in the post metadata row with only 2dp vertical padding on `labelSmall` text — effective touch target ~24dp, well below the 44dp WCAG/Android accessibility minimum. ## The problem Compose `clickable` modifier uses the layout box as the hit area. To get a 44dp touch target, the component must BE 44dp tall, which stretches the dense metadata row (normally ~20dp). The design spec (Section 10.2) says "Interactive targets are at least 44dp, preferably 48dp" but also "where density allows" — a feed metadata row isn't the right place for full-size targets. ## What was tried - `heightIn(min = 44.dp)` + `clickable` on wrapper Box/Row: works but visibly stretches the metadata row (confirmed on emulator). Reverted in the geometry pass. ## Possible approaches 1. **Custom pointer input** — use `Modifier.pointerInput` with `detectTapGestures` on a larger hit area than the layout bounds (Compose doesn't natively support touch delegates, but a custom gesture detector might work). 2. **Move clickable to parent Row** — make the entire metadata Row 44dp + clickable. Cost: handle/timestamp taps would also open the label sheet (behavior change, but could be acceptable since they're plain Text today). 3. **Accept 44dp density hit** — just make the row taller. Revisit after the rest of the design system lands and evaluate holistically. 4. **Custom `Layout` with out-of-bounds touch handling** — measure compact, but intercept touches in a larger region. ## Files - `app/src/main/java/com/peregrine/android/ui/common/moderation/LabelBadge.kt` — `SafetyLabelPill`, `SocialLabelRun` - Design spec: `Section 7.7` (label pill system), `Section 10.2` (touch targets) ## Related - P2-2 from the consolidated roadmap (`docs/plans/2026-07-11-consolidated-roadmap-and-review.md`) - Geometry baseline: `fix/post-card-density-baseline` (preserves compact density)

starsetbyte added the

enhancement

label

2026-07-11 20:14:30 +00:00

starsetbyte referenced this issue

2026-07-11 20:16:42 +00:00

Post-card density baseline + P1 label contrast fix #72

starsetbyte referenced this issue

2026-07-11 21:44:32 +00:00

Run an accessibility and device verification pass across core surfaces #92