diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js index 56daa425..934cd8bf 100644 --- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js +++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js @@ -14,7 +14,7 @@ import ResourceSavingScene from '../views/ResourceSavingScene'; type Props = InjectedProps & { getAccessibilityRole: (props: { route: any }) => string, - getAccessibilityStates: (props: { route: any }) => Array, + getAccessibilityStates: (props: { route: any }) => string[], lazy?: boolean, tabBarComponent?: React.ComponentType<*>, tabBarOptions?: TabBarOptions, diff --git a/packages/bottom-tabs/src/views/BottomTabBar.js b/packages/bottom-tabs/src/views/BottomTabBar.js index 2179ce7f..eb368f5e 100644 --- a/packages/bottom-tabs/src/views/BottomTabBar.js +++ b/packages/bottom-tabs/src/views/BottomTabBar.js @@ -31,13 +31,11 @@ export type TabBarOptions = { type Props = TabBarOptions & { navigation: any, - descriptors: any, - jumpTo: any, onTabPress: any, onTabLongPress: any, getAccessibilityLabel: (props: { route: any }) => string, getAccessibilityRole: (props: { route: any }) => string, - getAccessibilityStates: (props: { route: any }) => Array, + getAccessibilityStates: (props: { route: any }) => string[], getButtonComponent: ({ route: any }) => any, getLabelText: ({ route: any }) => any, getTestID: (props: { route: any }) => string, @@ -296,7 +294,8 @@ class TabBarBottom extends React.Component { style={[ styles.container, keyboardHidesTabBar - ? { + ? // eslint-disable-next-line react-native/no-inline-styles + { // When the keyboard is shown, slide down the tab bar transform: [ { @@ -324,6 +323,20 @@ class TabBarBottom extends React.Component { const accessibilityLabel = this.props.getAccessibilityLabel({ route, }); + + const accessibilityRole = + this.props.getAccessibilityRole({ + route, + }) || 'button'; + + let accessibilityStates = this.props.getAccessibilityStates({ + route, + }); + + if (!accessibilityStates) { + accessibilityStates = focused ? ['selected'] : []; + } + const testID = this.props.getTestID({ route }); const backgroundColor = focused @@ -341,6 +354,8 @@ class TabBarBottom extends React.Component { onLongPress={() => onTabLongPress({ route })} testID={testID} accessibilityLabel={accessibilityLabel} + accessibilityRole={accessibilityRole} + accessibilityStates={accessibilityStates} style={[ styles.tab, { backgroundColor }, diff --git a/packages/bottom-tabs/src/views/ResourceSavingScene.js b/packages/bottom-tabs/src/views/ResourceSavingScene.js index 9ace4469..719d2e9b 100644 --- a/packages/bottom-tabs/src/views/ResourceSavingScene.js +++ b/packages/bottom-tabs/src/views/ResourceSavingScene.js @@ -25,7 +25,12 @@ export default class ResourceSavingScene extends React.Component { return (