a11y: Make main tabs buttons accessible

This is the most important UI element remaining inaccessible.
The buttons are currently icon-only and need accessibilityLabel.
In addition to that, the IconUnreadConversations is enhanced with
a readable (hearable) unread counts.

Author: borisyankov

src/main/MainTabs.js

@@ -19,7 +19,7 @@ export default TabNavigator(
       navigationOptions: {
         tabBarLabel: 'Home',
         tabBarIcon: (props: TabNavigationOptionsPropsType) => (
-          <IconHome size={24} color={props.tintColor} />
+          <IconHome accessibilityLabel="Unread" size={24} color={props.tintColor} />
         ),
       },
     },
@@ -28,7 +28,7 @@ export default TabNavigator(
       navigationOptions: {
         tabBarLabel: 'Streams',
         tabBarIcon: (props: TabNavigationOptionsPropsType) => (
-          <IconStream size={24} color={props.tintColor} />
+          <IconStream accessibilityLabel="Streams" size={24} color={props.tintColor} />
         ),
       },
     },
@@ -46,7 +46,7 @@ export default TabNavigator(
       navigationOptions: {
         tabBarLabel: 'Settings',
         tabBarIcon: (props: TabNavigationOptionsPropsType) => (
-          <IconSettings size={24} color={props.tintColor} />
+          <IconSettings accessibilityLabel="Settings" size={24} color={props.tintColor} />
         ),
       },
     },

src/nav/IconUnreadConversations.js

@@ -7,6 +7,7 @@ import { StyleSheet } from 'react-native';
 import { getUnreadPmsTotal, getUnreadHuddlesTotal } from '../selectors';
 import { IconPeople } from '../common/Icons';
 import { ComponentWithOverlay, UnreadCount } from '../common';
+import { textWithUnreadCount } from '../utils/accessibility';
 
 const styles = StyleSheet.create({
   button: {
@@ -24,9 +25,11 @@ class IconUnreadConversations extends PureComponent<Props> {
   render() {
     const { unreadHuddlesTotal, unreadPmsTotal, color } = this.props;
     const unreadCount = unreadHuddlesTotal + unreadPmsTotal;
+    const accessibilityLabel = textWithUnreadCount('Conversations', unreadCount);
 
     return (
       <ComponentWithOverlay
+        accessibilityLabel={accessibilityLabel}
         style={styles.button}
         overlaySize={15}
         showOverlay={unreadCount > 0}