1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00

Autofocus input, improve accessibility of restore page (#9748)

This commit is contained in:
David Walsh 2020-11-03 12:40:12 -06:00 committed by GitHub
parent 3c171de44c
commit 51fc06cf06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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