Switch Component doesn't disable click functionality when disabled - #31199

Closed
fabOnReact wants to merge 2 commits into
react:masterfrom
fabOnReact:fix/switch-accessibility
Closed

Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom
fabOnReact:fix/switch-accessibility

Conversation

@fabOnReact

@fabOnReactfabOnReact commented Mar 19, 2021•
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

🚧 Still work in progress 🚧
This issue fixes#30944

Changelog

[Android] [Fixed] - Fix

Test Plan

CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED

TEST SCENARIO

  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled

RESULT

  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4

CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH

TEST SCENARIO

  • The first Switch is disabled with disabled={true}

RESULT - FAILURE

  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>

https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62

2021-03-19.17-31-27.mp4

@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 Mar 19, 2021
@analysis-bot

analysis-bot commented Mar 19, 2021

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

Base commit: ac7ba3e

@analysis-bot

analysis-bot commented Mar 19, 2021

Copy link
Copy Markdown
PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111

Base commit: ac7ba3e

@lunaleaps

lunaleaps commented Apr 29, 2021

Copy link
Copy Markdown
Contributor

@fabriziobertoglio1987 Sorry missing context, why was this closed?

@fabOnReact

fabOnReact commented May 2, 2021•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required

CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED

TEST SCENARIO

  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled

RESULT

  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4

adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.

For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected

CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH

TEST SCENARIO

  • The first Switch is disabled with disabled={true}

RESULT - FAILURE

  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>

https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62

https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13

2021-03-19.17-31-27.mp4

I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️

@lunaleaps

lunaleaps commented May 3, 2021

Copy link
Copy Markdown
Contributor

Thanks @fabriziobertoglio1987 for the clarification!

@fabOnReactfabOnReact mentioned this pull request Dec 20, 2021
Closed
@fabOnReactfabOnReact mentioned this pull request Feb 7, 2022
Closed
fabOnReact added a commit to fabOnReact/react-native that referenced this pull request Feb 8, 2022
@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
@fabOnReactfabOnReact mentioned this pull request Feb 9, 2022
Closed
facebook-github-bot pushed a commit that referenced this pull request Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled

4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-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 doesn't disable click functionality when disabled - #31199
Closed
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Closed
Switch Component doesn't disable click functionality when disabled#31199
fabOnReact wants to merge 2 commits into
react:masterfrom 
fabOnReact:fix/switch-accessibility
Conversation
@fabOnReact
@fabOnReactfabOnReact
commented
Mar 19, 2021•

edited

Loading

Copy link


Copy Markdown

Contributor
Summary
🚧 Still work in progress 🚧

This issue fixes#30944
Changelog
[Android] [Fixed] - Fix
Test Plan
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
2021-03-19.17-31-27.mp4
@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
Mar 19, 2021
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
ios-universaln/a--
Base commit: ac7ba3e
@analysis-bot
analysis-bot
commented
Mar 19, 2021

Copy link


Copy Markdown

PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a8,932,947-18,820
androidhermesarmeabi-v7a8,424,011-16,581
androidhermesx869,423,134-22,159
androidhermesx86_649,367,917-19,930
androidjscarm64-v8a10,666,007-17,987
androidjscarmeabi-v7a10,140,166-15,744
androidjscx8610,717,686-21,343
androidjscx86_6411,302,739-19,111
Base commit: ac7ba3e
@lunaleaps
lunaleaps
commented
Apr 29, 2021

Copy link


Copy Markdown

Contributor
@fabriziobertoglio1987 Sorry missing context, why was this closed?
@fabOnReact
fabOnReact
commented
May 2, 2021•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Thanks a lot @lunaleaps The pull request adds this functionality, as you can see in the below test case the screen reader announces disabled as required
CLICK TO OPEN TESTS RESULTS - SET ACCESSIBILITY TO TRUE IF DISABLED
TEST SCENARIO
  • first switch has disabled={true} and accessibilityState={{disabled: false}}
  • second switch is not disabled
RESULT
  • the screen reader announces disabled on the first switch, but not on the second switch
<SwitchaccessibilityState={{disabled: false}}disabled={true}trackColor={{true: 'yellow',false: 'purple',}}/><SwitchtrackColor={{true: 'yellow',false: 'purple',}}/>
2021-03-19.16-45-03.mp4
adding prop accessibilityState to AndroidSwitchNativeComponent creates regressions with disabled/enable Switch functionality.
For example in the below example the <Switch disabled={true} /> is disabled, but the Switch can be selected/unselected
CLICK TO OPEN TESTS RESULTS - FAILURE - DISABLE SWITCH
TEST SCENARIO
  • The first Switch is disabled with disabled={true}
RESULT - FAILURE
  • The Switch is not disabled. Adding accessibiltyState props will re-enable disabled switches
<Switchdisabled={true}testID="on-off-initial-off"onValueChange={value=>this.setState({falseSwitchIsOn: value})}trackColor={{true: 'yellow',false: 'purple',}}value={this.state.falseSwitchIsOn}/><SwitchtestID="on-off-initial-on"onValueChange={value=>this.setState({trueSwitchIsOn: value})}value={this.state.trueSwitchIsOn}/>
https://github.com/facebook/react-native/blob/eb410cdfe8469805152f4bcdd2924355eb9810bc/Libraries/Components/Switch/AndroidSwitchNativeComponent.js#L60-L62
https://github.com/facebook/react-native/blob/ae4946f98369141caa52fd09d63400d4a28e1d1f/ReactCommon/react/renderer/components/switch/androidswitch/react/renderer/components/androidswitch/AndroidSwitchShadowNode.cpp#L13
2021-03-19.17-31-27.mp4
I did not further investigate it, possibly the mistake is my code implementation. I ended up working on other prs and though of closing this pr as I did not have a solution at the moment for the problem. Sorry If I did not completely answer your question. 🙏 ☮️
@lunaleaps
lunaleaps
commented
May 3, 2021

Copy link


Copy Markdown

Contributor
Thanks @fabriziobertoglio1987 for the clarification!
@fabOnReactfabOnReact
mentioned this pull request
Dec 20, 2021

Closed

@fabOnReactfabOnReact
mentioned this pull request
Feb 7, 2022

Closed

fabOnReact added a commit
to fabOnReact/react-native
that referenced
this pull request
Feb 8, 2022
@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
@fabOnReactfabOnReact
mentioned this pull request
Feb 9, 2022
 Closed

facebook-github-bot pushed a commit
that referenced
this pull request
Feb 16, 2022
@fabOnReact@facebook-github-bot
Switch component does not disable click (#33070)
b2e625a
Summary:
This issue fixes#30944fixes#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 #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 #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: #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
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Switch Component doesn't disable click functionality when disabled


4 participants

@fabOnReact@analysis-bot@lunaleaps@facebook-github-bot