m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

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

Browse Source
This commit is contained in:
David Walsh 2022-03-14 20:27:02 -05:00 committed by GitHub
parent 8143222f92
commit cd11f90f8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/pages/onboarding-flow/create-password/create-password.js
View File

@ -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={

4
ui/pages/onboarding-flow/create-password/index.scss
View File

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

4
ui/pages/onboarding-flow/secure-your-wallet/index.scss
View File

@ -39,6 +39,10 @@
margin: 8px 12px 0 0;
}
&__label {
display: flex;
}
&__footer {
button {
width: 140px;

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

@ -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>