facebook / facebook/astryx

SegmentedControl is 32px at size="lg", below the 44px touch-target floor at every size

Open Beginner friendly
#6,013 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.