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} justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
marginBottom={4} marginBottom={4}
> >
<CheckBox <label className="create-password__form__terms-label">
dataTestId="create-password-terms" <CheckBox
onClick={() => setTermsChecked(!termsChecked)} dataTestId="create-password-terms"
checked={termsChecked} onClick={() => setTermsChecked(!termsChecked)}
/> checked={termsChecked}
<Typography variant={TYPOGRAPHY.H5} boxProps={{ marginLeft: 3 }}> />
{t('passwordTermsWarning', [ <Typography variant={TYPOGRAPHY.H5} boxProps={{ marginLeft: 3 }}>
<a {t('passwordTermsWarning', [
onClick={(e) => e.stopPropagation()} <a
key="create-password__link-text" onClick={(e) => e.stopPropagation()}
href={ZENDESK_URLS.PASSWORD_ARTICLE} key="create-password__link-text"
target="_blank" href={ZENDESK_URLS.PASSWORD_ARTICLE}
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
<span className="create-password__link-text"> >
{t('learnMoreUpperCase')} <span className="create-password__link-text">
</span> {t('learnMoreUpperCase')}
</a>, </span>
])} </a>,
</Typography> ])}
</Typography>
</label>
</Box> </Box>
<Button <Button
data-testid={ data-testid={

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

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

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

@ -39,6 +39,10 @@
margin: 8px 12px 0 0; margin: 8px 12px 0 0;
} }
&__label {
display: flex;
}
&__footer { &__footer {
button { button {
width: 140px; 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')} {t('skipAccountSecurity')}
</Typography> </Typography>
<Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}> <Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}>
<Checkbox <label className="skip-srp-backup-popover__label">
className="skip-srp-backup-popover__checkbox" <Checkbox
onClick={() => { className="skip-srp-backup-popover__checkbox"
setChecked(!checked); onClick={() => setChecked(!checked)}
}} checked={checked}
checked={checked} dataTestId="skip-srp-backup-popover-checkbox"
dataTestId="skip-srp-backup-popover-checkbox" />
/> <Typography
<Typography className="skip-srp-backup-popover__details"
className="skip-srp-backup-popover__details" variant={TYPOGRAPHY.h7}
variant={TYPOGRAPHY.h7} >
> {t('skipAccountSecurityDetails')}
{t('skipAccountSecurityDetails')} </Typography>
</Typography> </label>
</Box> </Box>
</Box> </Box>
</Popover> </Popover>