fix(slack): make the slack form accessible

A visible label has been added to the input to indicate what data the input actually takes. This is useful for both the eye, and particularly the screenreader.

The ‘autofocus’ attribute has been removed from the email input, jumping to a box with no context (i.e the screenreader didn’t get a chance to read the contextual information about IRC/Slack) is not useful.

A better message for when the individual is already a member of the team has been added.

Styling has been added to the messaging on success/fail, with green/red success/fail states.

The button `input` has been changed to `button` as HTML5 is awesome.

The JavaScript was also tidied a little to make it more readable.

Author: Charlotte Spencer

chat/index.html

@@ -43,9 +43,10 @@ <h2>Send and receive the same messages on IRC and Slack.</h2>
 
         <p>
           <form id="slack-integration">
-            <input id="mail-for-slack" type="email" placeholder="[email protected]" autofocus="true" required />
-            <input type="submit" id="submit-slack" value="Get your Invite" />
-            <div class="message"></div>
+            <label for="mail-for-slack">Enter your email address</label>
+            <input id="mail-for-slack" type="email" placeholder="[email protected]" required>
+            <button type="submit" id="submit-slack">Get your invite</button>
+            <div id="slack-form-message" class="message"></div>
           </form>
         </p>
 
@@ -64,11 +65,16 @@ <h2>These are the guidelines:</h2>
 <script>
     $(document).ready(function () {
         $('#slack-integration').submit(function (e) {
-            e.preventDefault()
-            var btn = $('#submit-slack', this)
-            var email = $('#mail-for-slack', this)
-            if (!email.val()) return
-            btn.prop('disabled', true)
+            e.preventDefault();
+            var btn = $('#submit-slack', this),
+                email = $('#mail-for-slack', this),
+                formMessage = $('#slack-form-message', this);
+
+            if (!email.val()) {
+                return;
+            }
+
+            btn.prop('disabled', true);
             $.ajax({
                 type: 'POST',
                 url: 'https://hoodie-slack.herokuapp.com/invite',
@@ -78,17 +84,30 @@ <h2>These are the guidelines:</h2>
                 data: JSON.stringify({ email: email.val() })
             })
             .fail(function (res) {
-                $('#slack-integration .message').text((res.responseJSON && res.responseJSON.msg) || 'Sorry, there was a server error.');
+                if (!res.responseJSON) {
+                  return formMessage.removeClass('message').addClass('message-fail')
+                      .text('Sorry, there was a server error.');
+                }
+                if (res.responseJSON.msg === 'already_in_team') {
+                    return formMessage.removeClass('message').addClass('message-fail')
+                        .text('It looks like you\'ve already joined!');
+                }
+
+                formMessage.removeClass('message').addClass('message-fail')
+                    .text(res.responseJSON.msg);
             })
             .done(function (data) {
-                email.val('')
-                $('#slack-integration .message').text('Woot! Check your email!');
+                email.val('');
+                formMessage.removeClass('message')
+                    .addClass('message-done')
+                    .text('Woot! Check your email!');
             })
             .always(function () {
-                btn.prop('disabled', false)
-            })
-        })
+                btn.prop('disabled', false);
+            });
+        });
     });
+
     (function(window,undefined){
       var d = new Date();
 

dist1/sass/_modules.scss

@@ -185,7 +185,11 @@ aside img { border: 0; }
   text-align: center;
   padding-bottom: rem-calc(25);
 
-  input {
+  label {
+      display: block;
+  }
+
+  input, button {
     border: 1px solid;
     font-size: 1em;
     height: 2.2rem;
@@ -214,11 +218,30 @@ aside img { border: 0; }
       outline: none;
       background-color: #C1A7BC;
       border-color: #C1A7BC;
+      color: #404040;
     }
   }
 
   .message {
+    visibility: hidden;
+  }
+  
+  .message-done, .message-fail {
+    visibility: visible;
+    width: 60%;
+    margin: rem-calc(7) auto 0;
     font-weight: 400;
     line-height: 2;
   }
+  
+  .message-fail {
+    border: 1px solid #E8260C;
+    background-color: #ffefef;
+  }
+  
+  .message-done {
+      border: 1px solid $green;
+      background-color: 1px solid $green-l;
+  }
+
 }