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

Update AccessibilityInfo with new methods and events #835

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 90 additions & 22 deletions docs/accessibilityinfo.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<View>
<Text>
The reduce motion is{' '}
{this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}.
</Text>
<Text>
The screen reader is{' '}
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
Expand All @@ -53,22 +71,67 @@ 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)

---

# Reference

## 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.
Expand All @@ -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.

---

Expand Down