Skip to content

Commit

Permalink
Add a pseudo flow declaration for AccessibilityInfo
Browse files Browse the repository at this point in the history
Summary: Changelog: [Internal] - Create a type declaration for AccsesibilityInfo for clearer signal when our public API types change

Reviewed By: yungsters

Differential Revision: D38712552

fbshipit-source-id: cc7c727d41fb03ca714cb05fd10dc32038374fd0
  • Loading branch information
Luna Wei authored and kelset committed Oct 3, 2022
1 parent 9fd7643 commit 73e5533
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 1 deletion.
198 changes: 198 additions & 0 deletions Libraries/Components/AccessibilityInfo/AccessibilityInfo.flow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/

import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
import type {ElementRef} from 'react';

// Events that are only supported on Android.
type AccessibilityEventDefinitionsAndroid = {
accessibilityServiceChanged: [boolean],
};

// Events that are only supported on iOS.
type AccessibilityEventDefinitionsIOS = {
announcementFinished: [{announcement: string, success: boolean}],
boldTextChanged: [boolean],
grayscaleChanged: [boolean],
invertColorsChanged: [boolean],
reduceTransparencyChanged: [boolean],
};

type AccessibilityEventDefinitions = {
...AccessibilityEventDefinitionsAndroid,
...AccessibilityEventDefinitionsIOS,
change: [boolean], // screenReaderChanged
reduceMotionChanged: [boolean],
screenReaderChanged: [boolean],
};

type AccessibilityEventTypes = 'click' | 'focus';
/**
* 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 https://reactnative.dev/docs/accessibilityinfo
*/
export interface AccessibilityInfo {
/**
* Query whether bold text is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when bold text is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isBoldTextEnabled
*/
isBoldTextEnabled: () => Promise<boolean>;

/**
* Query whether grayscale is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when grayscale is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isGrayscaleEnabled
*/
isGrayscaleEnabled: () => Promise<boolean>;

/**
* Query whether inverted colors are currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when invert color is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isInvertColorsEnabled
*/
isInvertColorsEnabled: () => Promise<boolean>;

/**
* Query whether reduced motion is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a reduce motion is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isReduceMotionEnabled
*/
isReduceMotionEnabled: () => Promise<boolean>;

/**
* Query whether reduced transparency is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a reduce transparency is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isReduceTransparencyEnabled
*/
isReduceTransparencyEnabled: () => Promise<boolean>;

/**
* Query whether a screen reader is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when a screen reader is enabled and `false` otherwise.
*
* See https://reactnative.dev/docs/accessibilityinfo#isScreenReaderEnabled
*/
isScreenReaderEnabled: () => Promise<boolean>;

/**
* Query whether Accessibility Service is currently enabled.
*
* Returns a promise which resolves to a boolean.
* The result is `true` when any service is enabled and `false` otherwise.
*
* @platform android
*
* See https://reactnative.dev/docs/accessibilityinfo/#isaccessibilityserviceenabled-android
*/
isAccessibilityServiceEnabled: () => Promise<boolean>;

/**
* Add an event handler. Supported events:
*
* - `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when a reduce
* motion is enabled (or when "Transition Animation Scale" in "Developer options" is
* "Animation off") and `false` otherwise.
* - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument
* to the event handler is a boolean. The boolean is `true` when a screen
* reader is enabled and `false` otherwise.
*
* These events are only supported on iOS:
*
* - `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when a bold text
* is enabled and `false` otherwise.
* - `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when a gray scale
* is enabled and `false` otherwise.
* - `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle
* changes. The argument to the event handler is a boolean. The boolean is `true` when a invert
* colors is enabled and `false` otherwise.
* - `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency
* toggle changes. The argument to the event handler is a boolean. The boolean is `true`
* when a reduce transparency is enabled and `false` otherwise.
* - `announcementFinished`: iOS-only event. Fires when the screen reader has
* finished making an announcement. The argument to the event handler is a
* dictionary with these keys:
* - `announcement`: The string announced by the screen reader.
* - `success`: A boolean indicating whether the announcement was
* successfully made.
*
* See https://reactnative.dev/docs/accessibilityinfo#addeventlistener
*/
addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
eventName: K,
handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
): EventSubscription;

/**
* Set accessibility focus to a React component.
*
* See https://reactnative.dev/docs/accessibilityinfo#setaccessibilityfocus
*/
setAccessibilityFocus: (reactTag: number) => void;

/**
* Send a named accessibility event to a HostComponent.
*/
sendAccessibilityEvent: (
handle: ElementRef<HostComponent<mixed>>,
eventType: AccessibilityEventTypes,
) => void;

/**
* Post a string to be announced by the screen reader.
*
* See https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility
*/
announceForAccessibility: (announcement: string) => void;

/**
* Post a string to be announced by the screen reader.
* - `announcement`: The string announced by the screen reader.
* - `options`: An object that configures the reading options.
* - `queue`: The announcement will be queued behind existing announcements. iOS only.
*/
announceForAccessibilityWithOptions: (
announcement: string,
options: {queue?: boolean},
) => void;

/**
* Get the recommended timeout for changes to the UI needed by this user.
*
* See https://reactnative.dev/docs/accessibilityinfo#getrecommendedtimeoutmillis
*/
getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;
}
4 changes: 3 additions & 1 deletion Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import NativeAccessibilityInfoAndroid from './NativeAccessibilityInfo';
import NativeAccessibilityManagerIOS from './NativeAccessibilityManager';
import legacySendAccessibilityEvent from './legacySendAccessibilityEvent';
import type {ElementRef} from 'react';
import type {AccessibilityInfo as AccessibilityInfoType} from './AccessibilityInfo.flow';

// Events that are only supported on Android.
type AccessibilityEventDefinitionsAndroid = {
Expand Down Expand Up @@ -73,7 +74,7 @@ const EventNames: Map<
*
* See https://reactnative.dev/docs/accessibilityinfo
*/
const AccessibilityInfo = {
const AccessibilityInfo: AccessibilityInfoType = {
/**
* Query whether bold text is currently enabled.
*
Expand Down Expand Up @@ -295,6 +296,7 @@ const AccessibilityInfo = {
*/
addEventListener<K: $Keys<AccessibilityEventDefinitions>>(
eventName: K,
// $FlowIssue[incompatible-type] - Flow bug with unions and generics (T128099423)
handler: (...$ElementType<AccessibilityEventDefinitions, K>) => void,
): EventSubscription {
const deviceEventName = EventNames.get(eventName);
Expand Down

0 comments on commit 73e5533

Please sign in to comment.