[General] [added] - Add support for "reduce motion" into AccessibilityInfo

[estevaolucas]

Summary

This PR adds isReduceMotionEnabled() to AccessibilityInfo in other to add support for "reduce motion", exposing the Operational System's settings option. Additionally, it adds a new event, reduceMotionChanged, in order to listen for this flag's update.

With this feature, developers will be able to disable or reduce animations, something that will be required as soon as WCAG 2.1 draft got approved. See WCAG 2.1 — 2.3.3 Animations from Interaction criteria

Changelog

It's exposed by UIAccessibility' isReduceMotionEnabled on iOS and Settings.Global.TRANSITION_ANIMATION_SCALE on Android.

Up until now, AccessibilityInfo only exposes screen reader flag. By adding this second accessibility option, it's a good opportunity to rename fetch method to an appropriate name, isScreenReaderEnabled, as well as rename change event to screenReaderChanged, which will make it clearer and more specific.

(In case it's approved, a follow-up PR could exposes more iOS acessibility flags, such as isShakeToUndoEnabled, isReduceTransparencyEnabled, isGrayscaleEnabled, isInvertColorsEnabled)

(iOS code inspired by phonegap-mobile-accessibility. And Android by Flutter)

Test Plan

For iOS:
"General" > "Accessibility" > "Reduce Motion" in Settings, then make sure the toggle next to "Reduce Motion" is enabled.

For Android:
Reduce motion is only an option from Android 9 via "Accessibility" > "Reduce Motion" in Settings. For other versions, it can be enabled via "Transition Animation Scale" in "Developer options" selecting "Animation off"

The api applied:

componentDidMount() {
  AccessibilityInfo.isReduceMotionEnabled().done(isReduceMotionEnabled => {
    this.setState({ isReduceMotionEnabled });
  });

  AccessibilityInfo.addEventListener(
    "reduceMotionChanged",
    this._handleReduceMotionToggled
  );
}

_handleReduceMotionToggled = isReduceMotionEnabled => {
  this.setState({ isReduceMotionEnabled });
};

TODO:

• Submit react-native-web PR updating AccessibilityInfo documentation.

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.

[pull-bot]

Messages

📖

📋 Changelog Format - Did you include a Changelog? A changelog entry has the following format: [CATEGORY] [TYPE] - Message. CATEGORY may be: General iOS Android TYPE may be: Added, for new features. Changed, for changes in existing functionality. Deprecated, for soon-to-be removed features. Removed, for now removed features. Fixed, for any bug fixes. Security, in case of vulnerabilities. MESSAGE may answer "what and why" on a feature level. Use this to briefly tell React Native users about notable changes.

Generated by 🚫 dangerJS against 2294a73

[kristerkari]

I really hope that this change gets accepted. Currently it's not possible to implement as good accessibility support on React Native than it is on native iOS, and disabling animations when "reduced motion" is enabled is a great thing.

(In case it's approved, a follow-up PR could exposes more iOS acessibility flags, such as isShakeToUndoEnabled, isReduceTransparencyEnabled, isGrayscaleEnabled, isInvertColorsEnabled)

These area also good additions allow even better experience. Btw. are there any similar flags on Android for these ones?

[facebook-github-bot]

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

[estevaolucas]

@kristerkari I think just "inverted color" is also supported by Android

[facebook-github-bot]

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

[cpojer]

Nice work, thanks for adding this functionality! I'll try to land it as it seems like it got stuck earlier.

[react-native-bot]

This pull request was successfully merged by @elucaswork in 0090ab3.

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