Add labels to provide better accessibility during onboarding v2 (#13890)

ui/pages/onboarding-flow/create-password/create-password.js

@@ -216,6 +216,7 @@ export default function CreatePassword({
             justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
             marginBottom={4}
           >
+            <label className="create-password__form__terms-label">
               <CheckBox
                 dataTestId="create-password-terms"
                 onClick={() => setTermsChecked(!termsChecked)}
@@ -236,6 +237,7 @@ export default function CreatePassword({
                   </a>,
                 ])}
               </Typography>
+            </label>
           </Box>
           <Button
             data-testid={

ui/pages/onboarding-flow/create-password/index.scss

@@ -41,6 +41,10 @@
       }
     }
 
+    &__terms-label {
+      display: flex;
+    }
+
     .form-field__input {
       height: 50px;
     }

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;

ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js

@@ -55,11 +55,10 @@ export default function SkipSRPBackup({ handleClose }) {
           {t('skipAccountSecurity')}
         </Typography>
         <Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}>
+          <label className="skip-srp-backup-popover__label">
             <Checkbox
               className="skip-srp-backup-popover__checkbox"
-            onClick={() => {
+              onClick={() => setChecked(!checked)}
-              setChecked(!checked);
-            }}
               checked={checked}
               dataTestId="skip-srp-backup-popover-checkbox"
             />
@@ -69,6 +68,7 @@ export default function SkipSRPBackup({ handleClose }) {
             >
               {t('skipAccountSecurityDetails')}
             </Typography>
+          </label>
         </Box>
       </Box>
     </Popover>