Skip to content

Navigation Menu

Sign in
Sign up

fix(core): floor SegmentedControlItem to a 44px touch target on coarse pointers - #6084

Open
ManoharPaturi wants to merge 1 commit into
facebook:main from
ManoharPaturi:fix/segmented-control-touch-floor
Open

fix(core): floor SegmentedControlItem to a 44px touch target on coarse pointers #6084
ManoharPaturi wants to merge 1 commit into
facebook:main from
ManoharPaturi:fix/segmented-control-touch-floor

Conversation

@ManoharPaturi

@ManoharPaturi ManoharPaturi commented Sep 6, 2026

Copy link
Copy Markdown
Contributor

Fixes #6013

Summary

SegmentedControlItem topped out at 32px (size="lg" = --size-element-lg − 4px), below the 44px minimum touch target of WCAG 2.2 AA "Target Size (Minimum)" / Apple HIG / Material — and since lg is the ceiling, no prop combination could reach the floor. Button and ToggleButton already honour the floor on phone surfaces; the segmented control's class was simply not in it.

Change

A @media (pointer: coarse) min-height: 44px floor on the item's base style — mirroring TouchDateField's monthArrow floor (min-height scoped to coarse pointers, default: null). Every size is floored on touch; desktop density is unchanged (no unconditional rule), which is the part consumers cannot safely do themselves.

Tests

New case in SegmentedControl.test.tsx using the repo's injectedRules() CSSOM pattern (mirroring InputClearButton): the item's classes have a coarse-pointer rule carrying min-height: 44px, and no unconditional min-height exists. Verified the test fails on the unfloored component and passes with the fix.

vitest run packages/core/src/SegmentedControl → 44 passed; core tsc --noEmit, eslint, check:sync, and check:changesets clean. Doc note on the size prop; changeset included.

Copilot AI lite review requested due to automatic review settings September 6, 2026 06:33

vercel Bot commented Sep 6, 2026
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
astryx Ready Ready Preview Sep 6, 2026 6:37am UTC

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Sep 6, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Sep 6, 2026
github-actions Bot added a commit that referenced this pull request Sep 6, 2026

github-actions Bot commented Sep 6, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

SegmentedControl (@astryxdesign/core) · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 407 -
Complexity N/A Very High (39) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.8KB 1.2KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

Status: No visual change across 4 compared shot(s).


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@cixzhang cixzhang Awaiting requested review from cixzhang cixzhang is a code owner
@imdreamrunner imdreamrunner Awaiting requested review from imdreamrunner imdreamrunner is a code owner
@josephfarina josephfarina Awaiting requested review from josephfarina josephfarina is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

2 participants

AltStyle によって変換されたページ (->オリジナル) /