CHANGELOG.md

@@ -1,11 +1,3 @@
-## 1.2.0
-
-* Improve the UI for smaller screens to prevent overflows
-
-## 1.1.1
-
-* Removed custom definition of CustomSemantics to use the one from flutter_accessibility instead
-
 ## 1.1.0
 
 * Added CustomSemantics widget that is used to wrap all the buttons, textfields and dynamic texts to make the userstory accessible for e2e testing.

packages/flutter_availability/lib/src/ui/screens/availability_modification.dart

@@ -1,5 +1,4 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/ui/view_models/availability_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
@@ -8,6 +7,7 @@ import "package:flutter_availability/src/ui/widgets/availability_template_select
 import "package:flutter_availability/src/ui/widgets/availabillity_time_selection.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/pause_selection.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability/src/util/utils.dart";
 import "package:flutter_hooks/flutter_hooks.dart";

packages/flutter_availability/lib/src/ui/screens/availability_overview.dart

@@ -1,7 +1,7 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/calendar.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_legend.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";

packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart

@@ -1,10 +1,10 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/service/errors.dart";
 import "package:flutter_availability/src/ui/view_models/day_template_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/color_selection.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_name_input.dart";
 import "package:flutter_availability/src/ui/widgets/template_time_break.dart";
 import "package:flutter_availability/src/util/scope.dart";

packages/flutter_availability/lib/src/ui/screens/template_overview.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 import "package:flutter_hooks/flutter_hooks.dart";

packages/flutter_availability/lib/src/ui/screens/template_week_modification.dart

@@ -1,9 +1,9 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/service/errors.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/week_template_view_models.dart";
 import "package:flutter_availability/src/ui/widgets/color_selection.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_name_input.dart";
 import "package:flutter_availability/src/ui/widgets/template_time_break.dart";
 import "package:flutter_availability/src/ui/widgets/template_week_day_selection.dart";

packages/flutter_availability/lib/src/ui/widgets/availability_clear.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///
@@ -70,11 +70,9 @@ class AvailabilityClearSection extends StatelessWidget {
               ),
             ),
             const SizedBox(width: 8),
-            Expanded(
+            Text(
-              child: Text(
+              unavailableText,
-                unavailableText,
+              style: textTheme.bodyMedium,
-                style: textTheme.bodyMedium,
-              ),
             ),
           ],
         ),

packages/flutter_availability/lib/src/ui/widgets/availability_template_selection.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 

packages/flutter_availability/lib/src/ui/widgets/calendar.dart

@@ -1,7 +1,7 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///
@@ -73,52 +73,47 @@ class CalendarView extends StatelessWidget {
       (element) => element.templateDeviation,
     );
 
-    var monthDateSelector = LayoutBuilder(
+    var monthDateSelector = Row(
-      builder: (context, constraints) {
+      mainAxisAlignment: MainAxisAlignment.center,
-        var monthWidth =
+      children: [
-            _calculateTextWidthOfLongestMonth(context, translations);
+        CustomSemantics(
-        var sideSpace =
+          identifier: identifiers.previousMonthButtonIdentifier,
-            ((constraints.maxWidth - monthWidth) / 2 - 44).clamp(0.0, 44.0);
+          child: IconButton(
-
+            padding: EdgeInsets.zero,
-        return Row(
+            icon: const Icon(Icons.chevron_left),
-          mainAxisAlignment: MainAxisAlignment.center,
+            onPressed: () {
-          children: [
+              onMonthChanged(
-            CustomSemantics(
+                DateTime(month.year, month.month - 1),
-              identifier: identifiers.previousMonthButtonIdentifier,
+              );
-              child: IconButton(
+            },
-                padding: EdgeInsets.zero,
+          ),
-                icon: const Icon(Icons.chevron_left),
+        ),
-                onPressed: () {
+        const SizedBox(width: 44),
-                  onMonthChanged(DateTime(month.year, month.month - 1));
+        SizedBox(
-                },
+          width: _calculateTextWidthOfLongestMonth(context, translations),
-              ),
+          child: CustomSemantics(
+            identifier: identifiers.monthNameTextIdentifier,
+            child: Text(
+              translations.monthYearFormatter(context, month),
+              style: textTheme.titleMedium,
+              textAlign: TextAlign.center,
             ),
-            SizedBox(width: sideSpace),
+          ),
-            SizedBox(
+        ),
-              width: monthWidth,
+        const SizedBox(width: 44),
-              child: CustomSemantics(
+        CustomSemantics(
-                identifier: identifiers.monthNameTextIdentifier,
+          identifier: identifiers.nextMonthButtonIdentifier,
-                child: Text(
+          child: IconButton(
-                  translations.monthYearFormatter(context, month),
+            padding: EdgeInsets.zero,
-                  style: textTheme.titleMedium,
+            icon: const Icon(Icons.chevron_right),
-                  textAlign: TextAlign.center,
+            onPressed: () {
-                ),
+              onMonthChanged(
-              ),
+                DateTime(month.year, month.month + 1),
-            ),
+              );
-            SizedBox(width: sideSpace),
+            },
-            CustomSemantics(
+          ),
-              identifier: identifiers.nextMonthButtonIdentifier,
+        ),
-              child: IconButton(
+      ],
-                padding: EdgeInsets.zero,
-                icon: const Icon(Icons.chevron_right),
-                onPressed: () {
-                  onMonthChanged(DateTime(month.year, month.month + 1));
-                },
-              ),
-            ),
-          ],
-        );
-      },
     );
 
     var calendarGrid = CalendarGrid(

packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Returns the days of the week as abbreviated strings
@@ -167,12 +167,9 @@ class _CalendarDay extends StatelessWidget {
             children: [
               Center(
                 child: Container(
-                  padding: const EdgeInsets.symmetric(horizontal: 2),
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
                   decoration: decoration,
-                  child: Text(
+                  child: Text(day.date.day.toString(), style: textStyle),
-                    day.date.day.toString(),
-                    style: textStyle,
-                  ),
                 ),
               ),
               if (day.templateDeviation) ...[

packages/flutter_availability/lib/src/ui/widgets/color_selection.dart

@@ -1,7 +1,7 @@
 import "dart:math";
 
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Widget for selecting a color for a template

packages/flutter_availability/lib/src/ui/widgets/input_fields.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter/services.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// An input field for time selection

packages/flutter_availability/lib/src/ui/widgets/pause_selection.dart

@@ -1,10 +1,10 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/service/pop_handler.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
 import "package:flutter_availability/src/ui/widgets/generic_time_selection.dart";
 import "package:flutter_availability/src/ui/widgets/input_fields.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///

packages/flutter_availability/lib/src/ui/widgets/semantic_widget.dart

@@ -0,0 +1,62 @@
+import "dart:io";
+
+import "package:flutter/foundation.dart";
+import "package:flutter/material.dart";
+
+/// A wrapper that wraps a widget with a [Semantics] widget.
+/// This is used for testing purposes to add a unique identifier to a widget.
+/// Use this element for all widgets that have something that should be
+/// selectable in tests (buttons, textfields, dynamic texts)
+/// The [identifier] should be unique for the specific screen.
+/// To make sure the accessibility ID is set for all platforms this widget
+/// uses a label for android when it is not a textfield.
+/// [container] is set to true to make sure the widget is always its own
+/// accessibility element.
+/// [excludeSemantics] is set to false to make sure that children of this widget
+/// can still be interacted with.
+/// [isTextField] can be set to true because for textField the
+/// [excludeSemantics] modifies the behavior of the textfield in e2e tests.
+class CustomSemantics extends StatelessWidget {
+  /// Creates a [CustomSemantics] widget.
+  /// The [identifier] should be unique for the specific screen.
+  /// [isTextField] if this widget is a TextField or TextFormField
+  /// [excludeSemantics] if the [Semantics] widget should exclude the semantics
+  /// of its children. This is done by default if it not a textfield.
+  const CustomSemantics({
+    required this.identifier,
+    required this.child,
+    this.excludeSemantics = false,
+    this.isTextField = false,
+    super.key,
+  });
+
+  /// The widget that should be wrapped with a [Semantics] widget.
+  final Widget child;
+
+  /// Identifier for the widget that should be unique for the specific screen.
+  final String? identifier;
+
+  /// If the [Semantics] widget should exclude the semantics of its children.
+  final bool excludeSemantics;
+
+  /// If the widget is a textfield, the [child] can't be excluded. This is
+  /// because otherwise the textfield doesn't work in e2e tests with Appium.
+  final bool isTextField;
+
+  @override
+  Widget build(BuildContext context) {
+    var isAndroid = !kIsWeb && Platform.isAndroid;
+
+    var excludeSemantics = (!isTextField && isAndroid) || this.excludeSemantics;
+
+    var label = !isTextField && isAndroid ? identifier : null;
+
+    return Semantics(
+      excludeSemantics: excludeSemantics,
+      container: true,
+      label: label,
+      identifier: identifier,
+      child: child,
+    );
+  }
+}

packages/flutter_availability/lib/src/ui/widgets/template_legend.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/config/availability_options.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
@@ -76,11 +76,9 @@ class _TemplateLegendState extends State<TemplateLegend> {
               const SizedBox(width: 12),
               const Icon(Icons.add, size: 20),
               const SizedBox(width: 6),
-              Expanded(
+              Text(
-                child: Text(
+                translations.createTemplateButton,
-                  translations.createTemplateButton,
+                style: textTheme.bodyLarge,
-                  style: textTheme.bodyLarge,
-                ),
               ),
             ],
           ),

packages/flutter_availability/lib/src/ui/widgets/template_name_input.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Input section for the template name

packages/flutter_availability/lib/src/ui/widgets/template_week_day_selection.dart

@@ -1,8 +1,8 @@
 // ignore_for_file: avoid_positional_boolean_parameters
 
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// A widget for selecting a day of the week

packages/flutter_availability/lib/src/ui/widgets/template_week_overview.dart

@@ -1,9 +1,9 @@
 import "package:flutter/material.dart";
-import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/week_template_view_models.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
+import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 

packages/flutter_availability/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_availability
 description: "Flutter availability userstory package"
-version: 1.2.0
+version: 1.1.0
 
 publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
 
@@ -14,10 +14,7 @@ dependencies:
   flutter_hooks: ^0.20.5
   flutter_availability_data_interface:
     hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^1.2.0
+    version: ^1.1.0
-  flutter_accessibility:
-    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^0.0.3
 
 dev_dependencies:
   flutter_test:

packages/flutter_availability_data_interface/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_availability_data_interface
 description: "The data interface for the flutter_availability component"
-version: 1.2.0
+version: 1.1.0
 
 publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub