React Native bottom tab navigator - Android screen reader only selects tab label and not tab icon as-CodePudding

I have a bottom tab navigator from react navigation.

Previously, when you had the screen reader on, both the text and the icon of each tab could be selected as one container. Here we see both the icon and label being selected as one container for the screen reader

After upgrading to RN 0.69 from 0.68, only the text in the tab bar is selectable. How can I make both the icon and text selectable as one container? If I add an accessibility label to the tab bar icon, the whole container can be selected again, but that requires that we add a label.

CodePudding user response：

You can make a custom tab bar and add accessibility as you wish in each tab bar item like this:

<Tab.Navigator tabBar={(props) => <CustomTabBar/>}>
    <Tab.Screen .../>
</Tab.Navigator>

CodePudding user response：

Thank you guys for responding. Really appreciate it!

I hadn't done the correct research. In the documentation , it says that theres is a prop which you can add to the whole tab bar. https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaraccessibilitylabel

After adding this, the container (both the tab icon and text) was selectable as one container. It is just strange that this behaviour worked before without adding that prop.