[FIX] Some actions are not working when Semantics enabled

core/lib/core.dart

@@ -86,7 +86,6 @@ export 'presentation/views/quick_search/quick_search_input_form.dart';
 export 'presentation/views/toast/toast_position.dart';
 export 'presentation/views/toast/tmail_toast.dart';
 export 'presentation/views/bottom_popup/full_screen_action_sheet_builder.dart';
-export 'presentation/views/checkbox/labeled_checkbox.dart';
 export 'presentation/views/container/tmail_container_widget.dart';
 export 'presentation/views/clipper/side_arrow_clipper.dart';
 export 'presentation/views/avatar/gradient_circle_avatar_icon.dart';

core/lib/presentation/views/bottom_popup/confirmation_dialog_action_sheet_builder.dart

@@ -54,6 +54,7 @@ class ConfirmationDialogActionSheetBuilder {
     return await showCupertinoModalPopup(
       context: _context,
       barrierColor: AppColor.colorDefaultCupertinoActionSheet,
+      barrierDismissible: false,
       builder: (context) => PointerInterceptor(child: CupertinoActionSheet(
         actions: [
           if (_messageText != null && _messageText!.isNotEmpty)

core/lib/presentation/views/button/tmail_button_widget.dart

@@ -40,6 +40,7 @@ class TMailButtonWidget extends StatelessWidget {
   final MainAxisSize mainAxisSize;
   final bool isLoading;
   final Color? hoverColor;
+  final bool expandedText;
 
   const TMailButtonWidget({
     super.key,
@@ -74,6 +75,7 @@ class TMailButtonWidget extends StatelessWidget {
     this.mainAxisSize = MainAxisSize.max,
     this.isLoading = false,
     this.hoverColor,
+    this.expandedText = false,
   });
 
   factory TMailButtonWidget.fromIcon({
@@ -149,6 +151,7 @@ class TMailButtonWidget extends StatelessWidget {
     BoxBorder? border,
     int? maxLines,
     Color? hoverColor,
+    bool expandedText = false,
   }) {
     return TMailButtonWidget(
       key: key,
@@ -172,6 +175,7 @@ class TMailButtonWidget extends StatelessWidget {
       border: border,
       maxLines: maxLines,
       hoverColor: hoverColor,
+      expandedText: expandedText,
     );
   }
 
@@ -244,6 +248,20 @@ class TMailButtonWidget extends StatelessWidget {
                     softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
                   ),
                 )
+              else if (expandedText)
+                Expanded(
+                  child: Text(
+                    text,
+                    textAlign: textAlign,
+                    style: textStyle ?? const TextStyle(
+                      fontSize: 12,
+                      color: AppColor.colorTextButtonHeaderThread
+                    ),
+                    maxLines: maxLines,
+                    overflow: maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null,
+                    softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
+                  ),
+                )
               else
                 Text(
                   text,
@@ -288,6 +306,20 @@ class TMailButtonWidget extends StatelessWidget {
                     softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
                   ),
                 )
+              else if (expandedText)
+                Expanded(
+                  child: Text(
+                    text,
+                    textAlign: textAlign,
+                    style: textStyle ?? const TextStyle(
+                      fontSize: 12,
+                      color: AppColor.colorTextButtonHeaderThread
+                    ),
+                    maxLines: maxLines,
+                    overflow: maxLines == 1 ? CommonTextStyle.defaultTextOverFlow : null,
+                    softWrap: maxLines == 1 ? CommonTextStyle.defaultSoftWrap : null,
+                  ),
+                )
               else
                 Text(
                   text,

core/lib/presentation/views/container/tmail_container_widget.dart

@@ -49,6 +49,7 @@ class TMailContainerWidget extends StatelessWidget {
       type: MaterialType.transparency,
       child: InkWell(
         onTap: onTapActionCallback,
+        excludeFromSemantics: true,
         onTapDown: onTapActionAtPositionCallback != null
           ? (detail) {
               if (onTapActionAtPositionCallback != null) {

core/lib/presentation/views/dialog/color_picker_dialog_builder.dart

@@ -150,7 +150,8 @@ class ColorPickerDialogBuilder {
                 })
           ],
         ),
-      )
+      ),
+      barrierDismissible: false
     );
   }
 

docs/adr/0052-enable-semantics-to-support-integration-test-on-web.md

@@ -0,0 +1,84 @@
+# 52. Enable Semantics to support integration test on Web
+
+Date: 2024-08-19
+
+## Status
+
+Accepted
+
+## Context
+
+All the UI in a Flutter app is rendered as a `Widget Tree`. So the widgets can't access the widget tree elements. 
+So we have to use [Semantics](https://api.flutter.dev/flutter/widgets/Semantics-class.html)
+so that when Flutter renders the `Widgets Tree`, it also maintains a second tree, called `Semantics Tree`, 
+which helps us to easily access each element, widget of the user interface.
+
+## Decision
+
+1. How to enable Semantics:
+
+- Enable `Semantics` in main function:
+
+```dart
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+  SemanticsBinding.instance.ensureSemantics();
+
+  runApp(const TMailApp());
+}
+```
+
+- To access any widget element we just need to wrap it in a `Sematics` widget and set a `label` for it
+
+```dart
+Semantics(
+  label: 'Title-app',
+  child: Text('Twake Mail'),
+);
+```
+
+2. To ignore `Sematics` for a specific widget, when we have Semantics enabled
+
+- Way 1: Set the `excludeSemantics: true` property of the `Semantics` widget
+
+```dart
+Semantics(
+  label: 'Title-app',
+  excludeSemantics: true,
+  child: Text('Twake Mail'),
+);
+```
+
+- Way 2: Use `ExcludeSemantics` widget instead of `Semantics` widget
+
+```dart
+ExcludeSemantics(
+  child: Text('Twake Mail'),
+);
+```
+
+3. For a widget to be treated as a text field in the Semantics Tree
+
+Set the ` textField: true` property of the `Semantics` widget
+
+```dart
+Semantics(
+  label: 'Subject-email',
+  textField: true,
+  child: TextField(),
+);
+```
+
+## Consequences
+
+- Enabling Semantics has given us easy access to the widget elements of each screen. Making `Integration test` implementation easy and efficient.
+
+## Influence
+
+Some widgets are not working due to Semantics overlap:
+
+- Workaround: 
+    - Ignore `Sematics` for a specific widget
+    - Use the correct properties for each widget used (`textField, button, container,...`)
+
+

lib/features/base/base_mailbox_controller.dart

@@ -369,6 +369,7 @@ abstract class BaseMailboxController extends BaseController {
               (value) => onRenameMailboxAction(presentationMailbox, MailboxName(value))
           )
         ).build()),
+        barrierDismissible: false,
         barrierColor: AppColor.colorDefaultCupertinoActionSheet,
       );
     }
@@ -437,6 +438,7 @@ abstract class BaseMailboxController extends BaseController {
           ..onConfirmButtonAction(AppLocalizations.of(context).delete, () => onDeleteMailboxAction(presentationMailbox))
           ..onCancelButtonAction(AppLocalizations.of(context).cancel, () => popBack())
         ).build()),
+        barrierDismissible: false,
         barrierColor: AppColor.colorDefaultCupertinoActionSheet,
       );
     }

lib/features/base/mixin/mailbox_action_handler_mixin.dart

@@ -100,6 +100,7 @@ mixin MailboxActionHandlerMixin {
             ..onCancelButtonAction(AppLocalizations.of(context).cancel, popBack))
           .build()
         ),
+        barrierDismissible: false,
         barrierColor: AppColor.colorDefaultCupertinoActionSheet,
       );
     }
@@ -160,6 +161,7 @@ mixin MailboxActionHandlerMixin {
           })
           ..onCancelButtonAction(AppLocalizations.of(context).cancel, popBack)
         ).build()),
+        barrierDismissible: false,
         barrierColor: AppColor.colorDefaultCupertinoActionSheet,
       );
     }

lib/features/base/mixin/message_dialog_action_mixin.dart

@@ -21,7 +21,7 @@ mixin MessageDialogActionMixin {
         bool hasCancelButton = true,
         bool showAsBottomSheet = false,
         bool alignCenter = false,
-        bool outsideDismissible = true,
+        bool outsideDismissible = false,
         bool autoPerformPopBack = true,
         bool usePopScope = false,
         List<TextSpan>? listTextSpan,

lib/features/base/widget/drop_down_button_widget.dart

@@ -78,26 +78,29 @@ class DropDownButtonWidget<T> extends StatelessWidget {
           items: items
               .map((item) => DropdownMenuItem<T>(
                     value: item,
-                    child: PointerInterceptor(
-                      child: Container(
-                        color: Colors.transparent,
-                        height: heightItem,
-                        child: Row(children: [
-                          Expanded(child: Text(_getTextItemDropdown(context, item: item),
-                            style: const TextStyle(
-                                fontSize: 16,
-                                fontWeight: FontWeight.normal,
-                                color: Colors.black),
-                            maxLines: 1,
-                            softWrap: CommonTextStyle.defaultSoftWrap,
-                            overflow: CommonTextStyle.defaultTextOverFlow,
-                          )),
-                          if (supportSelectionIcon && item == itemSelected)
-                            SvgPicture.asset(imagePaths.icChecked,
-                              width: sizeIconChecked,
-                              height: sizeIconChecked,
-                              fit: BoxFit.fill)
-                        ]),
+                    child: Semantics(
+                      excludeSemantics: true,
+                      child: PointerInterceptor(
+                        child: Container(
+                          color: Colors.transparent,
+                          height: heightItem,
+                          child: Row(children: [
+                            Expanded(child: Text(_getTextItemDropdown(context, item: item),
+                              style: const TextStyle(
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.normal,
+                                  color: Colors.black),
+                              maxLines: 1,
+                              softWrap: CommonTextStyle.defaultSoftWrap,
+                              overflow: CommonTextStyle.defaultTextOverFlow,
+                            )),
+                            if (supportSelectionIcon && item == itemSelected)
+                              SvgPicture.asset(imagePaths.icChecked,
+                                width: sizeIconChecked,
+                                height: sizeIconChecked,
+                                fit: BoxFit.fill)
+                          ]),
+                        ),
                       ),
                     ),
                   ))