From c6259f6eb57c2dbb2b1b9aa7077c26b6cf969fb1 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Sat, 23 Nov 2019 01:26:39 -0330
Subject: [PATCH] Fix accessibility of first-time-flow terms checkboxes (#7501)

---
 .../import-with-seed-phrase.component.js      | 18 ++++++++++---
 .../new-account/new-account.component.js      | 25 +++++++++++--------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index e1c0b21ed..1fae5351c 100644
--- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.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"
diff --git a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
index de073af2f..25267403b 100644
--- a/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ b/ui/app/pages/first-time-flow/create-password/new-account/new-account.component.js
@@ -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"