home: Add icons label on main navigation bar.

Labeled the Navigation Bar for each Icon by zulip_localizations,
nav bar touch logic changed from IconButton to GestureDetector to
improve performace.

Fixes: #1857

Author: MritunjayTiwari14

assets/l10n/app_en.arb

@@ -1231,6 +1231,18 @@
   "@wildcardMentionTopicDescription": {
     "description": "Description for \"@topic\" wildcard-mention autocomplete options when writing a channel message."
   },
+  "navBarFeedLabel": "Combined feed",
+  "@navBarFeedLabel": {
+    "description": "Label for the Feed button on the bottom navigation bar."
+  },
+  "navBarDmLabel": "DMs",
+  "@navBarDmLabel": {
+    "description": "Label for the Direct Messages button on the bottom navigation bar."
+  },
+  "navBarMenuLabel": "Menu",
+  "@navBarMenuLabel": {
+    "description": "Label for the Menu button on the bottom navigation bar."
+  },
   "messageIsEditedLabel": "EDITED",
   "@messageIsEditedLabel": {
     "description": "Label for an edited message. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"

lib/widgets/home.dart

@@ -86,35 +86,43 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
     const pageBodies = [
       (_HomePageTab.inbox,          InboxPageBody()),
       (_HomePageTab.channels,       SubscriptionListPageBody()),
       // TODO(#1094): Users
       (_HomePageTab.directMessages, RecentDmConversationsPageBody()),
     ];
 
-    _NavigationBarButton button(_HomePageTab tab, IconData icon) {
+    _NavigationBarButton button(_HomePageTab tab, IconData icon, String label) {
       return _NavigationBarButton(icon: icon,
         selected: _tab.value == tab,
         onPressed: () {
           _tab.value = tab;
-        });
+        },
+        label: label);
     }
 
     // TODO(a11y): add tooltips for these buttons
     final navigationBarButtons = [
-      button(_HomePageTab.inbox,          ZulipIcons.inbox),
+      button(_HomePageTab.inbox,          ZulipIcons.inbox,
+        zulipLocalizations.inboxPageTitle),
       _NavigationBarButton(         icon: ZulipIcons.message_feed,
         selected: false,
         onPressed: () => Navigator.push(context,
           MessageListPage.buildRoute(context: context,
-            narrow: const CombinedFeedNarrow()))),
-      button(_HomePageTab.channels,       ZulipIcons.hash_italic),
+            narrow: const CombinedFeedNarrow())), 
+        label: zulipLocalizations.navBarFeedLabel),
+      button(_HomePageTab.channels,       ZulipIcons.hash_italic,
+        zulipLocalizations.channelsPageTitle),
       // TODO(#1094): Users
-      button(_HomePageTab.directMessages, ZulipIcons.two_person),
+      button(_HomePageTab.directMessages, ZulipIcons.two_person,
+        zulipLocalizations.navBarDmLabel),
       _NavigationBarButton(         icon: ZulipIcons.menu,
         selected: false,
-        onPressed: () => _showMainMenu(context, tabNotifier: _tab)),
+        onPressed: () => _showMainMenu(context, tabNotifier: _tab),
+        label: zulipLocalizations.navBarMenuLabel),
     ];
 
     final designVariables = DesignVariables.of(context);
@@ -134,7 +142,8 @@ class _HomePageState extends State<HomePage> {
           border: Border(top: BorderSide(color: designVariables.borderBar)),
           color: designVariables.bgBotBar),
         child: SafeArea(
-          child: SizedBox(height: 48,
+          child: SizedBox(
+            height: 62,
             child: Center(
               child: ConstrainedBox(
                 // TODO(design): determine a suitable max width for bottom nav bar
@@ -231,35 +240,46 @@ class _NavigationBarButton extends StatelessWidget {
     required this.icon,
     required this.selected,
     required this.onPressed,
+    required this.label,
   });
 
   final IconData icon;
   final bool selected;
   final void Function() onPressed;
+  final String label;
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
 
-    final iconColor = WidgetStateColor.fromMap({
-      WidgetState.pressed:  designVariables.iconSelected,
-      ~WidgetState.pressed: selected ? designVariables.iconSelected
-                                     : designVariables.icon,
-    });
+    final color = selected ? designVariables.iconSelected : designVariables.icon;
 
     return AnimatedScaleOnTap(
       scaleEnd: 0.875,
       duration: const Duration(milliseconds: 100),
-      child: IconButton(
-        icon: Icon(icon, size: 24),
-        onPressed: onPressed,
-        style: IconButton.styleFrom(
-          // TODO(#417): Disable splash effects for all buttons globally.
-          splashFactory: NoSplash.splashFactory,
-          highlightColor: designVariables.navigationButtonBg,
-          shape: const RoundedRectangleBorder(
-            borderRadius: BorderRadius.all(Radius.circular(4))),
-        ).copyWith(foregroundColor: iconColor)));
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: onPressed,
+        child: Column(
+          children: [
+            SizedBox(
+              height: 34,
+              child: Center(
+                child: Icon(icon, size: 24, color: color,)),
+            ),
+            Expanded(
+              child: Text(
+                label,
+                style: TextStyle(
+                  fontSize: 12,
+                  color: color,
+                  height: 1.0,),
+                textAlign: TextAlign.center,
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis),
+            )
+          ]),
+      ));
   }
 }
 

test/widgets/home_test.dart

@@ -117,18 +117,27 @@ void main () {
       check(find.descendant(
         of: find.byType(ZulipAppBar),
         matching: find.text('Inbox'))).findsOne();
+      check(find.descendant(
+          of: find.byType(ZulipAppBar),
+          matching: find.bySemanticsLabel(RegExp("Inbox")))).findsOne();
 
       await tester.tap(find.byIcon(ZulipIcons.hash_italic));
       await tester.pump();
       check(find.descendant(
         of: find.byType(ZulipAppBar),
         matching: find.text('Channels'))).findsOne();
+      check(find.descendant(
+          of: find.byType(ZulipAppBar),
+          matching: find.bySemanticsLabel(RegExp("Channels")))).findsOne();
 
       await tester.tap(find.byIcon(ZulipIcons.two_person));
       await tester.pump();
       check(find.descendant(
         of: find.byType(ZulipAppBar),
         matching: find.text('Direct messages'))).findsOne();
+      check(find.descendant(
+          of: find.byType(ZulipAppBar),
+          matching: find.bySemanticsLabel(RegExp("Direct messages")))).findsOne();
     });
 
     testWidgets('combined feed', (tester) async {