From c758612d5e2d7be2760c0205f6b4763521c15ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o=20Lucas?= Date: Thu, 14 Mar 2019 00:16:57 -0400 Subject: [PATCH] update AccessibilityInfo with new methods and events --- docs/accessibilityinfo.md | 112 ++++++++++++++++++++++++++++++-------- 1 file changed, 90 insertions(+), 22 deletions(-) diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md index 2b2fd31fee5..c2528e5fdd0 100644 --- a/docs/accessibilityinfo.md +++ b/docs/accessibilityinfo.md @@ -8,39 +8,57 @@ Sometimes it's useful to know whether or not the device has a screen reader that Here's a small example illustrating how to use `AccessibilityInfo`: ```javascript -class ScreenReaderStatusExample extends React.Component { +class AccessibilityStatusExample extends React.Component { state = { + reduceMotionEnabled: false, screenReaderEnabled: false, }; componentDidMount() { AccessibilityInfo.addEventListener( - 'change', + 'reduceMotionChanged', + this._handleReduceMotionToggled, + ); + AccessibilityInfo.addEventListener( + 'screenReaderChanged', this._handleScreenReaderToggled, ); - AccessibilityInfo.fetch().then((isEnabled) => { - this.setState({ - screenReaderEnabled: isEnabled, - }); + + AccessibilityInfo.isReduceMotionEnabled().then((reduceMotionEnabled) => { + this.setState({reduceMotionEnabled}); + }); + AccessibilityInfo.isScreenReaderEnabled().then((screenReaderEnabled) => { + this.setState({screenReaderEnabled}); }); } componentWillUnmount() { AccessibilityInfo.removeEventListener( - 'change', + 'reduceMotionChanged', + this._handleReduceMotionToggled, + ); + + AccessibilityInfo.removeEventListener( + 'screenReaderChanged', this._handleScreenReaderToggled, ); } - _handleScreenReaderToggled = (isEnabled) => { - this.setState({ - screenReaderEnabled: isEnabled, - }); + _handleReduceMotionToggled = (reduceMotionEnabled) => { + this.setState({reduceMotionEnabled}); + }; + + _handleScreenReaderToggled = (screenReaderEnabled) => { + this.setState({screenReaderEnabled}); }; render() { return ( + + The reduce motion is{' '} + {this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. + The screen reader is{' '} {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. @@ -53,11 +71,16 @@ class ScreenReaderStatusExample extends React.Component { ### Methods -* [`fetch`](accessibilityinfo.md#fetch) -* [`addEventListener`](accessibilityinfo.md#addeventlistener) -* [`setAccessibilityFocus`](accessibilityinfo.md#setaccessibilityfocus) -* [`announceForAccessibility`](accessibilityinfo.md#announceforaccessibility) -* [`removeEventListener`](accessibilityinfo.md#removeeventlistener) +- [`isBoldTextEnabled`](accessibilityinfo.md#isBoldTextEnabled) +- [`isGrayscaleEnabled`](accessibilityinfo.md#isGrayscaleEnabled) +- [`isInvertColorsEnabled`](accessibilityinfo.md#isInvertColorsEnabled) +- [`isReduceMotionEnabled`](accessibilityinfo.md#isReduceMotionEnabled) +- [`isReduceTransparencyEnabled`](accessibilityinfo.md#isReduceTransparencyEnabled) +- [`isScreenReaderEnabled`](accessibilityinfo.md#isScreenReaderEnabled) +- [`addEventListener`](accessibilityinfo.md#addeventlistener) +- [`setAccessibilityFocus`](accessibilityinfo.md#setaccessibilityfocus) +- [`announceForAccessibility`](accessibilityinfo.md#announceforaccessibility) +- [`removeEventListener`](accessibilityinfo.md#removeeventlistener) --- @@ -65,10 +88,50 @@ class ScreenReaderStatusExample extends React.Component { ## Methods -### `fetch()` +### `isBoldTextEnabled()` + +```javascript +static isBoldTextEnabled() +``` + +iOS-Only. Query whether a 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. + +### `isGrayscaleEnabled()` + +```javascript +static isGrayscaleEnabled() +``` + +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. + +### `isInvertColorsEnabled()` + +```javascript +static isInvertColorsEnabled() +``` + +Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when invert colors is enabled and `false` otherwise. + +### `isReduceMotionEnabled()` + +```javascript +static isReduceMotionEnabled() +``` + +Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise. + +### `isReduceTransparencyEnabled()` + +```javascript +static isReduceTransparencyEnabled() +``` + +Query whether reduce 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. + +### `isScreenReaderEnabled()` ```javascript -static fetch() +static isScreenReaderEnabled() ``` 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. @@ -83,10 +146,15 @@ static addEventListener(eventName, handler) Add an event handler. Supported events: -* `change`: 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. -* `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. +- `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 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 invert colors is enabled and `false` otherwise. +- `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. +- `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 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. ---