When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
+On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
@@ -105,13 +105,20 @@
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
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.
-_onPress: function() {
- this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
- “radiobutton_unchecked” : “radiobutton_checked”;
- if (this.state.radioButton === “radiobutton_checked”) {
- RCTUIManager.sendAccessibilityEvent(
- ReactNative.findNodeHandle(this),
- RCTUIManager.AccessibilityEventTypes.typeViewClicked);
+import { UIManager, findNodeHandle } from 'react-native';
+
+_onPress: function() {
+ const radioButton = this.state.radioButton === 'radiobutton_checked' ?
+ 'radiobutton_unchecked' : 'radiobutton_checked'
+
+ this.setState({
+ radioButton: radioButton
+ });
+
+ if (radioButton === 'radiobutton_checked') {
+ UIManager.sendAccessibilityEvent(
+ findNodeHandle(this),
+ UIManager.AccessibilityEventTypes.typeViewClicked);
}
}