test: Navigation Bar (#213)

tests: changed test group names to fit with standard group names

test: writing tests for navigation bar

fix: made NavigationItem visible for testing

fix: Changed font size of medium indicator from 12 to 11

fix: hover color on navigation item

test: added more tests for navigation bar

test: Uncommented text contrast tests

fix: set navigation item highlight shape to rectangle

test: edited test to pass after merge

test: ran test counter

fix: indicator semantic labels

fix: navigation bar semantic labels

chore(automated): Lint commit and format

test: navigation item calls onTap when an item is tapped off center

chore(automated): Lint commit and format

test: hardcoded offset

fix: Extra verbose semantic label

test: fixed debug fill props avatar

example/lib/pages/components/notification_list_example.dart

@@ -86,6 +86,7 @@ class NotificationListItemExample extends StatelessWidget {
               leading: ZetaNotificationBadge.avatar(
                 avatar: ZetaAvatar.initials(
                   initials: "JS",
+                  semanticUpperBadgeLabel: 'Urgent',
                   lowerBadge: ZetaAvatarBadge.icon(
                     color: ZetaColors().surfacePositive,
                     icon: Icons.check,

lib/src/components/avatars/avatar.dart

@@ -53,9 +53,9 @@ class ZetaAvatar extends ZetaStatelessWidget {
     this.lowerBadge,
     this.upperBadge,
     this.borderColor,
-    this.semanticLabel = 'avatar',
-    this.semanticUpperBadgeLabel = 'upperBadge',
-    this.semanticLowerBadgeLabel = 'lowerBadge',
+    this.semanticLabel,
+    this.semanticUpperBadgeLabel,
+    this.semanticLowerBadgeLabel,
     this.initialTextStyle,
     this.label,
     this.labelTextStyle,
@@ -149,17 +149,17 @@ class ZetaAvatar extends ZetaStatelessWidget {
   /// {@template zeta-widget-semantic-label}
   /// This label is used by accessibility frameworks (e.g. TalkBack on Android) to describe the component.
   /// {@endtemplate}
-  final String semanticLabel;
+  final String? semanticLabel;
 
   /// Value passed into wrapping [Semantics] widget for lower badge.
   ///
   /// {@macro zeta-widget-semantic-label}
-  final String semanticLowerBadgeLabel;
+  final String? semanticLowerBadgeLabel;
 
   /// Value passed into wrapping [Semantics] widget for upper badge.
   ///
   /// {@macro zeta-widget-semantic-label}
-  final String semanticUpperBadgeLabel;
+  final String? semanticUpperBadgeLabel;
 
   /// Text style for initials.
   ///

lib/src/components/badges/indicator.dart

@@ -92,6 +92,7 @@ class ZetaIndicator extends ZetaStatelessWidget {
     int? value,
     bool? inverse,
     Key? key,
+    String? semanticLabel,
   }) {
     return ZetaIndicator(
       key: key ?? this.key,
@@ -100,6 +101,7 @@ class ZetaIndicator extends ZetaStatelessWidget {
       icon: icon ?? this.icon,
       value: value ?? this.value,
       inverse: inverse ?? this.inverse,
+      semanticLabel: semanticLabel ?? this.semanticLabel,
     );
   }
 
@@ -111,18 +113,21 @@ class ZetaIndicator extends ZetaStatelessWidget {
     final sizePixels = _getSizePixels(size, type, context);
 
     return Semantics(
-      value: semanticLabel ?? value?.toString() ?? '',
+      label: semanticLabel,
+      container: true,
       child: Container(
         width: sizePixels + Zeta.of(context).spacing.minimum,
         height: sizePixels + Zeta.of(context).spacing.minimum,
-        decoration: BoxDecoration(
-          border: Border.all(
-            width: ZetaBorders.medium,
-            color: Zeta.of(context).colors.borderSubtle,
-          ),
-          color: (inverse ? foregroundColor : Colors.transparent),
-          borderRadius: Zeta.of(context).radius.full,
-        ),
+        decoration: type == ZetaIndicatorType.icon
+            ? BoxDecoration(
+                border: Border.all(
+                  width: ZetaBorders.medium,
+                  color: Zeta.of(context).colors.borderSubtle,
+                ),
+                color: (inverse ? foregroundColor : Colors.transparent),
+                borderRadius: Zeta.of(context).radius.full,
+              )
+            : null,
         child: Center(
           child: Container(
             width: sizePixels,
@@ -155,11 +160,15 @@ class ZetaIndicator extends ZetaStatelessWidget {
         );
       case ZetaIndicatorType.notification:
         return Center(
-          child: Text(
-            value.formatMaxChars(),
-            style: ZetaTextStyles.labelIndicator.copyWith(
-              color: foregroundColor,
-              height: size == ZetaWidgetSize.large ? 1 : (12 / 16),
+          child: ExcludeSemantics(
+            excluding: semanticLabel != null,
+            child: Text(
+              value.formatMaxChars(),
+              style: ZetaTextStyles.labelIndicator.copyWith(
+                color: foregroundColor,
+                fontSize: size == ZetaWidgetSize.large ? 12 : 11,
+                height: size == ZetaWidgetSize.large ? 1 : (0.5 / 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

@@ -131,7 +131,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),
@@ -186,7 +186,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)),
@@ -210,27 +210,40 @@ 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(
       top: Zeta.of(context).spacing.minimum,
       right: Zeta.of(context).spacing.minimum,
       child: DecoratedBox(
         decoration: BoxDecoration(
-          color: colors.surfacePrimary,
+          color: colors.surfaceDefault,
           borderRadius: Zeta.of(context).radius.full,
         ),
         child: item.badge?.copyWith(
@@ -240,6 +253,7 @@ class _NavigationItem extends ZetaStatelessWidget {
                   ? ZetaWidgetSize.medium
                   : null,
           type: ZetaIndicatorType.notification,
+          semanticLabel: item.badge?.semanticLabel,
         ),
       ),
     );
@@ -255,9 +269,10 @@ 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,
           label: item.label,
           child: Container(
             padding: EdgeInsets.only(

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         |

test/src/components/avatar/avatar_test.dart

@@ -17,7 +17,7 @@ void main() {
   });
 
   group('Accessibility Tests', () {
-    testWidgets('ZetaAvatar meets accessibility  requirements', (WidgetTester tester) async {
+    testWidgets('ZetaAvatar meets accessibility requirements', (WidgetTester tester) async {
       final SemanticsHandle handle = tester.ensureSemantics();
       await tester.pumpWidget(
         const TestApp(
@@ -52,9 +52,9 @@ void main() {
       'lowerBadge': 'null',
       'backgroundColor': 'null',
       'statusColor': 'null',
-      'semanticUpperBadgeValue': '"upperBadge"',
-      'semanticValue': '"avatar"',
-      'semanticLowerBadgeValue': '"lowerBadge"',
+      'semanticUpperBadgeValue': 'null',
+      'semanticValue': 'null',
+      'semanticLowerBadgeValue': 'null',
       'initialTextStyle': 'null',
     };
     debugFillPropertiesTest(

test/src/components/badge/indicator_test.dart

@@ -13,7 +13,46 @@ void main() {
     goldenFileComparator = TolerantComparator(goldenFile.uri);
   });
 
-  group('Accessibility Tests', () {});
+  group('Accessibility Tests', () {
+    for (int i = 0; i < 10; i++) {
+      testWidgets('medium notification value $i meets accessibility standards', (tester) async {
+        final SemanticsHandle handle = tester.ensureSemantics();
+        await tester.pumpWidget(
+          TestApp(
+            home: ZetaIndicator(
+              size: ZetaWidgetSize.medium,
+              value: i,
+            ),
+          ),
+        );
+
+        await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(textContrastGuideline));
+
+        handle.dispose();
+      });
+
+      testWidgets('default notification value $i meets accessibility standards', (tester) async {
+        final SemanticsHandle handle = tester.ensureSemantics();
+        await tester.pumpWidget(
+          TestApp(
+            home: ZetaIndicator(
+              value: i,
+            ),
+          ),
+        );
+
+        await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
+        await expectLater(tester, meetsGuideline(textContrastGuideline));
+
+        handle.dispose();
+      });
+    }
+  });
   group('Content Tests', () {
     final debugFillProperties = {
       'color': 'MaterialColor(primary value: Color(0xffff9800))',
@@ -170,6 +209,11 @@ void main() {
       'indicator_icon_values',
     );
     goldenTest(goldenFile, const ZetaIndicator.notification(), 'indicator_notification_default');
+    goldenTest(
+      goldenFile,
+      const ZetaIndicator.notification(value: 3, size: ZetaWidgetSize.medium),
+      'indicator_notification_with_value',
+    );
     goldenTest(
       goldenFile,
       const ZetaIndicator.notification(