add aria-labels

client/modules/User/components/LoginForm.js

@@ -5,26 +5,24 @@ function LoginForm(props) {
   return (
     <form className="login-form" onSubmit={handleSubmit(props.loginUser.bind(this))}>
       <p className="login-form__field">
-        <label className="login-form__email-label" htmlFor="email">Email:</label>
         <input
           className="login-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="login-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
-      <input type="submit" value="Login" />
+      <input type="submit" value="Login" aria-label="login" />
     </form>
   );
 }

client/modules/User/components/SignupForm.js

@@ -5,51 +5,42 @@ function SignupForm(props) {
   return (
     <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
       <p className="signup-form__field">
-        <label className="signup-form__username-label" htmlFor="username">Username:</label>
         <input
           className="signup-form__username-input"
-          id="username"
+          aria-label="username"
           type="text"
           placeholder="Username"
           {...username}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__email-label" htmlFor="email">Email:</label>
         <input
           className="signup-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
       <p className="signup-form__field">
-        <label
-          className="signup-form__confirm-password-label"
-          htmlFor="confirm-password"
-        >
-          Confirm Password:
-        </label>
         <input
           className="signup-form__confirm-password-input"
-          id="confirm-password"
           type="password"
           placeholder="Confirm Password"
+          aria-label="confirm password"
           {...confirmPassword}
         />
       </p>
-      <input type="submit" value="Sign Up" />
+      <input type="submit" value="Sign Up" aria-label="sign up" />
     </form>
   );
 }

client/styles/components/_console.scss

@@ -54,14 +54,16 @@
 }
 
 .preview-console__collapse {
+	@extend %icon;
 	.preview-console--collapsed & {
 		display: none;
 	}
 }
 
 .preview-console__expand {
+	@extend %icon;
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;
 	}
-}
+}

client/styles/components/_login.scss

@@ -6,12 +6,7 @@
 	justify-content: center;
 }
 
-.login-form__email-label, 
+.login-form__email-input,
-.login-form__password-label {
-	display: none;
-}
-
-.login-form__email-input, 
 .login-form__password-input {
 	width: #{300 / $base-font-size}rem;
 }

client/styles/components/_sidebar.scss

@@ -16,6 +16,7 @@
 }
 
 .sidebar__add {
+  @extend %icon;
   cursor: pointer;
   height: #{26 / $base-font-size}rem;
   margin-right: #{16 / $base-font-size}rem;

client/styles/components/_signup.scss

@@ -6,13 +6,6 @@
 	justify-content: center;
 }
 
-.signup-form__username-label,
-.signup-form__email-label,
-.signup-form__password-label,
-.signup-form__confirm-password-label {
-	display: none;
-}
-
 .signup-form__username-input,
 .signup-form__email-input,
 .signup-form__password-input,