refactor(deriv_auth_ui): [MOBC-629] Adding semantics to UI components (…

…#321) * chore(deriv_auth_ui):Adding semantics to UI components * chore(deriv_auth_ui):Adding semantics to UI components, fixes based on review comments * chore(deriv_auth_ui):Adding explicitChildNodes: true to Semantics Widgets
deriv-com · Nov 29, 2023 · 36a0c1f · 36a0c1f
1 parent 2eaddf5
commit 36a0c1f
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 109 deletions.
diff --git a/packages/deriv_auth_ui/lib/src/core/helpers/semantic_labels.dart b/packages/deriv_auth_ui/lib/src/core/helpers/semantic_labels.dart
@@ -0,0 +1,41 @@
+/// A class that contains semantic labels for various UI elements in the auth UI flow.
+class SemanticsLabels {
+  // Signup Page
+
+  /// A semantic label for the email field on the signup page.
+  static String signupEmailFieldSemantic = 'signup_email_field_semantic';
+
+  /// A semantic label for the signup button on the signup page.
+  static String signupButtonSemantic = 'signup_button_semantic';
+
+  /// A semantic label for the referral text field on the signup page.
+  static String signupReferralTextFieldSemantic =
+      'signup_referral_field_semantic';
+
+  // Login Page
+
+  /// A semantic label for the email field on the login page.
+  static String loginEmailFieldSemantic = 'login_email_field_semantic';
+
+  /// A semantic label for the password field on the login page.
+  static String loginPasswordFieldSemantic = 'login_password_field_semantic';
+
+  // Reset Password Page
+
+  /// A semantic label for the email field on the reset password page.
+  static String resetPasswordEmailFieldSemantic =
+      'reset_password_email_field_semantic';
+
+  /// A semantic label for the reset password button on the reset password page.
+  static String resetPasswordButtonSemantic = 'reset_password_button_semantic';
+
+  // Starter Page
+
+  /// A semantic label for the signup button on the starter page.
+  static String starterPageSignupButtonSemantic =
+      'starter_page_signup_button_semantic';
+
+  /// A semantic label for the login button on the starter page.
+  static String starterPageLoginButtonSemantic =
+      'starter_page_login_button_semantic';
+}
diff --git a/packages/deriv_auth_ui/lib/src/features/get_started/layouts/deriv_get_started_layout.dart b/packages/deriv_auth_ui/lib/src/features/get_started/layouts/deriv_get_started_layout.dart
@@ -4,6 +4,7 @@ import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:deriv_auth_ui/src/core/extensions/context_extension.dart';
+import 'package:deriv_auth_ui/src/core/helpers/semantic_labels.dart';
 import 'package:deriv_auth_ui/src/features/get_started/models/deriv_get_started_slide_model.dart';
 import 'package:deriv_theme/deriv_theme.dart';
 import 'package:deriv_ui/deriv_ui.dart';
@@ -139,26 +140,34 @@ class _DerivGetStartedLayoutState extends State<DerivGetStartedLayout> {
   Widget _buildButtons() => Column(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
-          PrimaryButton(
-            onPressed: widget.onSignupTapped,
-            child: Center(
-              child: Text(
-                context.localization.actionGetAFreeAccount,
-                style: context.theme.textStyle(
-                  textStyle: TextStyles.body2,
-                  color: context.theme.colors.prominent,
+          Semantics(
+            explicitChildNodes: true,
+            label: SemanticsLabels.starterPageSignupButtonSemantic,
+            child: PrimaryButton(
+              onPressed: widget.onSignupTapped,
+              child: Center(
+                child: Text(
+                  context.localization.actionGetAFreeAccount,
+                  style: context.theme.textStyle(
+                    textStyle: TextStyles.body2,
+                    color: context.theme.colors.prominent,
+                  ),
                 ),
               ),
             ),
           ),
-          SecondaryButton(
-            onPressed: widget.onLoginTapped,
-            child: Center(
-              child: Text(
-                context.localization.actionLogin,
-                style: context.theme.textStyle(
-                  textStyle: TextStyles.body2,
-                  color: context.theme.colors.prominent,
+          Semantics(
+            explicitChildNodes: true,
+            label: SemanticsLabels.starterPageLoginButtonSemantic,
+            child: SecondaryButton(
+              onPressed: widget.onLoginTapped,
+              child: Center(
+                child: Text(
+                  context.localization.actionLogin,
+                  style: context.theme.textStyle(
+                    textStyle: TextStyles.body2,
+                    color: context.theme.colors.prominent,
+                  ),
                 ),
               ),
             ),

diff --git a/packages/deriv_auth_ui/lib/src/features/login/layouts/deriv_login_layout.dart b/packages/deriv_auth_ui/lib/src/features/login/layouts/deriv_login_layout.dart
@@ -4,6 +4,7 @@ import 'package:deriv_auth/deriv_auth.dart';
 import 'package:deriv_auth_ui/deriv_auth_ui.dart';
 import 'package:deriv_auth_ui/src/core/extensions/context_extension.dart';
 import 'package:deriv_auth_ui/src/core/extensions/string_extension.dart';
+import 'package:deriv_auth_ui/src/core/helpers/semantic_labels.dart';
 import 'package:deriv_auth_ui/src/features/login/widgets/deriv_social_auth_divider.dart';
 import 'package:deriv_auth_ui/src/features/login/widgets/deriv_social_auth_panel.dart';
 import 'package:deriv_theme/deriv_theme.dart';
@@ -158,6 +159,7 @@ class _DerivLoginLayoutState extends State<DerivLoginLayout> {
 
   List<Widget> _buildTextFields({required bool isEnabled}) => <Widget>[
         BaseTextField(
+          semanticLabel: SemanticsLabels.loginEmailFieldSemantic,
           controller: _emailController,
           focusNode: _emailFocusNode,
           labelText: context.localization.labelEmail,
@@ -172,6 +174,7 @@ class _DerivLoginLayoutState extends State<DerivLoginLayout> {
         ),
         const SizedBox(height: ThemeProvider.margin32),
         BaseTextField(
+          semanticLabel: SemanticsLabels.loginPasswordFieldSemantic,
           controller: _passwordController,
           focusNode: _passwordFocusNode,
           labelText: context.localization.labelPassword,

diff --git a/packages/deriv_auth_ui/lib/src/features/reset_pass/layouts/deriv_reset_pass_layout.dart b/packages/deriv_auth_ui/lib/src/features/reset_pass/layouts/deriv_reset_pass_layout.dart
@@ -4,6 +4,7 @@ import 'package:deriv_auth/deriv_auth.dart';
 import 'package:deriv_auth_ui/src/core/extensions/context_extension.dart';
 import 'package:deriv_auth_ui/src/core/extensions/string_extension.dart';
 import 'package:deriv_auth_ui/src/core/helpers/assets.dart';
+import 'package:deriv_auth_ui/src/core/helpers/semantic_labels.dart';
 import 'package:deriv_theme/deriv_theme.dart';
 import 'package:deriv_ui/deriv_ui.dart';
 import 'package:flutter/material.dart';
@@ -135,6 +136,7 @@ class _DerivResetPassLayoutState extends State<DerivResetPassLayout> {
               ),
               const SizedBox(height: ThemeProvider.margin24),
               BaseTextField(
+                semanticLabel: SemanticsLabels.resetPasswordEmailFieldSemantic,
                 controller: _emailController,
                 focusNode: _emailFocusNode,
                 labelText: context.localization.labelEmail,
@@ -152,32 +154,36 @@ class _DerivResetPassLayoutState extends State<DerivResetPassLayout> {
         ),
       );
 
-  Widget _buildSubmitEmailButton() => ElevatedButton(
-        style: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all<Color>(
-            context.theme.colors.coral.withOpacity(
-              getOpacity(isEnabled: _isFormValid()),
+  Widget _buildSubmitEmailButton() => Semantics(
+        explicitChildNodes: true,
+        label: SemanticsLabels.resetPasswordButtonSemantic,
+        child: ElevatedButton(
+          style: ButtonStyle(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              context.theme.colors.coral.withOpacity(
+                getOpacity(isEnabled: _isFormValid()),
+              ),
             ),
           ),
-        ),
-        onPressed: _isFormValid() ? _onSubmitEmailTapped : null,
-        child: Center(
-          child: _isBusy
-              ? LoadingIndicator(
-                  valueColor: context.theme.colors.prominent,
-                  strokeWidth: ThemeProvider.margin02,
-                  height: ThemeProvider.margin16,
-                  width: ThemeProvider.margin16,
-                )
-              : Text(
-                  context.localization.actionResetPass,
-                  style: context.theme.textStyle(
-                    textStyle: TextStyles.body2,
-                    color: context.theme.colors.prominent.withOpacity(
-                      getOpacity(isEnabled: _isFormValid()),
+          onPressed: _isFormValid() ? _onSubmitEmailTapped : null,
+          child: Center(
+            child: _isBusy
+                ? LoadingIndicator(
+                    valueColor: context.theme.colors.prominent,
+                    strokeWidth: ThemeProvider.margin02,
+                    height: ThemeProvider.margin16,
+                    width: ThemeProvider.margin16,
+                  )
+                : Text(
+                    context.localization.actionResetPass,
+                    style: context.theme.textStyle(
+                      textStyle: TextStyles.body2,
+                      color: context.theme.colors.prominent.withOpacity(
+                        getOpacity(isEnabled: _isFormValid()),
+                      ),
                     ),
                   ),
-                ),
+          ),
         ),
       );
 

diff --git a/packages/deriv_auth_ui/lib/src/features/signup/layouts/deriv_signup_layout.dart b/packages/deriv_auth_ui/lib/src/features/signup/layouts/deriv_signup_layout.dart
@@ -1,6 +1,7 @@
 import 'package:deriv_auth/deriv_auth.dart';
 import 'package:deriv_auth_ui/src/core/extensions/context_extension.dart';
 import 'package:deriv_auth_ui/src/core/extensions/string_extension.dart';
+import 'package:deriv_auth_ui/src/core/helpers/semantic_labels.dart';
 import 'package:deriv_auth_ui/src/core/states/auth_state_listener.dart';
 import 'package:deriv_auth_ui/src/features/login/widgets/deriv_social_auth_divider.dart';
 import 'package:deriv_auth_ui/src/features/login/widgets/deriv_social_auth_panel.dart';
@@ -212,6 +213,8 @@ class _DerivSignupLayoutState extends State<DerivSignupLayout> {
                     vertical: ThemeProvider.margin16,
                   ),
                   child: BaseTextField(
+                    semanticLabel:
+                        SemanticsLabels.signupReferralTextFieldSemantic,
                     controller: referralController,
                     onChanged: (_) {
                       if (mounted) {
@@ -276,6 +279,7 @@ class _DerivSignupLayoutState extends State<DerivSignupLayout> {
       );
 
   Widget _buildEmailTextField() => BaseTextField(
+        semanticLabel: SemanticsLabels.signupEmailFieldSemantic,
         controller: emailController,
         focusNode: emailFocusNode,
         labelText: context.localization.labelEmail,
@@ -291,25 +295,28 @@ class _DerivSignupLayoutState extends State<DerivSignupLayout> {
         },
       );
 
-  Widget _buildSignUpButton() => PrimaryButton(
-        isEnabled: _isFormValid(),
-        onPressed: _onSignupTapped,
-        child: Center(
-          child:
-              context.read<DerivSignupCubit>().state is DerivSignupProgressState
-                  ? const LoadingIndicator(
-                      valueColor: Colors.white,
-                      strokeWidth: ThemeProvider.margin02,
-                      height: ThemeProvider.iconSize16,
-                      width: ThemeProvider.iconSize16,
-                    )
-                  : Text(
-                      context.localization.actionCreateAccount,
-                      style: context.theme.textStyle(
-                        textStyle: TextStyles.body2,
-                        color: context.theme.colors.prominent,
-                      ),
+  Widget _buildSignUpButton() => Semantics(
+        label: SemanticsLabels.signupButtonSemantic,
+        child: PrimaryButton(
+          isEnabled: _isFormValid(),
+          onPressed: _onSignupTapped,
+          child: Center(
+            child: context.read<DerivSignupCubit>().state
+                    is DerivSignupProgressState
+                ? const LoadingIndicator(
+                    valueColor: Colors.white,
+                    strokeWidth: ThemeProvider.margin02,
+                    height: ThemeProvider.iconSize16,
+                    width: ThemeProvider.iconSize16,
+                  )
+                : Text(
+                    context.localization.actionCreateAccount,
+                    style: context.theme.textStyle(
+                      textStyle: TextStyles.body2,
+                      color: context.theme.colors.prominent,
                     ),
+                  ),
+          ),
         ),
       );