test: Navigation Bar

lib/src/components/badges/indicator.dart

@@ -159,6 +159,7 @@ class ZetaIndicator extends ZetaStatelessWidget {
             value.formatMaxChars(),
             style: ZetaTextStyles.labelIndicator.copyWith(
               color: foregroundColor,
+              fontSize: size == ZetaWidgetSize.large ? 12 : 11,
               height: size == ZetaWidgetSize.large ? 1 : (12 / 16),
             ),
           ),

lib/src/components/components.dart

@@ -32,7 +32,7 @@ export 'in_page_banner/in_page_banner.dart';
 export 'list_item/dropdown_list_item.dart';
 export 'list_item/list_item.dart';
 export 'list_item/notification_list_item.dart';
-export 'navigation bar/navigation_bar.dart';
+export 'navigation bar/navigation_bar.dart' hide NavigationItem;
 export 'navigation_rail/navigation_rail.dart';
 export 'pagination/pagination.dart';
 export 'password/password_input.dart';

lib/src/components/navigation bar/navigation_bar.dart

@@ -124,7 +124,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget {
         final index = items.indexOf(navItem);
         return Expanded(
           flex: !shrinkItems ? 1 : 0,
-          child: _NavigationItem(
+          child: NavigationItem(
             selected: index == currentIndex,
             item: navItem,
             onTap: () => onTap?.call(index),
@@ -179,7 +179,7 @@ class ZetaNavigationBar extends ZetaStatelessWidget {
     }
 
     return Container(
-      padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.medium),
+      padding: EdgeInsets.symmetric(horizontal: Zeta.of(context).spacing.large),
       decoration: BoxDecoration(
         color: colors.surfacePrimary,
         border: Border(top: BorderSide(color: colors.borderSubtle)),
@@ -206,19 +206,32 @@ class ZetaNavigationBar extends ZetaStatelessWidget {
   }
 }
 
-class _NavigationItem extends ZetaStatelessWidget {
-  const _NavigationItem({
+/// A single item in a [ZetaNavigationBar].
+@visibleForTesting
+@protected
+class NavigationItem extends ZetaStatelessWidget {
+  /// Creates a new [NavigationItem].
+  const NavigationItem({
+    super.key,
     required this.selected,
     required this.item,
     required this.onTap,
     required this.context,
   });
 
+  /// Whether the item is selected.
   final bool selected;
+
+  /// The item to display.
   final ZetaNavigationBarItem item;
+
+  /// Called when the item is tapped.
   final VoidCallback onTap;
+
+  /// The build context of the [ZetaNavigationBar].
   final BuildContext context;
 
+  /// The badge to show on the navigation item.
   Widget get badge {
     final ZetaColors colors = Zeta.of(context).colors;
     return Positioned(
@@ -251,9 +264,11 @@ class _NavigationItem extends ZetaStatelessWidget {
       child: InkResponse(
         borderRadius: context.rounded ? Zeta.of(context).radius.rounded : Zeta.of(context).radius.none,
         onTap: onTap,
+        hoverColor: colors.surfaceHover,
+        highlightShape: BoxShape.rectangle,
         child: Semantics(
           button: true,
-          explicitChildNodes: true,
+          excludeSemantics: true,
           label: item.label,
           child: Container(
             padding: EdgeInsets.only(
@@ -278,11 +293,9 @@ class _NavigationItem extends ZetaStatelessWidget {
                 ),
                 SizedBox(height: Zeta.of(context).spacing.small),
                 if (item.label != null)
-                  ExcludeSemantics(
-                    child: Text(
-                      item.label!,
-                      style: Theme.of(context).textTheme.labelSmall?.copyWith(color: elementColor),
-                    ),
+                  Text(
+                    item.label!,
+                    style: Theme.of(context).textTheme.labelSmall?.copyWith(color: elementColor),
                   ),
               ],
             ),

test/scripts/output/test_table.md

@@ -1,6 +1,7 @@
 | Component      | Accessibility | Content | Dimensions | Styling | Interaction | Golden | Performance | Unorganised | Total Tests |
 | -------------- | ------------- | ------- | ---------- | ------- | ----------- | ------ | ----------- | ----------- | ----------- |
 | Accordion      | 0             | 2       | 0          | 1       | 2           | 0      | 0           | 0           | 5           |
+| Avatar Rail    | 1             | 2       | 2          | 1       | 2           | 1      | 1           | 0           | 10          |
 | Avatar         | 1             | 3       | 6          | 5       | 0           | 6      | 0           | 0           | 21          |
 | Indicator      | 0             | 7       | 0          | 0       | 0           | 5      | 0           | 0           | 12          |
 | Label          | 0             | 8       | 0          | 0       | 0           | 7      | 0           | 0           | 15          |
@@ -11,17 +12,19 @@
 | Button         | 0             | 10      | 0          | 2       | 1           | 8      | 0           | 0           | 21          |
 | Chat Item      | 0             | 10      | 0          | 0       | 0           | 8      | 0           | 0           | 18          |
 | Checkbox       | 0             | 3       | 0          | 0       | 3           | 3      | 0           | 0           | 9           |
-| Chip           | 0             | 1       | 0          | 0       | 5           | 0      | 0           | 0           | 6           |
+| Chip           | 0             | 2       | 0          | 0       | 5           | 0      | 0           | 0           | 7           |
+| Status Chip    | 1             | 3       | 1          | 3       | 1           | 3      | 0           | 0           | 12          |
 | Comms Button   | 2             | 7       | 0          | 0       | 0           | 1      | 0           | 0           | 10          |
 | Dialpad        | 0             | 2       | 0          | 1       | 2           | 3      | 0           | 0           | 8           |
 | Fab            | 0             | 6       | 0          | 1       | 1           | 6      | 0           | 0           | 14          |
 | Icon           | 1             | 4       | 1          | 6       | 0           | 0      | 0           | 0           | 12          |
 | In Page Banner | 0             | 4       | 0          | 4       | 2           | 4      | 0           | 0           | 14          |
+| Navigation Bar | 5             | 7       | 3          | 4       | 2           | 6      | 0           | 0           | 27          |
 | Password Input | 0             | 4       | 0          | 0       | 0           | 2      | 0           | 0           | 6           |
 | Search Bar     | 0             | 5       | 0          | 0       | 5           | 5      | 0           | 0           | 15          |
 | Slider         | 0             | 0       | 0          | 0       | 1           | 0      | 0           | 0           | 1           |
-| Stepper        | 0             | 0       | 0          | 0       | 0           | 0      | 0           | 30          | 30          |
+| Stepper        | 4             | 8       | 4          | 6       | 2           | 6      | 0           | 0           | 30          |
 | Stepper Input  | 0             | 1       | 0          | 0       | 1           | 0      | 0           | 0           | 2           |
 | Tooltip        | 0             | 3       | 1          | 3       | 0           | 4      | 0           | 0           | 11          |
-| Top App Bar    | 0             | 0       | 0          | 0       | 0           | 0      | 0           | 25          | 25          |
-| Total Tests    | 7             | 95      | 11         | 26      | 23          | 71     | 0           | 55          | 288         |
+| Top App Bar    | 2             | 6       | 1          | 1       | 6           | 9      | 0           | 0           | 25          |
+| Total Tests    | 20            | 122     | 22         | 41      | 36          | 96     | 1           | 0           | 338         |