Switch component does not disable click - #33070

Closed
fabOnReact wants to merge 6 commits into
react:mainfrom
fabOnReact:switch-component-does-not-disable-click
Closed

Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom
fabOnReact:switch-component-does-not-disable-click

Conversation

@fabOnReact

@fabOnReactfabOnReact commented Feb 9, 2022•
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.
The issue is caused by the missing prop accessibilityState in the Switch component.

The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).

Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.

The solution proposed in this pull request consists of:

  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.

For example:

<Switchdisabled={true}accessibilityState={{disabled: false}}/>

becomes:

<Switchdisabled={true}accessibilityState={{disabled: true}}/>

Changelog

[General] [Fixed] - Switch Component doesn't disable click functionality when disabled

Test Plan

1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 9, 2022
@fabOnReactfabOnReact mentioned this pull request Feb 9, 2022
Closed
@analysis-bot

analysis-bot commented Feb 9, 2022

Copy link
Copy Markdown
PlatformEngineArchSize (bytes)Diff
ios-universaln/a--

Base commit: 95f950d
Branch: main

@analysis-bot

analysis-bot commented Feb 9, 2022

Copy link
Copy Markdown
PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801

Base commit: 95f950d
Branch: main

This was referenced Feb 9, 2022
Closed
Closed
Closed
Closed
@fabOnReact
fabOnReact marked this pull request as ready for review February 11, 2022 06:29
@facebook-github-botfacebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Feb 11, 2022
blavalla
blavalla approved these changes Feb 11, 2022
View reviewed changes

@blavallablavalla left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good!

Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?

@blavalla

blavalla commented Feb 11, 2022

Copy link
Copy Markdown
Contributor

Looks good!

Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?

Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!

@facebook-github-bot

facebook-github-bot commented Feb 11, 2022

Copy link
Copy Markdown
Contributor

@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@fabOnReact

fabOnReact commented Feb 14, 2022

Copy link
Copy Markdown
ContributorAuthor

@blavalla

Looks good!

Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?

Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!

Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.

As it requires to post 10+ messages to this conversation, you will receive several notifications.
I will do it tomorrow.

facebook-github-bot pushed a commit that referenced this pull request Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot

react-native-bot commented Feb 16, 2022

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.

When will my fix make it into a release? | Upcoming Releases

@react-native-botreact-native-bot added the Merged This PR has been merged. label Feb 16, 2022
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone mentioned this pull request Jul 22, 2025
Open
This was referenced Mar 24, 2026
Merged
Merged
@coderabbitaicoderabbitaiBot mentioned this pull request Jul 31, 2026
Merged
9 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Milestone

No milestone

5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Switch component does not disable click - #33070
Closed
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Closed
Switch component does not disable click#33070
fabOnReact wants to merge 6 commits into
react:mainfrom 
fabOnReact:switch-component-does-not-disable-click
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Feb 9, 2022•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
This issue fixes#30944fixes#30840 (Test Case 7.1, Test Case 7.3, Test Case 7.5) which affects Platform Android. Previous PR #31199.

The issue is caused by the missing prop accessibilityState in the Switch component.
The solution consists of passing the accessibilityState to the AndroidSwitchNativeComponent component as previously implemented in other components (for example, Button).
Relevant discussions #30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
The solution proposed in this pull request consists of:
  1. Passing accessibilityState to the AndroidSwitchNativeComponent
  2. If the value of prop accessibilityState.disabled is different from the prop disabled, the prop disabled over-rides the accessibilityState.disabled value.
For example:
<Switchdisabled={true}accessibilityState={{disabled: false}}/>
becomes:
<Switchdisabled={true}accessibilityState={{disabled: true}}/>
Changelog
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Test Plan
1. Switch has disabled and accessibilityState={{disabled: false}} (link)
2. Switch has disabled (link)
3. Switch has accessibilityState={{disabled: true}} (link)
4. Switch has accessibilityState={{disabled:false}} (link)
5. Switch has disabled={false} and accessibilityState={{disabled:true}} (link)

7. Test Cases on the main branch
7.1. Switch has disabled and accessibilityState={{disabled: false}} (link)
7.3 Switch has accessibilityState={{disabled: true}} (link)
7.5 Switch has disabled={false} and accessibilityState={{disabled:true}} (link)
@fabOnReact
fix Disabled States does not announce or disable function for some co…
1119293
…mponents
Related Discussion fabOnReact/react-native-notes#5
@fabOnReact
Fix misspelling variable name
b3a90cd
Fixed Test Case fabOnReact/react-native-notes#5 (comment)
@fabOnReact
adding jest test cases
94a6a7f
Taken from my previous pr https://github.com/facebook/react-native/pull/31199/files
@fabOnReact
removing changes to Switch iOS (SwitchNativeComponent)
135c562
react#30944 is tagged as
Platform Android.
@fabOnReact
Removing Switch jest iOS test
cc46784
- [There is no changes](135c562) on the iOS functionality to test (previously tested with react#31199)
- I have a test case ready to push that verify no regression on iOS.
I compared the snapshot generated on main and on my branch. They are identical, but I decided to not commit the test case from react#31199.
- I may consider later adding some test cases, but I think they should target the Android Platform
@fabOnReact
Merge branch 'main' into switch-component-does-not-disable-click
de20075
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Feb 9, 2022
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022

Closed

@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: 95f950d

Branch: main
@analysis-bot
analysis-bot
commented
Feb 9, 2022

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,120,463-443
androidhermesarmeabi-v7a7,721,824-337
androidhermesx868,491,241-392
androidhermesx86_648,443,068-412
androidjscarm64-v8a9,787,197-835
androidjscarmeabi-v7a8,773,434-740
androidjscx869,754,579-776
androidjscx86_6410,350,500-801
Base commit: 95f950d

Branch: main

This was referenced Feb 9, 2022

Closed

 Closed


Closed


Closed

@fabOnReact
fabOnReact
marked this pull request as ready for review
February 11, 2022 06:29
@facebook-github-botfacebook-github-bot
added
the 
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
label
Feb 11, 2022
blavalla
blavalla
approved these changes
Feb 11, 2022
View reviewed changes
@blavallablavalla
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
@blavalla
blavalla
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
@facebook-github-bot
facebook-github-bot
commented
Feb 11, 2022

Copy link


Copy Markdown

Contributor
@blavalla has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@fabOnReact
fabOnReact
commented
Feb 14, 2022

Copy link


Copy Markdown

ContributorAuthor
@blavalla
Looks good!
Just confirming, since it wasn't mentioned in the test plan, will this also trigger talkback to announce "Disabled" upon focus of the ?
Oops, ignore me here, I'm bad at Github and didn't see the test plans were links and are super thorough. This looks good!
Thanks a lot. I would re-post the tests cases from fabOnReact/react-native-notes#5 (comment) in this conversation and update the links of the Pull Request summary.
As it requires to post 10+ messages to this conversation, you will receive several notifications.

I will do it tomorrow.
facebook-github-bot pushed a commit
that referenced
this pull request
Feb 15, 2022
@fabOnReact@facebook-github-bot
Text Component does not announce disabled and disables click function…
7b2d817
…ality when disabled (#33076)
Summary:
This issue fixes#30937fixes#30947fixes#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR #31252)
Related PR #33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
## Changelog
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: #33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: 17095c6
[11]: 6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
@react-native-bot
react-native-bot
commented
Feb 16, 2022

Copy link


Copy Markdown

Collaborator
This pull request was successfully merged by @fabriziobertoglio1987 in b2e625a.
When will my fix make it into a release? | Upcoming Releases
@react-native-botreact-native-bot
added
the 
Merged
This PR has been merged.
label
Feb 16, 2022
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Text Component does not announce disabled and disables click function…
31c3a14
…ality when disabled (react#33076)
Summary:
This issue fixesreact#30937fixesreact#30947fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) .
The issue is caused by:
1) The missing javascript logic on the `accessibilityState` in the Text component fabOnReact@6ab7ab3 (as previously implemented in [Button][20]).
2) The missing setter for prop `accessible` in `ReactTextAnchorViewManager` fabOnReact@17095c6 (More information in previous PR react#31252)
Related PR react#33070 PR callstack/react-native-slider#354
[20]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
[Android] [Fixed] - Text Component does not announce disabled and disables click functionality when disabled
Pull Request resolved: react#33076
Test Plan:
[1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][1])
[2]. Text has `disabled` ([link][2])
[3]. Text has `accessibilityState={{disabled: true}}` ([link][3])
[4]. Text has `accessibilityState={{disabled:false}}` ([link][4])
[5]. Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][5])
[6]. Text has `accessibilityState={{disabled:true}}` and method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [b4cd8][10]) ([link][6])
7. Test Cases on the main branch
[7.1]. Text has `disabled` and `accessibilityState={{disabled: false}}` ([link][7.1])
[7.3] Text has `accessibilityState={{disabled: true}}` ([link][7.3])
[7.5] Text has `disabled={false}` and `accessibilityState={{disabled:true}}` ([link][7.5])
[7.6] Text has `onPress callback` and `accessibilityState={{disabled: true}}` ([link][7.6])
[7.7] Text has `accessibilityState={{disabled:true}}` and no method `setAccessible` in `ReactTextAnchorViewManager` (tested on commit [c4f98dd][11]) ([link][7.7])
[1]: fabOnReact/react-native-notes#1 (comment)
[2]: fabOnReact/react-native-notes#1 (comment)
[3]: fabOnReact/react-native-notes#1 (comment)
[4]: fabOnReact/react-native-notes#1 (comment)
[5]: fabOnReact/react-native-notes#1 (comment)
[6]: fabOnReact/react-native-notes#1 (comment)
[7.1]: fabOnReact/react-native-notes#1 (comment)
[7.3]: fabOnReact/react-native-notes#1 (comment)
[7.5]: fabOnReact/react-native-notes#1 (comment)
[7.6]: fabOnReact/react-native-notes#1 (comment)
[7.7]: fabOnReact/react-native-notes#1 (comment)
[10]: react@17095c6
[11]: react@6ab7ab3
Reviewed By: blavalla
Differential Revision: D34211793
Pulled By: ShikaSD
fbshipit-source-id: e153fb48c194f5884e30beb9172e66aca7ce1a41
Saadnajmi pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 15, 2023
@fabOnReact@Saadnajmi
Switch component does not disable click (react#33070)
c098dca
Summary:
This issue fixesreact#30944fixesreact#30840 ([Test Case 7.1][7.1], [Test Case 7.3][7.3], [Test Case 7.5][7.5]) which affects Platform Android. Previous PR react#31199.
The issue is caused by the missing prop `accessibilityState` in the Switch component.
The solution consists of passing the accessibilityState to the `AndroidSwitchNativeComponent` component as previously implemented in other components (for example, [Button][8]).
Relevant discussions react#30840 (comment) and https://github.com/facebook/react-native/pull/31001/files#r578827409.
[8]: https://github.com/facebook/react-native/pull/31001/files#diff-4f225d043edf4cf5b8288285b6a957e2187fc0242f240bde396e41c4c25e4124R281-R289
The solution proposed in this pull request consists of:
1. Passing `accessibilityState` to the `AndroidSwitchNativeComponent`
2. If the value of prop `accessibilityState.disabled` is different from the prop `disabled`, the prop `disabled` over-rides the `accessibilityState.disabled` value.
For example:
```jsx
<Switch disabled={true} accessibilityState={{disabled: false}} />
````
becomes:
````jsx
<Switch disabled={true} accessibilityState={{disabled: true}} />
````
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Switch Component doesn't disable click functionality when disabled
Pull Request resolved: react#33070
Test Plan:
[1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[2]. Switch has `disabled`
[3]. Switch has `accessibilityState={{disabled: true}}`
[4]. Switch has `accessibilityState={{disabled:false}}`
[5]. Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
7. Test Cases on the main branch
[7.1]. Switch has `disabled` and `accessibilityState={{disabled: false}}`
[7.3] Switch has `accessibilityState={{disabled: true}}`
[7.5] Switch has `disabled={false}` and `accessibilityState={{disabled:true}}`
[1]: fabOnReact/react-native-notes#5 (comment)
[2]: fabOnReact/react-native-notes#5 (comment)
[3]: fabOnReact/react-native-notes#5 (comment)
[4]: fabOnReact/react-native-notes#5 (comment)
[5]: fabOnReact/react-native-notes#5 (comment)
[7.1]: fabOnReact/react-native-notes#5 (comment)
[7.3]: fabOnReact/react-native-notes#5 (comment)
[7.5]: fabOnReact/react-native-notes#5 (comment)
Reviewed By: kacieb
Differential Revision: D34189484
Pulled By: blavalla
fbshipit-source-id: 8ea9221a5641d05c20d0309abdb3f0d02c569f2f
@jeronejerone
mentioned this pull request
Jul 22, 2025

Open


This was referenced Mar 24, 2026
 Merged

 Merged

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 31, 2026
 Merged

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

Reviewers


1 more reviewer

@blavallablavallablavalla approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

AccessibilityBugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects


None yet


Milestone


No milestone


5 participants

@fabOnReact@analysis-bot@blavalla@facebook-github-bot@react-native-bot