m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-29 23:58:06 +01:00
Code

Fix accessibility of first-time-flow terms checkboxes (#7501)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-23 01:26:39 -03:30 committed by Mark Stacey
parent e673bfb25c
commit c6259f6eb5
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
View File

@ -175,6 +175,12 @@ export default class ImportWithSeedPhrase extends PureComponent {
return !passwordError && !confirmPasswordError && !seedPhraseError
}
onTermsKeyPress = ({key}) => {
if (key === ' ' || key === 'Enter') {
this.toggleTermsCheck()
}
}
toggleTermsCheck = () => {
this.context.metricsEvent({
eventOpts: {
@ -183,7 +189,6 @@ export default class ImportWithSeedPhrase extends PureComponent {
name: 'Check ToS',
},
})
this.setState((prevState) => ({
termsChecked: !prevState.termsChecked,
}))
@ -267,10 +272,17 @@ export default class ImportWithSeedPhrase extends PureComponent {
largeLabel
/>
<div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
<div className="first-time-flow__checkbox">
<div
className="first-time-flow__checkbox"
tabIndex="0"
role="checkbox"
onKeyPress={this.onTermsKeyPress}
aria-checked={termsChecked}
aria-labelledby="ftf-chk1-label"
>
{termsChecked ? <i className="fa fa-check fa-2x" /> : null}
</div>
<span className="first-time-flow__checkbox-label">
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
I have read and agree to the <a
href="https://metamask.io/terms.html"
target="_blank"

25
ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import Button from '../../../../components/ui/button'
import {
INITIALIZE_SEED_PHRASE_ROUTE,
INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
INITIALIZE_SELECT_ACTION_ROUTE,
} from '../../../../helpers/constants/routes'
import TextField from '../../../../components/ui/text-field'
@ -115,13 +114,6 @@ export default class NewAccount extends PureComponent {
}
}
handleImportWithSeedPhrase = event => {
const { history } = this.props
event.preventDefault()
history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE)
}
toggleTermsCheck = () => {
this.context.metricsEvent({
eventOpts: {
@ -136,6 +128,12 @@ export default class NewAccount extends PureComponent {
}))
}
onTermsKeyPress = ({key}) => {
if (key === ' ' || key === 'Enter') {
this.toggleTermsCheck()
}
}
render () {
const { t } = this.context
const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state
@ -195,10 +193,17 @@ export default class NewAccount extends PureComponent {
largeLabel
/>
<div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}>
<div className="first-time-flow__checkbox">
<div
className="first-time-flow__checkbox"
tabIndex="0"
role="checkbox"
onKeyPress={this.onTermsKeyPress}
aria-checked={termsChecked}
aria-labelledby="ftf-chk1-label"
>
{termsChecked ? <i className="fa fa-check fa-2x" /> : null}
</div>
<span className="first-time-flow__checkbox-label">
<span id="ftf-chk1-label" className="first-time-flow__checkbox-label">
I have read and agree to the <a
href="https://metamask.io/terms.html"
target="_blank"