Merge pull request #190 from hakuna/tab-accessibility-labels

Add accessible and accessibilityLabel props for testability

Author: ptomasroos

README.md

@@ -91,5 +91,6 @@ TabNavigator.Item props
 | selected | none | boolean | return whether the item is selected |
 | onPress | none | function | onPress method for Item |
 | allowFontScaling | false | boolean | allow font scaling for title |
-
-
+| accessible | none | boolean | indicates if this item is an accessibility element |
+| accessibilityLabel | none | string | override text for screen readers |
+| testID | none | string | used to locate this item in end-to-end-tests |

Tab.js

@@ -17,6 +17,8 @@ import Layout from './Layout';
 export default class Tab extends React.Component {
   static propTypes = {
     testID : PropTypes.string,
+    accessible: PropTypes.bool,
+    accessibilityLabel : PropTypes.string,
     title: PropTypes.string,
     titleStyle: Text.propTypes.style,
     badge: PropTypes.element,
@@ -68,6 +70,8 @@ export default class Tab extends React.Component {
       return (
         <TouchableNativeFeedback
           testID={this.props.testID}
+          accessible={this.props.accessible}
+          accessibilityLabel={this.props.accessibilityLabel}
           background={TouchableNativeFeedback.Ripple(undefined, true)}
           onPress={this._handlePress}>
           <View style={tabStyle}>
@@ -83,6 +87,8 @@ export default class Tab extends React.Component {
     return (
       <TouchableOpacity
         testID={this.props.testID}
+        accessible={this.props.accessible}
+        accessibilityLabel={this.props.accessibilityLabel}
         activeOpacity={this.props.hidesTabTouch ? 1.0 : 0.8}
         onPress={this._handlePress}
         style={tabStyle}>

TabNavigator.js

@@ -122,6 +122,8 @@ export default class TabNavigator extends React.Component {
     return (
       <Tab
         testID={item.props.testID}
+        accessible={item.props.accessible}
+        accessibilityLabel={item.props.accessibilityLabel}
         title={item.props.title}
         allowFontScaling={item.props.allowFontScaling}
         titleStyle={[