From 0f9588a8157a28609caf9b1715143093791f180e Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Mon, 3 Jun 2019 19:17:38 +1000
Subject: [PATCH] Added fields to labels to assist screen readers

---
 src/components/panels/login.jsx            |  8 ++++----
 src/components/panels/password_change.jsx  |  8 ++++----
 src/components/panels/password_recover.jsx |  4 ++--
 src/components/panels/password_reset.jsx   |  8 ++++----
 src/components/panels/signup.jsx           | 16 ++++++++--------
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/panels/login.jsx b/src/components/panels/login.jsx
index 06b9dbf..c5efb72 100644
--- a/src/components/panels/login.jsx
+++ b/src/components/panels/login.jsx
@@ -30,13 +30,13 @@ class Login extends React.Component {
 
 				<form action='/loginrequest' method='post' onSubmit={ this.submit.bind(this) } >
 					<div>
-						<label>Email:</label>
-						<input type='text' name='email' value={this.state.email} onChange={ this.updateEmail.bind(this) } />
+						<label for='email'>Email:</label>
+						<input id='email' type='text' name='email' value={this.state.email} onChange={ this.updateEmail.bind(this) } />
 					</div>
 
 					<div>
-						<label>Password:</label>
-						<input type='password' name='password' value={this.state.password} onChange={ this.updatePassword.bind(this) } />
+						<label for='password'>Password:</label>
+						<input id='password' type='password' name='password' value={this.state.password} onChange={ this.updatePassword.bind(this) } />
 					</div>
 
 					<button type='submit' disabled={!this.state.email}>Login</button>
diff --git a/src/components/panels/password_change.jsx b/src/components/panels/password_change.jsx
index 47bd06f..349d73a 100644
--- a/src/components/panels/password_change.jsx
+++ b/src/components/panels/password_change.jsx
@@ -30,13 +30,13 @@ class PasswordChange extends React.Component {
 
 				<form action='/passwordchangerequest' method='post' onSubmit={this.submit.bind(this)}>
 					<div>
-						<label>Password:</label>
-						<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
+						<label for='password'>Password:</label>
+						<input id='password' type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
 					</div>
 
 					<div>
-						<label>Retype Password:</label>
-						<input type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
+						<label for='retype'>Retype Password:</label>
+						<input id='retype' type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
 					</div>
 
 					<button type='submit'>Change Password</button>
diff --git a/src/components/panels/password_recover.jsx b/src/components/panels/password_recover.jsx
index 5c2bead..dab5061 100644
--- a/src/components/panels/password_recover.jsx
+++ b/src/components/panels/password_recover.jsx
@@ -27,8 +27,8 @@ class PasswordRecover extends React.Component {
 
 				<form action='/passwordrecoverrequest' method='post' onSubmit={this.submit.bind(this)}>
 					<div>
-						<label>Email:</label>
-						<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
+						<label for='email'>Email:</label>
+						<input id='email' type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
 					</div>
 
 					<button type='submit' disabled={!this.state.email}>Send Email</button>
diff --git a/src/components/panels/password_reset.jsx b/src/components/panels/password_reset.jsx
index 2dfec80..c0c7ac4 100644
--- a/src/components/panels/password_reset.jsx
+++ b/src/components/panels/password_reset.jsx
@@ -29,13 +29,13 @@ class PasswordReset extends React.Component {
 
 				<form action='/passwordresetrequest' method='post' onSubmit={this.submit.bind(this)}>
 					<div>
-						<label>Password:</label>
-						<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
+						<label for='password'>Password:</label>
+						<input id='password' type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
 					</div>
 
 					<div>
-						<label>Retype Password:</label>
-						<input type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
+						<label for='retype'>Retype Password:</label>
+						<input id='retype' type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
 					</div>
 
 					<button type='submit'>Change Password</button>
diff --git a/src/components/panels/signup.jsx b/src/components/panels/signup.jsx
index edaafef..a6992df 100644
--- a/src/components/panels/signup.jsx
+++ b/src/components/panels/signup.jsx
@@ -30,23 +30,23 @@ class Signup extends React.Component {
 
 				<form action='/signuprequest' method='post' onSubmit={this.submit.bind(this)}>
 					<div>
-						<label>Email:</label>
-						<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
+						<label for='email'>Email:</label>
+						<input id='email' type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
 					</div>
 
 					<div>
-						<label>User Name:</label>
-						<input type='text' name='username' value={this.state.username} onChange={this.updateUsername.bind(this)} />
+						<label for='username'>User Name:</label>
+						<input id='username' type='text' name='username' value={this.state.username} onChange={this.updateUsername.bind(this)} />
 					</div>
 
 					<div>
-						<label>Password:</label>
-						<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
+						<label for='password'>Password:</label>
+						<input id='password' type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
 					</div>
 
 					<div>
-						<label>Retype Password:</label>
-						<input type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
+						<label for='retype'>Retype Password:</label>
+						<input id='retype' type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
 					</div>
 
 					<button type='submit' disabled={!this.state.email}>Sign Up</button>