[Gutenboarding]: add autofocus to account creation email input field

[ramonjd]

Changes proposed in this Pull Request

This patch prevents the <Modal /> from focussing on itself, and instead forces focus on the email input field.

❓What do folks think about the trade off in relation to accessibility? Would a better description in the label mitigate this?

Testing instructions

Trigger the signup modal in Gutenboarding.

Stare at the cursor as it blinks at you incessantly from within the email input field. Subtly mocking you. Daring you to blur it into oblivion.

[matticbot]

Test live: https://calypso.live/?branch=try/gutenboarding-autofocus-signup

[p-jackson]

What do folks think about the trade off in relation to accessibility?

This is fine, in fact focusing on the text input is the right thing to do here according to WCAG.

Unless a condition where doing otherwise is advisable, focus is initially set on the first focusable element.
https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-7

[p-jackson]

LGTM 🚢

The docs for the focusOnMount prop make it sound like it's supposed to do the right thing automatically.
https://developer.wordpress.org/block-editor/components/modal/#focusonmount

Problem is that the standard <Modal /> guff adds a <div role="dialog" tabIndex="0" />, which is treated as a focusable element. In which case the focusOnMount docs mean nothing; it's always just going to focus itself.

Anyway, I think the way you've done it is good. As the WCAG guidance points out, the correct element to focus is going to depend on the context, so it's going to be hard to get the <Modal> component to do the right thing by default all the time.