fix: [MDS-498] Add missing Semantics and semanticLabels (#135)

lib/src/widgets/accordion/accordion_item.dart

@@ -138,6 +138,9 @@ class MoonAccordionItem<T> extends StatefulWidget {
   /// {@macro flutter.widgets.Focus.focusNode}.
   final FocusNode? focusNode;
 
+  /// The semantic label for the accordion.
+  final String? semanticLabel;
+
   /// A widget to display before the title.
   ///
   /// Typically a [CircleAvatar] widget.
@@ -191,6 +194,7 @@ class MoonAccordionItem<T> extends StatefulWidget {
     this.transitionCurve,
     this.autofocus = false,
     this.focusNode,
+    this.semanticLabel,
     this.leading,
     required this.title,
     this.trailing,
@@ -438,6 +442,7 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
         _getTextColor(context, effectiveBackgroundColor: resolvedBackgroundColor ?? effectiveBackgroundColor);
 
     return Semantics(
+      label: widget.semanticLabel,
       enabled: _isExpanded,
       focused: _isFocused,
       child: FocusableActionDetector(

lib/src/widgets/checkbox/checkbox.dart

@@ -56,6 +56,9 @@ class MoonCheckbox extends StatefulWidget {
   /// {@macro flutter.widgets.Focus.autofocus}
   final bool autofocus;
 
+  /// The semantic label for the checkbox.
+  final String? semanticLabel;
+
   /// MDS checkbox widget.
   const MoonCheckbox({
     super.key,
@@ -69,6 +72,7 @@ class MoonCheckbox extends StatefulWidget {
     this.inactiveColor,
     this.focusNode,
     this.autofocus = false,
+    this.semanticLabel,
   });
 
   static Widget withLabel(
@@ -224,6 +228,7 @@ class _MoonCheckboxState extends State<MoonCheckbox> with TickerProviderStateMix
     });
 
     return Semantics(
+      label: widget.semanticLabel,
       checked: widget.value ?? false,
       mixed: widget.tristate ? widget.value == null : null,
       child: TouchTargetPadding(

lib/src/widgets/modal/modal.dart

@@ -7,14 +7,23 @@ import 'package:moon_design/src/theme/theme.dart';
 import 'package:moon_design/src/utils/extensions.dart';
 
 class MoonModal extends StatelessWidget {
+  /// The background color of the modal.
   final Color? backgroundColor;
+
+  /// The border radius of the modal.
   final BorderRadius? borderRadius;
+
+  /// The semantic label for the modal.
+  final String? semanticLabel;
+
+  /// The child of the modal.
   final Widget child;
 
   const MoonModal({
     super.key,
     this.backgroundColor,
     this.borderRadius,
+    this.semanticLabel,
     required this.child,
   });
 
@@ -42,19 +51,22 @@ class MoonModal extends StatelessWidget {
     final BorderRadius effectiveBorderRadius =
         borderRadius ?? context.moonTheme?.modalTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm;
 
-    return IconTheme(
-      data: IconThemeData(color: effectiveTextColor),
-      child: DefaultTextStyle(
-        style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
-        child: Center(
-          child: Container(
-            decoration: ShapeDecoration(
-              color: effectiveBackgroundColor,
-              shape: SmoothRectangleBorder(
-                borderRadius: effectiveBorderRadius.smoothBorderRadius,
+    return Semantics(
+      label: semanticLabel,
+      child: IconTheme(
+        data: IconThemeData(color: effectiveTextColor),
+        child: DefaultTextStyle(
+          style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
+          child: Center(
+            child: Container(
+              decoration: ShapeDecoration(
+                color: effectiveBackgroundColor,
+                shape: SmoothRectangleBorder(
+                  borderRadius: effectiveBorderRadius.smoothBorderRadius,
+                ),
               ),
+              child: child,
             ),
-            child: child,
           ),
         ),
       ),

lib/src/widgets/popover/popover.dart

@@ -74,6 +74,9 @@ class MoonPopover extends StatefulWidget {
   /// `RouteObserver` used to listen for route changes that will hide the popover when the widget's route is not active.
   final RouteObserver<PageRoute<dynamic>>? routeObserver;
 
+  /// The semantic label for the popover.
+  final String? semanticLabel;
+
   /// The widget that its placed inside the popover and functions as its content.
   final Widget content;
 
@@ -100,6 +103,7 @@ class MoonPopover extends StatefulWidget {
     this.transitionCurve,
     this.popoverShadows,
     this.routeObserver,
+    this.semanticLabel,
     required this.content,
     required this.child,
   });
@@ -433,33 +437,36 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
       popoverTargetGlobalRight: popoverTargetGlobalRight.dx,
     );
 
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTapDown: _handleTap,
-      child: UnconstrainedBox(
-        child: CompositedTransformFollower(
-          link: _layerLink,
-          showWhenUnlinked: false,
-          offset: popoverPositionParameters.offset,
-          followerAnchor: popoverPositionParameters.followerAnchor,
-          targetAnchor: popoverPositionParameters.targetAnchor,
-          child: RepaintBoundary(
-            child: FadeTransition(
-              opacity: _curvedAnimation!,
-              child: DefaultTextStyle(
-                style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
-                child: Container(
-                  key: _popoverKey,
-                  constraints: BoxConstraints(maxWidth: popoverPositionParameters.toolTipMaxWidth),
-                  padding: effectiveContentPadding,
-                  decoration: ShapeDecoration(
-                    color: effectiveBackgroundColor,
-                    shadows: effectivePopoverShadows,
-                    shape: SmoothRectangleBorder(
-                      borderRadius: effectiveBorderRadius.smoothBorderRadius,
+    return Semantics(
+      label: widget.semanticLabel,
+      child: GestureDetector(
+        behavior: HitTestBehavior.translucent,
+        onTapDown: _handleTap,
+        child: UnconstrainedBox(
+          child: CompositedTransformFollower(
+            link: _layerLink,
+            showWhenUnlinked: false,
+            offset: popoverPositionParameters.offset,
+            followerAnchor: popoverPositionParameters.followerAnchor,
+            targetAnchor: popoverPositionParameters.targetAnchor,
+            child: RepaintBoundary(
+              child: FadeTransition(
+                opacity: _curvedAnimation!,
+                child: DefaultTextStyle(
+                  style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
+                  child: Container(
+                    key: _popoverKey,
+                    constraints: BoxConstraints(maxWidth: popoverPositionParameters.toolTipMaxWidth),
+                    padding: effectiveContentPadding,
+                    decoration: ShapeDecoration(
+                      color: effectiveBackgroundColor,
+                      shadows: effectivePopoverShadows,
+                      shape: SmoothRectangleBorder(
+                        borderRadius: effectiveBorderRadius.smoothBorderRadius,
+                      ),
                     ),
+                    child: widget.content,
                   ),
-                  child: widget.content,
                 ),
               ),
             ),

lib/src/widgets/progress/circular_progress.dart

@@ -35,6 +35,9 @@ class MoonCircularProgress extends StatelessWidget {
   /// Stroke cap of the circular progress widget.
   final StrokeCap? strokeCap;
 
+  /// The semantic label for the circular progress widget.
+  final String? semanticLabel;
+
   /// MDS circular progress widget.
   const MoonCircularProgress({
     super.key,
@@ -45,6 +48,7 @@ class MoonCircularProgress extends StatelessWidget {
     this.color,
     this.backgroundColor,
     this.strokeCap,
+    this.semanticLabel,
   });
 
   MoonCircularProgressSizeProperties _getMoonCircularProgressSize(
@@ -82,15 +86,19 @@ class MoonCircularProgress extends StatelessWidget {
     final double effectiveSize = sizeValue ?? effectiveMoonCircularProgressSize.progressSizeValue;
     final double effectiveStrokeWidth = strokeWidth ?? effectiveMoonCircularProgressSize.progressStrokeWidth;
 
-    return SizedBox(
-      height: effectiveSize,
-      width: effectiveSize,
-      child: MoonCircularProgressIndicator(
-        value: value,
-        strokeWidth: effectiveStrokeWidth,
-        color: effectiveColor,
-        backgroundColor: effectiveBackgroundColor,
-        strokeCap: effectiveStrokeCap,
+    return Semantics(
+      label: semanticLabel,
+      value: "${value * 100}%",
+      child: SizedBox(
+        height: effectiveSize,
+        width: effectiveSize,
+        child: MoonCircularProgressIndicator(
+          value: value,
+          strokeWidth: effectiveStrokeWidth,
+          color: effectiveColor,
+          backgroundColor: effectiveBackgroundColor,
+          strokeCap: effectiveStrokeCap,
+        ),
       ),
     );
   }

lib/src/widgets/progress/linear_progress.dart

@@ -17,21 +17,24 @@ class MoonLinearProgress extends StatelessWidget {
   /// Size of the linear progress widget.
   final MoonLinearProgressSize? progressSize;
 
-  /// Value of the progress widget.
+  /// Value of the linear progress widget.
   final double value;
 
-  /// Height of the progress widget.
+  /// Height of the linear progress widget.
   final double? height;
 
-  /// Color of the progress widget.
+  /// Color of the linear progress widget.
   final Color? color;
 
-  /// Background color of the progress widget.
+  /// Background color of the linear progress widget.
   final Color? backgroundColor;
 
-  /// Border radius value of the progress widget.
+  /// Border radius value of the linear progress widget.
   final double? borderRadiusValue;
 
+  /// The semantic label for the linear progress widget.
+  final String? semanticLabel;
+
   /// MDS linear progress widget.
   const MoonLinearProgress({
     super.key,
@@ -41,6 +44,7 @@ class MoonLinearProgress extends StatelessWidget {
     this.color,
     this.backgroundColor,
     this.borderRadiusValue,
+    this.semanticLabel,
   });
 
   MoonLinearProgressSizeProperties _getMoonProgressSize(
@@ -75,12 +79,16 @@ class MoonLinearProgress extends StatelessWidget {
     final double effectiveBorderRadiusValue = borderRadiusValue ?? effectiveProgressSize.borderRadiusValue;
     final double effectiveHeight = height ?? effectiveProgressSize.progressHeight;
 
-    return MoonLinearProgressIndicator(
-      value: value,
-      borderRadiusValue: effectiveBorderRadiusValue,
-      minHeight: effectiveHeight,
-      color: effectiveColor,
-      backgroundColor: effectiveBackgroundColor,
+    return Semantics(
+      label: semanticLabel,
+      value: "${value * 100}%",
+      child: MoonLinearProgressIndicator(
+        value: value,
+        borderRadiusValue: effectiveBorderRadiusValue,
+        minHeight: effectiveHeight,
+        color: effectiveColor,
+        backgroundColor: effectiveBackgroundColor,
+      ),
     );
   }
 }

lib/src/widgets/radio/radio.dart

@@ -69,6 +69,9 @@ class MoonRadio<T> extends StatefulWidget {
   /// {@macro flutter.widgets.Focus.autofocus}
   final bool autofocus;
 
+  /// The semantic label for the radio.
+  final String? semanticLabel;
+
   /// MDS radio widget.
   const MoonRadio({
     super.key,
@@ -81,6 +84,7 @@ class MoonRadio<T> extends StatefulWidget {
     this.inactiveColor,
     this.focusNode,
     this.autofocus = false,
+    this.semanticLabel,
   });
 
   static Widget withLabel<T>(
@@ -219,6 +223,7 @@ class _RadioState<T> extends State<MoonRadio<T>> with TickerProviderStateMixin,
     });
 
     return Semantics(
+      label: widget.semanticLabel,
       inMutuallyExclusiveGroup: true,
       checked: widget._selected,
       child: TouchTargetPadding(

lib/src/widgets/switch/switch.dart

@@ -62,6 +62,9 @@ class MoonSwitch extends StatefulWidget {
   /// {@macro flutter.widgets.Focus.focusNode}.
   final FocusNode? focusNode;
 
+  /// The semantic label for the switch.
+  final String? semanticLabel;
+
   /// The widget to display when the switch is on (left slot).
   final Widget? activeTrackWidget;
 
@@ -92,6 +95,7 @@ class MoonSwitch extends StatefulWidget {
     this.duration,
     this.curve,
     this.focusNode,
+    this.semanticLabel,
     this.activeTrackWidget,
     this.inactiveTrackWidget,
     this.activeThumbWidget,
@@ -381,6 +385,7 @@ class _MoonSwitchState extends State<MoonSwitch> with SingleTickerProviderStateM
     final Color inactiveTextColor = _getTextOrIconColor(backgroundColor: effectiveInactiveTrackColor);
 
     return Semantics(
+      label: widget.semanticLabel,
       toggled: widget.value,
       child: FocusableActionDetector(
         enabled: _isInteractive,