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.

@facebook-github-bot facebook-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 10, 2019
Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

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

@pull-bot
Copy link

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 Compare March 10, 2019 23:24
@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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@estevaolucas
Copy link
Author

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

Copy link
Contributor

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@cpojer cpojer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@facebook-github-bot facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Mar 13, 2019
@react-native-bot
Copy link
Collaborator

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

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

@react-native-bot react-native-bot added Merged This PR has been merged. and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Mar 13, 2019
@estevaolucas estevaolucas deleted the feat/add-reduce-motion-support branch March 14, 2019 04:23
facebook-github-bot pushed a commit that referenced this pull request 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 pushed a commit that referenced this pull request 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
Labels
API: AccessibilityInfo CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants