Files
react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js
Estevão Lucas 0090ab32c2 - Add support for "reduce motion" into AccessibilityInfo (#23839)
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](https://knowbility.org/blog/2018/WCAG21-233Animations/)

It's exposed by [`UIAccessibility`' isReduceMotionEnabled ](https://developer.apple.com/documentation/uikit/uiaccessibility/1615133-isreducemotionenabled
) on iOS and [Settings.Global.TRANSITION_ANIMATION_SCALE](https://developer.android.com/reference/android/provider/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](https://developer.apple.com/documentation/uikit/uiaccessibility), such as `isShakeToUndoEnabled`, `isReduceTransparencyEnabled`, `isGrayscaleEnabled`, `isInvertColorsEnabled`)

(iOS code inspired by [phonegap-mobile-accessibility](https://github.com/phonegap/phonegap-mobile-accessibility). And Android by [Flutter](https://github.com/flutter/engine/blob/master/shell/platform/android/io/flutter/view/AccessibilityBridge.java
))
Pull Request resolved: https://github.com/facebook/react-native/pull/23839

Differential Revision: D14406227

Pulled By: hramos

fbshipit-source-id: adf43be84c488522bf1e29d862681220ad193883
2019-03-12 20:28:21 -07:00

113 lines
2.8 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
const NativeModules = require('NativeModules');
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
const UIManager = require('UIManager');
const RCTAccessibilityInfo = NativeModules.AccessibilityInfo;
const REDUCE_MOTION_EVENT = 'reduceMotionDidChange';
const TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange';
type ChangeEventName = $Enum<{
change: string,
reduceMotionChanged: string,
screenReaderChanged: string,
}>;
const _subscriptions = new Map();
/**
* Sometimes it's useful to know whether or not the device has a screen reader
* that is currently active. The `AccessibilityInfo` API is designed for this
* purpose. You can use it to query the current state of the screen reader as
* well as to register to be notified when the state of the screen reader
* changes.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html
*/
const AccessibilityInfo = {
isReduceMotionEnabled: function(): Promise<boolean> {
return new Promise((resolve, reject) => {
RCTAccessibilityInfo.isReduceMotionEnabled(resolve);
});
},
isScreenReaderEnabled: function(): Promise<boolean> {
return new Promise((resolve, reject) => {
RCTAccessibilityInfo.isTouchExplorationEnabled(resolve);
});
},
/**
* Deprecated
*
* Same as `isScreenReaderEnabled`
*/
get fetch() {
return this.isScreenReaderEnabled;
},
addEventListener: function(
eventName: ChangeEventName,
handler: Function,
): void {
let listener;
if (eventName === 'change' || eventName === 'screenReaderChanged') {
listener = RCTDeviceEventEmitter.addListener(
TOUCH_EXPLORATION_EVENT,
enabled => {
handler(enabled);
},
);
} else if (eventName === 'reduceMotionChanged') {
listener = RCTDeviceEventEmitter.addListener(
REDUCE_MOTION_EVENT,
enabled => {
handler(enabled);
},
);
}
_subscriptions.set(handler, listener);
},
removeEventListener: function(
eventName: ChangeEventName,
handler: Function,
): void {
const listener = _subscriptions.get(handler);
if (!listener) {
return;
}
listener.remove();
_subscriptions.delete(handler);
},
/**
* Set accessibility focus to a react component.
*
* See http://facebook.github.io/react-native/docs/accessibilityinfo.html#setaccessibilityfocus
*/
setAccessibilityFocus: function(reactTag: number): void {
UIManager.sendAccessibilityEvent(
reactTag,
UIManager.AccessibilityEventTypes.typeViewFocused,
);
},
};
module.exports = AccessibilityInfo;