From 8d361f9044f973bc24c590a675e201caa45efe28 Mon Sep 17 00:00:00 2001
From: Daniel Basedow <daniel.basedow@gmail.com>
Date: Sun, 3 Jun 2018 18:15:24 +0200
Subject: [PATCH] feat: add accessibilityLabel and testID options (#26)

---
 .../example/src/MaterialTopTabs.js            |  1 -
 .../navigators/createBottomTabNavigator.js    |  4 +++
 .../createMaterialTopTabNavigator.js          | 14 ++--------
 .../src/utils/createTabNavigator.js           | 28 +++++++++++++++++++
 .../bottom-tabs/src/views/BottomTabBar.js     |  8 ++++++
 .../src/views/MaterialTopTabBar.js            |  2 ++
 6 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/bottom-tabs/example/src/MaterialTopTabs.js b/packages/bottom-tabs/example/src/MaterialTopTabs.js
index 68831102..e6d11726 100644
--- a/packages/bottom-tabs/example/src/MaterialTopTabs.js
+++ b/packages/bottom-tabs/example/src/MaterialTopTabs.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
 import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
 import PhotoGrid from './shared/PhotoGrid';
 
diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js
index 383a44e1..02db256d 100644
--- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js
+++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js
@@ -56,6 +56,8 @@ class TabNavigationView extends React.PureComponent<Props, State> {
       navigation,
       screenProps,
       getLabelText,
+      getAccessibilityLabel,
+      getTestID,
       renderIcon,
       onTabPress,
     } = this.props;
@@ -78,6 +80,8 @@ class TabNavigationView extends React.PureComponent<Props, State> {
         screenProps={screenProps}
         onTabPress={onTabPress}
         getLabelText={getLabelText}
+        getAccessibilityLabel={getAccessibilityLabel}
+        getTestID={getTestID}
         renderIcon={renderIcon}
       />
     );
diff --git a/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js b/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js
index c8d3282f..a109b831 100644
--- a/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js
+++ b/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js
@@ -45,16 +45,6 @@ class MaterialTabView extends React.PureComponent<Props> {
     return route.routeName;
   };
 
-  _getTestIDProps = ({ route, focused }) => {
-    const { descriptors } = this.props;
-    const descriptor = descriptors[route.key];
-    const options = descriptor.options;
-
-    return typeof options.tabBarTestIDProps === 'function'
-      ? options.tabBarTestIDProps({ focused })
-      : options.tabBarTestIDProps;
-  };
-
   _renderIcon = ({ focused, route, tintColor }) => {
     const { descriptors } = this.props;
     const descriptor = descriptors[route.key];
@@ -90,6 +80,7 @@ class MaterialTabView extends React.PureComponent<Props> {
     }
 
     return (
+      /* $FlowFixMe */
       <TabBarComponent
         {...tabBarOptions}
         {...props}
@@ -97,7 +88,8 @@ class MaterialTabView extends React.PureComponent<Props> {
         screenProps={this.props.screenProps}
         navigation={this.props.navigation}
         getLabelText={this.props.getLabelText}
-        getTestIDProps={this._getTestIDProps}
+        getAccessibilityLabel={this.props.getAccessibilityLabel}
+        getTestID={this.props.getTestID}
         renderIcon={this._renderIcon}
         onTabPress={this.props.onTabPress}
       />
diff --git a/packages/bottom-tabs/src/utils/createTabNavigator.js b/packages/bottom-tabs/src/utils/createTabNavigator.js
index a057053a..8bb83a6c 100644
--- a/packages/bottom-tabs/src/utils/createTabNavigator.js
+++ b/packages/bottom-tabs/src/utils/createTabNavigator.js
@@ -12,6 +12,8 @@ import {
 
 export type InjectedProps = {
   getLabelText: (props: { route: any }) => any,
+  getAccessibilityLabel: (props: { route: any }) => string,
+  getTestID: (props: { route: any }) => string,
   renderIcon: (props: {
     route: any,
     focused: boolean,
@@ -70,6 +72,30 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
       return route.routeName;
     };
 
+    _getAccessibilityLabel = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      if (typeof options.tabBarAccessibility !== 'undefined') {
+        return options.tabBarAccessibilityLabel;
+      }
+
+      const label = this._getLabelText({ route });
+
+      if (typeof label === 'string') {
+        return label;
+      }
+    };
+
+    _getTestID = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const options = descriptor.options;
+
+      return options.tabBarTestID;
+    };
+
     _handleTabPress = ({ route }) => {
       this._isTabPress = true;
 
@@ -125,6 +151,8 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
         <TabView
           {...options}
           getLabelText={this._getLabelText}
+          getAccessibilityLabel={this._getAccessibilityLabel}
+          getTestID={this._getTestID}
           renderIcon={this._renderIcon}
           renderScene={this._renderScene}
           onIndexChange={this._handleIndexChange}
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.js b/packages/bottom-tabs/src/views/BottomTabBar.js
index 61e2c393..321f2903 100644
--- a/packages/bottom-tabs/src/views/BottomTabBar.js
+++ b/packages/bottom-tabs/src/views/BottomTabBar.js
@@ -33,6 +33,8 @@ type Props = TabBarOptions & {
   jumpTo: any,
   onTabPress: any,
   getLabelText: ({ route: any }) => any,
+  getAccessibilityLabel: (props: { route: any }) => string,
+  getTestID: (props: { route: any }) => string,
   renderIcon: any,
   dimensions: { width: number, height: number },
   isLandscape: boolean,
@@ -192,6 +194,10 @@ class TabBarBottom extends React.Component<Props> {
         {routes.map((route, index) => {
           const focused = index === navigation.state.index;
           const scene = { route, focused };
+          const accessibilityLabel = this.props.getAccessibilityLabel({
+            route,
+          });
+          const testID = this.props.getTestID({ route });
 
           const backgroundColor = focused
             ? activeBackgroundColor
@@ -204,6 +210,8 @@ class TabBarBottom extends React.Component<Props> {
                 onTabPress({ route });
                 jumpTo(route.key);
               }}
+              testID={testID}
+              accessibilityLabel={accessibilityLabel}
             >
               <View
                 style={[
diff --git a/packages/bottom-tabs/src/views/MaterialTopTabBar.js b/packages/bottom-tabs/src/views/MaterialTopTabBar.js
index 502cd228..add9c2d6 100644
--- a/packages/bottom-tabs/src/views/MaterialTopTabBar.js
+++ b/packages/bottom-tabs/src/views/MaterialTopTabBar.js
@@ -28,6 +28,8 @@ type Props = TabBarOptions & {
     tintColor: string,
   }) => React.Node,
   getLabelText: (props: { route: any }) => any,
+  getAccessibilityLabel: (props: { route: any }) => string,
+  getTestID: (props: { route: any }) => string,
   useNativeDriver?: boolean,
   jumpTo: (key: string) => any,
 };