feat: add accessibilityLabel and testID options (#26)

react-navigation · Aug 18, 2019 · 8d361f9 · 8d361f9
1 parent d03afc2
commit 8d361f9
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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,14 +80,16 @@ class MaterialTabView extends React.PureComponent<Props> {
     }
 
     return (
+      /* $FlowFixMe */
       <TabBarComponent
         {...tabBarOptions}
         {...props}
         tabBarPosition={tabBarPosition}
         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
@@ -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
@@ -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
@@ -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,
 };