[EnesKartal]

Motivation

On web, each SegmentedButtons segment sets aria-checked on role="button", which ARIA disallows (axe aria-allowed-attr), so the checked state isn't announced.

Related issue

Fixes #5181

Screenshots / Videos

No visual change, only roles: single select → radio segments in a radiogroup row; multiSelect → checkbox segments.

Test plan

• New RNTL tests for roles + checked state; snapshot diff is only role values.
• SegmentedButton jest suite, yarn typecheck, yarn lint pass.
• Manual: example app on web → /segmented-button → axe shows no aria-allowed-attr (not run by me).

Same pattern as ConnectedButtonGroup (#5074).

Prepared with AI assistance; I reviewed and tested the change.

[github-actions]

Found potential problems with the pull request:

• Screenshot or video evidence is missing. Make sure to include one if it affects the UI.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.

[omerfarukgurbuz]

The new radiogroup needs a group-level accessible name API. At 2becd83, the wrapper only receives role and style, and Props does not expose a group label. The individual segment labels do not name their group.

WAI-ARIA 1.2 requires an author-provided accessible name for radiogroup. Rendering this PR's actual components with React 19.3.0 and React Native Web 0.21.4 confirms that even passing aria-label="Transport" results in an unnamed group: the prop is discarded.

Please expose and forward aria-label and aria-labelledby to the single-select wrapper, add a labelled usage example, and cover both naming paths. Keep those attributes off the current generic multi-select wrapper. I checked a small patch with DOM tests: the named-group assertion fails on this PR and passes with the forwarding change; checkbox selection and the existing multi-select wrapper remain unchanged. This validation used jsdom with Reanimated animations stubbed and the visual ripple disabled; no screen-reader or device testing was performed.

[EnesKartal]

Thanks for checking this so carefully. SegmentedButtons now accepts aria-label and aria-labelledby and forwards them only to the single-select radiogroup wrapper; the multi-select wrapper stays unchanged. The docs usage and the default example now pass aria-label="Transport mode", and there are tests for both naming paths plus one making sure the multi-select wrapper does not get them.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.