From efaeb3b1101d9b5ce93f2647bdb157b474c6b3fb Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Thu, 6 Feb 2020 10:26:53 -0600
Subject: [PATCH] Add hidden username field for accessibility

---
 src/browser/pages/login.css | 6 +++++-
 src/browser/pages/login.tsx | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/browser/pages/login.css b/src/browser/pages/login.css
index 1ba46cf7..3a650e2f 100644
--- a/src/browser/pages/login.css
+++ b/src/browser/pages/login.css
@@ -17,13 +17,17 @@
   margin-top: 1em;
 }
 
-.login-form > .field > .input {
+.login-form > .field > .password {
   border: 1px solid #b6b6b6;
   box-sizing: border-box;
   padding: 1em;
   flex: 1;
 }
 
+.login-form > .field > .user {
+  display: none;
+}
+
 .login-form > .field > .submit {
   background-color: transparent;
   border: 1px solid #b6b6b6;
diff --git a/src/browser/pages/login.tsx b/src/browser/pages/login.tsx
index 3e44face..aaf9c490 100644
--- a/src/browser/pages/login.tsx
+++ b/src/browser/pages/login.tsx
@@ -40,9 +40,10 @@ export const Login: React.FunctionComponent<LoginProps> = (props) => {
         <div className="sub">Please log in below</div>
       </div>
       <div className="field">
+        <input className="user" type="text" autoComplete="username" />
         <input
           autoFocus
-          className="input"
+          className="password"
           type="password"
           placeholder="password"
           autoComplete="current-password"