Fixes double account creation when using keyboard controls

[ryanml]

Fixes: #15061

Explanation

Defined in issue

Manual Testing Steps

Follow the steps mentioned in the issue, ensure that only a single account is created when using keyboard shortcuts

[metamaskbot]

Builds ready [61bed96]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• code coverage: Report
• storybook: Storybook
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1682 ± 49 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	85	1644	182	336	161
		domContentLoaded	1554	1942	1668	88	42
		load	1555	1942	1682	103	49
		domInteractive	1554	1942	1668	88	42

highlights:

storybook

• ui/pages/create-account/new-account.stories.js

[digiwand]

👍🏼

[darkwing]

I might be crazy but pressing [ENTER] doesn't submit the form; we may need to event type check here

[digiwand]

This fix is working on my end on Chrome. I was able to see the double accounts being created before the fix, and then a single account being created with this fix.

@darkwing what browser were you using? To confirm, was the target element the "Confirm" button after pressing tab to get to the button? I can see this could be easily mistaken since the focus state could be mistaken for the default state

[darkwing]

Just tested on Chrome + OSX. If I click the "Create" button, the account gets created. If click "Create account" and immediately press ENTER, nothing happens.

[metamaskbot]

Builds ready [52aa16a]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1653 ± 28 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	95	147	111	13	6
		domContentLoaded	1561	1766	1651	58	28
		load	1561	1766	1653	58	28
		domInteractive	1561	1766	1651	58	28

highlights:

storybook

• ui/pages/create-account/new-account.stories.js

[jpuri]

I might be crazy but pressing [ENTER] doesn't submit the form; we may need to event type check here

This does not looks related to code changes in PR. Click event is fired only in case of mouse click.

[digiwand]

Echoing what @jpuri was mentioning, this PR tests navigating user flow with a keyboard and not a mouse.

@darkwing

Just tested on Chrome + OSX. If I click the "Create" button, the account gets created. If click "Create account" and immediately press ENTER, nothing happens.

This is existing behavior though would be nice to add form submit on error. After clicking "Create account", the input is in focus. This PR is testing when we hit enter when the "Create" button is in focus, and not the input in focus. You will need to tab twice to focus on the create button from the input, and then click enter to trigger the action

[ryanml]

@darkwing, would you be fine with a separate PR for adding submit on 'Enter' behavior?

[metamaskbot]

Builds ready [6b31b2d]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2697 ± 133 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	102	189	134	22	11
		domContentLoaded	2125	3202	2659	259	124
		load	2125	3202	2697	277	133
		domInteractive	2125	3202	2659	259	124

highlights:

storybook

• ui/pages/create-account/new-account.stories.js