From 33b15cdec6ce4eb4ad70a5e0701a2e49466cf825 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 13 Mar 2017 11:48:11 +0000
Subject: [PATCH] Stop Chrome mixing up phone no. and email address
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/templates/views/register.html b/app/templates/views/register.html
index cf1a20a34..682e517f4 100644
--- a/app/templates/views/register.html
+++ b/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>