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 { navigation, screenProps, getLabelText, + getAccessibilityLabel, + getTestID, renderIcon, onTabPress, } = this.props; @@ -78,6 +80,8 @@ class TabNavigationView extends React.PureComponent { 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 { 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 { } return ( + /* $FlowFixMe */ { 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<*>) { 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 { {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 { onTabPress({ route }); jumpTo(route.key); }} + testID={testID} + accessibilityLabel={accessibilityLabel} > React.Node, getLabelText: (props: { route: any }) => any, + getAccessibilityLabel: (props: { route: any }) => string, + getTestID: (props: { route: any }) => string, useNativeDriver?: boolean, jumpTo: (key: string) => any, };