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

feature/default_network_editable
Whymarrh Whitby 5 years ago committed by GitHub
parent a3d0b71320
commit 089c6915df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
  2. 25
      ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js

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

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

Loading…
Cancel
Save