Stop Chrome mixing up phone no. and email address

We keep seeing Chrome:

- autofilling the sign in form with a phone number in the email box
- autofilling the register form with an email address in the phone
  number box

This is because Chrome tries to autofill what it considers to be a
_login_. It detects a login as being:

- a password field
- preceded by a text input field

On the sign in page the password field is preceded by a field which is
supposed to receive an email address. On the register page the password
field is preceded by a field that’s supposed to receive a phone number.
I suspect that this is why it’s missing the two up.

The solution to this seems to be to defeat Chrome trying to be clever,
and make it autocomplete based on the `name` of the fields instead (we
name them sensibly, e.g. `email_address`, `phone_number`). The way to
defeat it seems to be sticking a dummy `input` right before the password
field on the register page. This dummy input is hidden from the page and
from screenreaders, so a user should never know it’s there. but Chrome
will autofill it anyway, with whatever wrong value it wants to.

app/templates/views/register.html

@@ -11,10 +11,11 @@ Create an account
 <div class="grid-row">
   <div class="column-two-thirds">
     <h1 class="heading-large">Create an account</h1>
-    <form method="post" autocomplete="off" novalidate>
+    <form method="post" novalidate>
       {{ textbox(form.name, width='3-4') }}
       {{ textbox(form.email_address, hint="Must be from a central government organisation", width='3-4', safe_error_message=True) }}
       {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      <input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
       {{ page_footer("Continue") }}
     </form>