[React-Native] Screen reader accessibility fixes

source/community/reactnative/src/components/elements/image.js

@@ -290,7 +290,7 @@ export class Img extends React.Component {
 					onPageLayout={this.onPageLayoutHandler}>
 
 					<Image style={imageComputedStyle}
-						accessible={true}
+						accessible={this.payload.altText ? true : false}
 						accessibilityLabel={this.payload.altText}
 						source={{ uri: imageUrl }} />
 				</ElementWrapper>

source/community/reactnative/src/components/inputs/choice-set/check-box.js

@@ -123,7 +123,10 @@ class CheckBox extends React.PureComponent {
 		return (
 			<TouchableOpacity activeOpacity={1}
 				onPress={this.onChange.bind(this)}
-				style={style}>
+				style={style}
+				accessibilityRole={this.props.isRadioButtonType ? 'radio' : 'checkbox'}
+				accessibilityState={{checked: this.state.checked}}
+				>
 				{this.renderContent()}
 			</TouchableOpacity>
 		)

source/community/reactnative/src/components/inputs/choice-set/choice-set-input.js

@@ -162,7 +162,11 @@ export class ChoiceSetInput extends React.Component {
 			<View style={styles.containerView}>
 				{(Platform.OS === Constants.PlatformIOS) && <TouchableOpacity
 					activeOpacity={1}
-					onPress={onPress}>
+					onPress={onPress}
+					accessible={true}
+					accessibilityRole={'button'}
+					accessibilityState={{expanded: this.state.isPickerSelected}}
+					>
 					<View style={this.styleConfig.dropdown}>
 						<Text
 							style={[this.styleConfig.dropdownText, this.styleConfig.defaultFontConfig]}
@@ -298,7 +302,7 @@ export class ChoiceSetInput extends React.Component {
 					<ElementWrapper configManager={this.props.configManager} json={this.payload} style={styles.containerView} isError={this.state.isError} isFirst={this.props.isFirst}>
 						<InputLabel configManager={this.props.configManager} isRequired={this.isRequired} label={label} />
 						<View
-							accessible={true}
+							accessible={false}
 							accessibilityLabel={this.payload.altText}
 							style={styles.choiceSetView}>
 							{!isMultiSelect ?

source/community/reactnative/src/components/inputs/input-label.js

@@ -19,6 +19,7 @@ export default class InputLabel extends React.Component {
 		this.style = props.style || {};
 		this.isRequired = props.isRequired || false;
 		this.hostConfig = props.configManager.hostConfig;
+		this.altText = props.altText;
 	}
 
 	render() {
@@ -31,7 +32,8 @@ export default class InputLabel extends React.Component {
 						text={label}
 						style={[this.props.configManager.styleConfig.defaultFontConfig, style]}
 						configManager={this.props.configManager}
-						wrap={wrap} />
+						wrap={wrap}
+						altText={this.props.altText} />
 				);
 			} else if (typeof label == Constants.TypeObject && this.isValidLabelType(label.type)) {
 				let element = [];

source/community/reactnative/src/components/inputs/picker-input.js

@@ -83,7 +83,8 @@ export class PickerInput extends React.Component {
 				{({ addInputItem, showErrors }) => (
 					<ElementWrapper configManager={this.props.configManager} style={styles.elementWrapper} json={this.payload} isError={this.state.isError} isFirst={this.props.isFirst}>
 						<InputLabel configManager={this.props.configManager} isRequired={this.isRequired} label={label} />
-						<TouchableOpacity style={styles.inputWrapper} onPress={this.props.showPicker}>
+						<TouchableOpacity style={styles.inputWrapper} onPress={this.props.showPicker}
+						accessibilityRole='button'>
 							{/* added extra view to fix touch event in ios . */}
 							<View
 								accessible={true}

source/community/reactnative/src/components/inputs/toggle-input.js

@@ -8,7 +8,8 @@ import React from 'react';
 import {
 	Switch,
 	StyleSheet,
-	View
+	View,
+	Platform
 } from 'react-native';
 
 import { InputContextConsumer } from '../../utils/context';
@@ -69,16 +70,29 @@ export class ToggleInput extends React.Component {
 							<View
 								accessible={true}
 								accessibilityLabel={this.altText}
-								style={styles.toggleView}>
+								style={styles.toggleView}
+								accessibilityRole={'switch'}
+								onAccessibilityAction={
+									(event) => {
+										if (event.nativeEvent.actionName === 'activate') {
+											this.toggleValueChanged(!this.state.toggleValue, addInputItem);
+										}
+									}
+								}
+								accessibilityActions={[{name: 'activate'}]}
+								accessibilityState={{checked: this.state.toggleValue}}
+							>
 								<Switch
+									accessible={false}
+									importantForAccessibility='no-hide-descendants'
 									style={styles.switch}
 									value={toggleValue}
 									onValueChange={toggleValue => {
 										this.toggleValueChanged(toggleValue, addInputItem)
 									}}>
 								</Switch>
 								<View style={styles.titleContainer}>
-									<InputLabel configManager={this.props.configManager} isRequired={this.isRequired} wrap={this.wrapText} style={styles.title} label={this.title} />
+									<InputLabel configManager={this.props.configManager} isRequired={this.isRequired} wrap={this.wrapText} style={styles.title} label={this.title}/>
 								</View>
 							</View>
 						)