From 51fc06cf068b99769b81bb925f9a56220a646f4a Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 3 Nov 2020 12:40:12 -0600
Subject: [PATCH] Autofocus input, improve accessibility of restore page
 (#9748)

---
 ui/app/pages/keychains/restore-vault.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/app/pages/keychains/restore-vault.js b/ui/app/pages/keychains/restore-vault.js
index 0043f398a..b8dab7ba5 100644
--- a/ui/app/pages/keychains/restore-vault.js
+++ b/ui/app/pages/keychains/restore-vault.js
@@ -163,6 +163,7 @@ class RestoreVaultPage extends Component {
                   className="import-account__secret-phrase"
                   onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
                   value={seedPhrase}
+                  autoFocus
                   placeholder={this.context.t('separateEachWord')}
                 />
               ) : (
@@ -171,6 +172,7 @@ class RestoreVaultPage extends Component {
                   type="password"
                   onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
                   value={seedPhrase}
+                  autoFocus
                   placeholder={t('seedPhrasePlaceholderPaste')}
                 />
               )}
@@ -182,6 +184,7 @@ class RestoreVaultPage extends Component {
                 <div
                   className="import-account__checkbox"
                   tabIndex="0"
+                  id="seed-checkbox"
                   role="checkbox"
                   onKeyPress={this.toggleShowSeedPhrase}
                   aria-checked={showSeedPhrase}
@@ -189,12 +192,13 @@ class RestoreVaultPage extends Component {
                 >
                   {showSeedPhrase ? <i className="fa fa-check fa-2x" /> : null}
                 </div>
-                <span
+                <label
+                  htmlFor="seed-checkbox"
                   id="ftf-chk1-label"
                   className="import-account__checkbox-label"
                 >
                   {t('showSeedPhrase')}
-                </span>
+                </label>
               </div>
             </div>
             <TextField