Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

@estevaolucas
Copy link

@estevaolucas estevaolucas commented Mar 10, 2019

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.
Copy link

@analysis-bot analysis-bot left a comment

Code analysis results:

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

@pull-bot
Copy link

@pull-bot pull-bot commented Mar 10, 2019

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

@estevaolucas estevaolucas force-pushed the feat/add-reduce-motion-support branch from a2ec146 to 3c44bf0 Mar 10, 2019
@estevaolucas estevaolucas mentioned this pull request Mar 11, 2019
64 tasks
@estevaolucas estevaolucas changed the title [General] [added] - Add "reduce motion" support for AccessibilityInfo [General] [added] - Add support for "reduce motion" into AccessibilityInfo Mar 11, 2019
@kristerkari
Copy link

@kristerkari kristerkari commented Mar 11, 2019

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?

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

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

@estevaolucas
Copy link
Author

@estevaolucas estevaolucas commented Mar 11, 2019

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

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

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

cpojer
cpojer approved these changes Mar 13, 2019
Copy link
Contributor

@cpojer cpojer left a comment

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

@react-native-bot
Copy link
Collaborator

@react-native-bot react-native-bot commented Mar 13, 2019

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

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

@estevaolucas estevaolucas deleted the feat/add-reduce-motion-support branch Mar 14, 2019
facebook-github-bot added a commit that referenced this issue Mar 15, 2019
Summary:
As a follow-up to this other PR #23839, it adds support for other, iOS only, flags into `AccessibilityInfo`.

It adds these other 4 methods:
* `isBoldTextEnabled()`
* `isGrayscaleEnabled()`
* `isInvertColorsEnabled()`
* `isReduceTransparencyEnabled()`

P.S: Android implementation for those methods just return `false` (with `Promise.resolve(false)`)

And the corresponding event listeners:
* `boldTextChanged`
* `grayscaleChanged`,
* `invertColorsChanged`,
* `reduceTransparencyChanged`
Pull Request resolved: #23913

Differential Revision: D14482214

Pulled By: cpojer

fbshipit-source-id: b97725fd12706957d4dad880a97e6b0993738272
facebook-github-bot added a commit that referenced this issue Mar 18, 2019
Summary:
I've realized after #23839 got merged, that `AccessibilityInfo` doesn't have a jest mock the same way as the other frameworks do.

This PR adds the testing mock for `AccessibilityInfo`.
Pull Request resolved: #23982

Differential Revision: D14502780

Pulled By: cpojer

fbshipit-source-id: ec11bd547b6f90858e7f51ed8230c8d02dc4904c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

8 participants