From cd11f90f8f0bab7276ebae1f2a32b39d7cc93eca Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 14 Mar 2022 20:27:02 -0500
Subject: [PATCH] Add labels to provide better accessibility during onboarding
 v2 (#13890)

---
 .../create-password/create-password.js        | 42 ++++++++++---------
 .../create-password/index.scss                |  4 ++
 .../secure-your-wallet/index.scss             |  4 ++
 .../skip-srp-backup-popover.js                | 28 ++++++-------
 4 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js
index e91e31004..a275dba85 100644
--- a/ui/pages/onboarding-flow/create-password/create-password.js
+++ b/ui/pages/onboarding-flow/create-password/create-password.js
@@ -216,26 +216,28 @@ export default function CreatePassword({
             justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
             marginBottom={4}
           >
-            <CheckBox
-              dataTestId="create-password-terms"
-              onClick={() => setTermsChecked(!termsChecked)}
-              checked={termsChecked}
-            />
-            <Typography variant={TYPOGRAPHY.H5} boxProps={{ marginLeft: 3 }}>
-              {t('passwordTermsWarning', [
-                <a
-                  onClick={(e) => e.stopPropagation()}
-                  key="create-password__link-text"
-                  href={ZENDESK_URLS.PASSWORD_ARTICLE}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <span className="create-password__link-text">
-                    {t('learnMoreUpperCase')}
-                  </span>
-                </a>,
-              ])}
-            </Typography>
+            <label className="create-password__form__terms-label">
+              <CheckBox
+                dataTestId="create-password-terms"
+                onClick={() => setTermsChecked(!termsChecked)}
+                checked={termsChecked}
+              />
+              <Typography variant={TYPOGRAPHY.H5} boxProps={{ marginLeft: 3 }}>
+                {t('passwordTermsWarning', [
+                  <a
+                    onClick={(e) => e.stopPropagation()}
+                    key="create-password__link-text"
+                    href={ZENDESK_URLS.PASSWORD_ARTICLE}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span className="create-password__link-text">
+                      {t('learnMoreUpperCase')}
+                    </span>
+                  </a>,
+                ])}
+              </Typography>
+            </label>
           </Box>
           <Button
             data-testid={
diff --git a/ui/pages/onboarding-flow/create-password/index.scss b/ui/pages/onboarding-flow/create-password/index.scss
index 0979fde43..b97a2a66e 100644
--- a/ui/pages/onboarding-flow/create-password/index.scss
+++ b/ui/pages/onboarding-flow/create-password/index.scss
@@ -41,6 +41,10 @@
       }
     }
 
+    &__terms-label {
+      display: flex;
+    }
+
     .form-field__input {
       height: 50px;
     }
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/index.scss b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
index c76b01313..cfaebae19 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/index.scss
+++ b/ui/pages/onboarding-flow/secure-your-wallet/index.scss
@@ -39,6 +39,10 @@
     margin: 8px 12px 0 0;
   }
 
+  &__label {
+    display: flex;
+  }
+
   &__footer {
     button {
       width: 140px;
diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
index 5cdcdf837..8bba66085 100644
--- a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
+++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
@@ -55,20 +55,20 @@ export default function SkipSRPBackup({ handleClose }) {
           {t('skipAccountSecurity')}
         </Typography>
         <Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}>
-          <Checkbox
-            className="skip-srp-backup-popover__checkbox"
-            onClick={() => {
-              setChecked(!checked);
-            }}
-            checked={checked}
-            dataTestId="skip-srp-backup-popover-checkbox"
-          />
-          <Typography
-            className="skip-srp-backup-popover__details"
-            variant={TYPOGRAPHY.h7}
-          >
-            {t('skipAccountSecurityDetails')}
-          </Typography>
+          <label className="skip-srp-backup-popover__label">
+            <Checkbox
+              className="skip-srp-backup-popover__checkbox"
+              onClick={() => setChecked(!checked)}
+              checked={checked}
+              dataTestId="skip-srp-backup-popover-checkbox"
+            />
+            <Typography
+              className="skip-srp-backup-popover__details"
+              variant={TYPOGRAPHY.h7}
+            >
+              {t('skipAccountSecurityDetails')}
+            </Typography>
+          </label>
         </Box>
       </Box>
     </Popover>