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
Contributor

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.
@analysis-bot
Copy link

left a comment

Code analysis results:

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

This comment has been minimized.

Copy link

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 estevaolucas:feat/add-reduce-motion-support branch from da5a517 to a2ec146 Mar 10, 2019

@estevaolucas estevaolucas force-pushed the estevaolucas:feat/add-reduce-motion-support branch from a2ec146 to 3c44bf0 Mar 10, 2019

@estevaolucas estevaolucas referenced this pull request Mar 11, 2019
38 of 61 tasks complete

@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

This comment has been minimized.

Copy link

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?

@facebook-github-bot
Copy link

left a comment

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

@estevaolucas

This comment has been minimized.

Copy link
Contributor Author

commented Mar 11, 2019

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

@facebook-github-bot
Copy link

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

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

This comment has been minimized.

Copy link
Collaborator

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 estevaolucas:feat/add-reduce-motion-support branch Mar 14, 2019

facebook-github-bot added a commit that referenced this pull request Mar 15, 2019

- add more iOS flags into AccessibilityInfo (#23913)
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 pull request Mar 18, 2019

Add missing mock for AccessibilityInfo (#23982)
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
8 participants
You can’t perform that action at this time.