question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

accessibilityState "disabled" can NOT be changed after being set to its initial value

See original GitHub issue

Description

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:open
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
hramoscommented, Oct 27, 2020

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!

0reactions
github-actions[bot]commented, Oct 28, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found