From 4b213ad551efcafd0d47f2b92d9a8620623ad5f7 Mon Sep 17 00:00:00 2001
From: Joonas Kallunki <jkallunki@gmail.com>
Date: Wed, 30 Oct 2019 07:34:32 +0200
Subject: [PATCH] Fix accessibility of email-input

Placeholder is not accessible https://www.smashingmagazine.com/2018/06/placeholder-attribute/

Using label and styling using empty placeholder with :placeholder-shown
---
 components/InviteForm.jsx | 41 ++++++++++++++++++++++++---------------
 styles/style.styl         | 31 ++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/components/InviteForm.jsx b/components/InviteForm.jsx
index 95617d1..f26dbdd 100644
--- a/components/InviteForm.jsx
+++ b/components/InviteForm.jsx
@@ -61,6 +61,7 @@ export default class InviteForm extends React.Component {
 
     const inputClasses = classSet({
       input: true,
+      "invite-form__input": true,
       "has-success": this.state.submitted,
       "has-error": this.state.error,
     });
@@ -91,22 +92,30 @@ export default class InviteForm extends React.Component {
 
     return (
       <form className={formClasses} onSubmit={this.onSubmit}>
-        <input
-          className={inputClasses}
-          type="text"
-          name="email"
-          placeholder="Email"
-          value={this.state.email}
-          onChange={this.onChange}
-        />
-        <button
-          className="btn btn__submit"
-          type="submit"
-          title="Lähetä"
-          disabled={this.state.error || this.state.submitted}
-        >
-          Lähetä
-        </button>
+        <div className="form__field">
+          <input
+            className={inputClasses}
+            type="text"
+            name="email"
+            id="email-field"
+            // Placeholder is not accessible way to provide information
+            // Used here for :placeholder-shown -styles
+            placeholder=" "
+            value={this.state.email}
+            onChange={this.onChange}
+          />
+          <label className="label" htmlFor="email-field">
+            Email
+          </label>
+          <button
+            className="btn btn__submit"
+            type="submit"
+            title="Lähetä"
+            disabled={this.state.error || this.state.submitted}
+          >
+            Lähetä
+          </button>
+        </div>
         <div className="invite-form__loader">
           <Loader />
         </div>
diff --git a/styles/style.styl b/styles/style.styl
index 97724e7..64ac900 100644
--- a/styles/style.styl
+++ b/styles/style.styl
@@ -125,12 +125,41 @@ section:first-child
       display block
 .invite-form
   position relative
+  .form__field
+    display flex
+    flex-flow column-reverse
+    margin-bottom 1em
+  .invite-form__input
+    padding-right 5em
+  .input,
+  .label
+    transition all 0.2s
+  .input:placeholder-shown + .label
+    max-width 66.66%
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+    transform-origin left bottom
+    transform translate(18px, 36px) scale(1.2)
+    cursor text
+    font-weight 400
+    opacity 0.6
+  .input:not(:placeholder-shown) + .label,
+  .input:focus + .label
+    transform translate(0, 0) scale(1)
+    cursor pointer
+    font-weight 600
+    opacity 1
+  .input::-webkit-input-placeholder
+    opacity 0
+  .input:focus::-webkit-input-placeholder
+    opacity 1
   .btn
     height 32px
     padding 0 10px
     position absolute
     right 8px
-    top 7px
+    bottom 7px
     color #fff
     &:active
       border-bottom 0