Added accessibility labels (d-a-n#49)

* Add accessibility props

Author: chriscohoat

README.md

@@ -40,7 +40,7 @@ class SampleApp extends Component {
             { key: index++, section: true, label: 'Fruits' },
             { key: index++, label: 'Red Apples' },
             { key: index++, label: 'Cherries' },
-            { key: index++, label: 'Cranberries' },
+            { key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
             // etc...
             // Can also add additional custom keys which are passed to the onChange callback
             { key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
@@ -60,6 +60,9 @@ class SampleApp extends Component {
                     data={data}
                     initValue="Select something yummy!"
                     supportedOrientations={['landscape']}
+                    accessible={true}
+                    scrollViewAccessibilityLabel={'Scrollable options'}
+                    cancelButtonAccessibilityLabel={'Cancel Button'}
                     onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
 
                     <TextInput
@@ -100,3 +103,7 @@ Prop                | Type     | Optional | Default      | Description
 `cancelTextStyle`   | object   | Yes      | {}           | style definitions for the cancel text element
 `cancelContainerStyle`| object | Yes      | {}           | style definitions for the cancel container
 `backdropPressToClose`| bool   | Yes  | false        | `true` makes the modal close when the overlay is pressed
+`accessible`| bool   | Yes  | false        | `true` enables accessibility for modal and options. Note: data items should have an `accessibilityLabel` property if this is enabled
+`scrollViewAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the modal ScrollView
+`cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
+

index.js

@@ -21,51 +21,57 @@ const ViewPropTypes = RNViewPropTypes || View.propTypes;
 let componentIndex = 0;
 
 const propTypes = {
-    data:                      PropTypes.array,
-    onChange:                  PropTypes.func,
-    initValue:                 PropTypes.string,
-    animationType:             Modal.propTypes.animationType,
-    style:                     ViewPropTypes.style,
-    selectStyle:               ViewPropTypes.style,
-    selectTextStyle:           Text.propTypes.style,
-    optionStyle:               ViewPropTypes.style,
-    optionTextStyle:           Text.propTypes.style,
-    optionContainerStyle:      ViewPropTypes.style,
-    sectionStyle:              ViewPropTypes.style,
-    sectionTextStyle:          Text.propTypes.style,
-    cancelContainerStyle:      ViewPropTypes.style,
-    cancelStyle:               ViewPropTypes.style,
-    cancelTextStyle:           Text.propTypes.style,
-    overlayStyle:              ViewPropTypes.style,
-    cancelText:                PropTypes.string,
-    disabled:                  PropTypes.bool,
-    supportedOrientations:     Modal.propTypes.supportedOrientations,
-    keyboardShouldPersistTaps: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    backdropPressToClose:      PropTypes.bool,
+    data:                           PropTypes.array,
+    onChange:                       PropTypes.func,
+    initValue:                      PropTypes.string,
+    animationType:                  Modal.propTypes.animationType,
+    style:                          ViewPropTypes.style,
+    selectStyle:                    ViewPropTypes.style,
+    selectTextStyle:                Text.propTypes.style,
+    optionStyle:                    ViewPropTypes.style,
+    optionTextStyle:                Text.propTypes.style,
+    optionContainerStyle:           ViewPropTypes.style,
+    sectionStyle:                   ViewPropTypes.style,
+    sectionTextStyle:               Text.propTypes.style,
+    cancelContainerStyle:           ViewPropTypes.style,
+    cancelStyle:                    ViewPropTypes.style,
+    cancelTextStyle:                Text.propTypes.style,
+    overlayStyle:                   ViewPropTypes.style,
+    cancelText:                     PropTypes.string,
+    disabled:                       PropTypes.bool,
+    supportedOrientations:          Modal.propTypes.supportedOrientations,
+    keyboardShouldPersistTaps:      PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    backdropPressToClose:           PropTypes.bool,
+    accessible:                     PropTypes.bool,
+    scrollViewAccessibilityLabel:   PropTypes.string,
+    cancelButtonAccessibilityLabel: PropTypes.string,
 };
 
 const defaultProps = {
-    data:                      [],
-    onChange:                  () => {},
-    initValue:                 'Select me!',
-    animationType:             'slide',
-    style:                     {},
-    selectStyle:               {},
-    selectTextStyle:           {},
-    optionStyle:               {},
-    optionTextStyle:           {},
-    optionContainerStyle:      {},
-    sectionStyle:              {},
-    sectionTextStyle:          {},
-    cancelContainerStyle:      {},
-    cancelStyle:               {},
-    cancelTextStyle:           {},
-    overlayStyle:              {},
-    cancelText:                'cancel',
-    disabled:                  false,
-    supportedOrientations:     ['portrait', 'landscape'],
-    keyboardShouldPersistTaps: 'always',
-    backdropPressToClose:      false,
+    data:                           [],
+    onChange:                       () => {},
+    initValue:                      'Select me!',
+    animationType:                  'slide',
+    style:                          {},
+    selectStyle:                    {},
+    selectTextStyle:                {},
+    optionStyle:                    {},
+    optionTextStyle:                {},
+    optionContainerStyle:           {},
+    sectionStyle:                   {},
+    sectionTextStyle:               {},
+    cancelContainerStyle:           {},
+    cancelStyle:                    {},
+    cancelTextStyle:                {},
+    overlayStyle:                   {},
+    cancelText:                     'cancel',
+    disabled:                       false,
+    supportedOrientations:          ['portrait', 'landscape'],
+    keyboardShouldPersistTaps:      'always',
+    backdropPressToClose:           false,
+    accessible:                     false,
+    scrollViewAccessibilityLabel:   undefined,
+    cancelButtonAccessibilityLabel: undefined,
 };
 
 export default class ModalSelector extends React.Component {
@@ -119,7 +125,7 @@ export default class ModalSelector extends React.Component {
 
     renderOption = (option, isLastItem) => {
         return (
-            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
+            <TouchableOpacity key={option.key} onPress={() => this.onChange(option)} accessible={this.props.accessible} accessibilityLabel={option.accessibilityLabel || undefined}>
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
                 {borderBottomWidth: 0}]}>
                     <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
@@ -144,14 +150,14 @@ export default class ModalSelector extends React.Component {
             }}>
                 <View style={[styles.overlayStyle, this.props.overlayStyle]}>
                     <View style={[styles.optionContainer, this.props.optionContainerStyle]}>
-                        <ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps}>
+                        <ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps} accessible={this.props.accessible} accessibilityLabel={this.props.scrollViewAccessibilityLabel}>
                             <View style={{paddingHorizontal: 10}}>
                                 {options}
                             </View>
                         </ScrollView>
                     </View>
                     <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
-                        <TouchableOpacity onPress={this.close}>
+                        <TouchableOpacity onPress={this.close} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                                 <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
                             </View>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-modal-selector",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.",
   "main": "index.js",
   "scripts": {