SegmentedControl is 32px at size="lg", below the 44px touch-target floor at every size
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- typescript
- Domain
- accessibility, frontend
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.
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:
<SegmentedControl size="lg" label="…" value={v} onChange={setV}>
<SegmentedControlItem value="a" label="Alpha" />
<SegmentedControlItem value="b" label="Beta" />
</SegmentedControl>
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.
- Dominant language
- TypeScript
- Stars
- 13.3k
- Forks
- 1.1k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 630
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from facebook/astryx
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100