Skip to content

fix(Chip): forward accessibilityState prop correctly - #5168

Open
bhumikabiyani wants to merge 3 commits into
callstack:mainfrom
bhumikabiyani:fix/chip-accessibility-state
Open

bhumikabiyani wants to merge 3 commits into
callstack:mainfrom
bhumikabiyani:fix/chip-accessibility-state

Conversation

@bhumikabiyani

@bhumikabiyani bhumikabiyani commented Nov 5, 2026 •

Copy link
Copy Markdown

Motivation

Align Chip accessibility behavior with the conventions established for the 6.x release.

  • Web: Expose aria-pressed only when the caller explicitly provides the selected prop, allowing screen readers to identify toggle button state.
  • Native: Preserve the selected state through the native accessibility props.
  • Remove the previous accessibilityState and aria-checked forwarding to avoid exposing unsupported or misplaced accessibility attributes.

Related issue

Related to #5180

Screenshots / Videos

N/A — accessibility behavior change with no visual UI changes.

Test plan

  • Added tests covering web behavior when selected is omitted, true, and false.
  • Added tests verifying native selected state for omitted, true, and false values.
  • Added regression tests ensuring accessibilityState and aria-checked are not forwarded to unintended elements.
  • yarn test src/components/__tests__/Chip.test.tsx
  • yarn typecheck
  • Targeted lint checks

@github-actions

github-actions Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

Found potential problems with the pull request:

  • The description is too long. Please keep it under 1000 characters.
  • Screenshot or video evidence is missing. Make sure to include one if it affects the UI.

@Doberjohn

Doberjohn commented Nov 6, 2026 •

Copy link
Copy Markdown
Collaborator

We've now decided how a toggle Chip exposes its state in 6.x: on the web it uses aria-pressed (the only selection state role button allows), set only when the app passes selected, while native keeps its selected state. 6.x also moved from accessibilityState to the aria-* props. Would you like to rework this PR that way, dropping the accessibilityState and aria-checked forwarding? The issue for it is #5180.

@bhumikabiyani

Copy link
Copy Markdown
Author

Yes, absolutely! Thanks for clarifying the intended 6.x behavior. I'll rework the PR accordingly, using aria-pressed on web only when selected is explicitly provided, while preserving the native selected state. I'll also update the tests and remove the accessibilityState and aria-checked forwarding.

@bhumikabiyani

Copy link
Copy Markdown
Author

Thanks for explaining! I've updated the PR based on your suggestion.

  • On web, the Chip now uses aria-pressed when selected is passed.
  • On native, the selected state is still handled as before.
  • Removed the old accessibilityState and aria-checked forwarding.
  • Added tests for both web and native to cover selected, unselected, and default cases.

I've also updated the PR description. The tests, typecheck, and lint checks are passing.

Please have a look when you get a chance. Thanks!

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants