SegmentedControl is 32px at size="lg", below the 44px touch-target floor at every size
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### Summary
`SegmentedControlItem` is 32px tall at `size="lg"` — the largest size the component offers — which is below the 44px minimum touch target size in the WCAG 2.2 AA "Target Size (Minimum)" / Apple HIG / Material guidance that most mobile products hold themselves to. Because `lg` is the ceiling, no prop combination reaches the floor; a consumer has to override the height in CSS.
### Measured
`@astryxdesign/core@0.5.2`, Chromium, 390px viewport (iPhone-class width), `getBoundingClientRect().height` on `.astryx-segmented-control-item`:
| `size` | height |
| --- | --- |
| `sm` | 24px |
| `md` | 28px |
| `lg` | **32px** |
Rendered as:
```tsx
```
For comparison, in the same render `Button` and `ToggleButton` take `min-height: 44px` from our own phone floor and measure 44px; the segmented control does not, because its class was not in that floor's selector list. We have added it locally — this issue is about the shipped default.
### Why it matters
A segmented control is frequently a primary phone affordance (a view switcher, a filter). At 32px it is the smallest interactive control in a typical Astryx phone surface, and it is the one users hit while walking.
### Suggested
Either raise `size="lg"` to a 44px minimum on coarse pointers, or expose the height so a theme can. A `@media (pointer: coarse)` floor inside the component would fix it for every consumer without changing desktop density — which is the part consumers cannot safely do themselves, since a blanket `min-height` on Astryx classes changes non-control density too.
Contributor guide
Research direction
Start by locating the SegmentedControl and SegmentedControlItem styles, then inspect the phone-floor selector that already gives Button and ToggleButton a 44px minimum. Reproduce the 390px viewport measurement for each size and verify the chosen coarse-pointer behavior reaches 44px without changing desktop density; add or update the relevant component test if one exists.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100