Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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
68 changes: 39 additions & 29 deletions docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,21 +107,45 @@ Inverting screen colors is an Accessibility feature that makes the iPhone and iP
- **timer** Used to represent a timer.
- **toolbar** Used to represent a tool bar (a container of action buttons or components).

#### accessibilityStates (iOS, Android)
#### accessibilityState (iOS, Android)

Describes the current state of a component to the user of an assistive technology.

`accessibilityStates` is an array of values, and may include any of the following:
`accessibilityState` is an object. It should contain the following fields:

- **selected** Used when the element is in a selected state. For example, a button is selected.
- **disabled** Used when the element is disabled and cannot be interacted with.
- **checked** Used to indicate that a checkable element is currently checked.
- **unchecked** Used to indicate that a checkable element is not currently checked.
- **busy** Used to indicate that an element is currently busy.
- **expanded** Used to indicate that an expandable element is currently expanded.
- **collapsed** Used to indicate that an expandable element is currently collapsed.
| Name | Type | Required |
| -------- | ------------------ | -------- |
| disabled | boolean | No |
| selected | boolean | No |
| checked | boolean or 'mixed' | No |
| busy | boolean | No |
| expanded | boolean | No |

To use, set the `accessibilityStates` to an array containing the list of current states.
- **disabled** Used to indicate whether the element is disabled or not. When `true`, the element cannot be interacted with.
- **selected** Used to indicate whether a selectable element is currently selected or not.
- **checked** Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
- **busy** Used to indicate whether an element is currently busy or not.
- **expanded** Used to indicate whether an expandable element is currently expanded or collapsed.

To use, set the `accessibilityState` to an object with a specific definition.

#### accessibilityValue (iOS, Android)

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

`accessibilityValue` is an object. It should contain the following fields:

| Name | Type | Required |
| ---- | ------ | -------- |
| min | number | No |
| max | number | No |
| now | number | No |
| text | string | No |

- **min** The minimum value of this component's range. Should be an integer. Required if now is set.
- **max** The maximum value of this component's range. Should be an integer. Required if now is set.
- **now** The current value of this component's range. Should be an integer.
- **text** A textual description of this component's value. Will override minimum, current, and maximum if set.

#### accessibilityViewIsModal (iOS)

Expand All @@ -135,7 +159,7 @@ A Boolean value indicating whether the accessibility elements contained within t

For example, in a window that contains sibling views `A` and `B`, setting `accessibilityElementsHidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`. This is similar to the Android property `importantForAccessibility="no-hide-descendants"`.

#### onAccessibilityTap (iOS)
#### onAccessibilityTap (iOS, Android)

Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.

Expand Down Expand Up @@ -246,33 +270,19 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read

### Sending Accessibility Events (Android)

Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.

```jsx
import { UIManager, findNodeHandle } from 'react-native';

_onPress: function() {
const radioButton = this.state.radioButton === 'radiobutton_checked' ?
'radiobutton_unchecked' : 'radiobutton_checked'

this.setState({
radioButton: radioButton
});
import { Platform, UIManager, findNodeHandle } from 'react-native';

if (radioButton === 'radiobutton_checked') {
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
UIManager.AccessibilityEventTypes.typeViewClicked);
UIManager.AccessibilityEventTypes.typeViewFocused);
}
}

<CustomRadioButton
accessibilityComponentType={this.state.radioButton}
onPress={this._onPress}/>
```

In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.

## Testing VoiceOver Support (iOS)

To enable VoiceOver, go to the Settings app on your iOS device (it's not available for simulator). Tap General, then Accessibility. There you will find many tools that people use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.
Expand Down
102 changes: 84 additions & 18 deletions docs/touchablewithoutfeedback.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,26 @@ function MyComponent(props) {

---

### `accessible`

When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

| Type | Required |
| ---- | -------- |
| bool | No |

---

### `accessibilityLabel`

Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.

| Type | Required |
| ------ | -------- |
| string | No |

---

### `accessibilityHint`

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
Expand All @@ -47,45 +67,91 @@ An accessibility hint helps users understand what will happen when they perform

---

### `accessibilityLabel`
### `accessibilityRole`

Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.

`accessibilityRole` can be one of the following:

- `'none'` - Used when the element has no role.
- `'button'` - Used when the element should be treated as a button.
- `'link'` - Used when the element should be treated as a link.
- `'search'` - Used when the text field element should also be treated as a search field.
- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
- `'keyboardkey'` - Used when the element acts as a keyboard key.
- `'text'` - Used when the element should be treated as static text that cannot change.
- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
- `'header'` - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- `'summary'` - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
- `'alert'` - Used when an element contains important text to be presented to the user.
- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
- `'menu'` - Used when the component is a menu of choices.
- `'menubar'` - Used when a component is a container of multiple menus.
- `'menuitem'` - Used to represent an item within a menu.
- `'progressbar'` - Used to represent a component which indicates progress of a task.
- `'radio'` - Used to represent a radio button.
- `'radiogroup'` - Used to represent a group of radio buttons.
- `'scrollbar'` - Used to represent a scroll bar.
- `'spinbutton'` - Used to represent a button which opens a list of choices.
- `'switch'` - Used to represent a switch which can be turned on and off.
- `'tab'` - Used to represent a tab.
- `'tablist'` - Used to represent a list of tabs.
- `'timer'` - Used to represent a timer.
- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).

| Type | Required |
| ------ | -------- |
| string | No |

---

### `accessibilityRole`
### `accessibilityState`

| Type | Required |
| ------------------ | -------- |
| AccessibilityRoles | No |
Describes the current state of a component to the user of an assistive technology.

See the [Accessibility guide](accessibility.md#accessibilitystate-ios-android) for more information.

| Type | Required |
| ---------------------------------------------------------------------------------------------- | -------- |
| object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool} | No |

---

### `accessibilityStates`
### `accessibilityActions`

Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.

| Type | Required |
| ---------------------------- | -------- |
| array of AccessibilityStates | No |
See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.

| Type | Required |
| ----- | -------- |
| array | No |

---

### `accessibilityState`
### `onAccessibilityAction`

| Type | Required |
| ------ | -------- |
| Object | No |
Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.

See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.

| Type | Required |
| -------- | -------- |
| function | No |

---

### `accessible`
### `accessibilityValue`

| Type | Required |
| ---- | -------- |
| bool | No |
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) for more information.

| Type | Required |
| ------------------------------------------------------------- | -------- |
| object: {min: number, max: number, now: number, text: string} | No |

---

Expand Down
Loading