accessibilityState "disabled" can NOT be changed after being set to its initial value
See original GitHub issueDescription
If accessibilityState
prop is set to “disabled” it can not be changed by setting accessibilityState
to empty object/null or to false, e.g. { disabled: false }
.
React Native version:
System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Memory: 594.19 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.4.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5977832
Xcode: 11.4/11E146 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1
Snack, code example, screenshot, or link to a repository:
Whenever this.state.disabled
changes its value from false
to true
and vise versa the acessibilityState
still keeps its initial value and does not change accordingly.
<TouchableHighlight
accessible
accessibilityRole={'button'}
accessibilityLabel={'Tap me'}
accessibilityState={{ disabled: this.state.disabled }}
activeOpacity={0.6}
disabled={this.state.disabled}
onPress={this.onPress}
>
<Text>{'Tap Me'}</Text>
</TouchableHighlight>
Miscellaneous
Additionally, it seems like changes introduced in Accessibility API in RN 0.61 (deprecation of accessibilityTraits
and accessibilityComponentType
, accessibilityStates
-> accessibilityState
) have made https://github.com/facebook/react-native/issues/21122 reproducible again.
Providing key={new Date()}
to a component helps to flip its accessibilityState
“disabled” value.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Change accessibility label on state change after a button click
I have a set of touchable opacities used as selectable items. On clicking on one of these, that particular item is selected. I...
Read more >Accessibility - React Native
To use, set the accessibilityState to an object with a specific definition. accessibilityValue . Represents the current value of a component.
Read more >Accessibility · React Native - GitHub Pages
When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible....
Read more >Creating Accessible React Native Apps | by Scott Vinkle
For example, setting a control as “disabled” is a matter of assigning the accessibilityState prop with an object key name of disabled and ......
Read more >Accessible React Native TextInput - Hinge Health
This is the first in a series of posts that will feature fully accessible atomic components built in React Native. Disclaimer: I do...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Just a quick note, @palexs, please avoid pinging me on individual issues especially if they were just opened. We have a issue triage process in place and folks will look at each issue in order. Thanks!
This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.