Merge pull request #53 from J-Kallunki/fix-accessibility-issues

Fix accessibility issues

README.md

@@ -1,7 +1,7 @@
 # Koodiklinikka
 ![Travis](https://travis-ci.org/koodiklinikka/koodiklinikka.fi.svg?branch=master)
 
-<img align="right" src="https://raw.githubusercontent.com/koodiklinikka/koodiklinikka.fi/master/src/assets/images/logo.png">
+<img align="right" src="https://raw.githubusercontent.com/koodiklinikka/koodiklinikka.fi/master/static/images/logo.png" alt="Koodiklinikka-logo">
 
 **Koodiklinikka.fi lähdekoodi**. [Issueita](https://github.com/koodiklinikka/koodiklinikka.fi/issues) ja [Pull Requestejä](https://github.com/koodiklinikka/koodiklinikka.fi/pulls) otetaan lämpimästi vastaan. Yritämme pitää kynnyksen kontribuoida projektiin alhaisena, jotta mahdollisimman moni pääsisi jättämään siihen jälkensä. Kaikki koodi katselmoidaan läpi ja mergetään projektiin kun näyttää hyvälle. Muutamasta mergetystä Pull Requestista oikeudet ylläpitää projektia.
 

components/Feed.jsx

@@ -32,11 +32,11 @@ export default class Feed extends React.Component {
 
   render() {
     const messages = this.state.messages.map((message, i) => {
-      let image = <img src={message.image} />;
+      let image = <img src={message.image} alt="" />;
 
       if (message.imageLink) {
         image = (
-          <a target="_blank" href={message.imageLink} rel="noopener noreferrer">
+          <a target="_blank" href={message.imageLink} rel="noopener noreferrer" tabIndex="-1">
             {image}
           </a>
         );
@@ -44,7 +44,7 @@ export default class Feed extends React.Component {
 
       return (
         <div className="message" key={i}>
-          <div className="message__image">{image}</div>
+          <div className="message__image" aria-hidden="true">{image}</div>
           <div className="message__content">
             <div className="message__user">
               <a href={message.userLink}>{message.user}</a>

components/Footer.jsx

@@ -24,20 +24,20 @@ export function Footer() {
       </div>
       <div className="contacts">
         <div>
-          <a href="https://koodiklinikka.slack.com">
-            <i className="fa fa-slack" />
+          <a href="https://koodiklinikka.slack.com" aria-label="Koodiklinikka Slackissä">
+            <i className="fa fa-slack" aria-hidden="true" />
           </a>
-          <a href="https://github.com/koodiklinikka/koodiklinikka.fi">
-            <i className="fa fa-github" />
+          <a href="https://github.com/koodiklinikka/koodiklinikka.fi"  aria-label="Koodiklinikka Githubissa">
+            <i className="fa fa-github" aria-hidden="true" />
           </a>
-          <a href="https://twitter.com/koodiklinikka">
-            <i className="fa fa-twitter" />
+          <a href="https://twitter.com/koodiklinikka" aria-label="Koodiklinikka Twitterissä">
+            <i className="fa fa-twitter" aria-hidden="true" />
           </a>
-          <a href="https://www.linkedin.com/groups/12025476">
-            <i className="fa fa-linkedin" />
+          <a href="https://www.linkedin.com/groups/12025476" aria-label="Koodiklinikka Linkedinissä">
+            <i className="fa fa-linkedin" aria-hidden="true" />
           </a>
-          <a href="https://www.facebook.com/koodiklinikka">
-            <i className="fa fa-facebook" />
+          <a href="https://www.facebook.com/koodiklinikka" aria-label="Koodiklinikka Facebookissa">
+            <i className="fa fa-facebook" aria-hidden="true" />
           </a>
           <div id="email">
             <EmailComponent />

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>

components/Members.jsx

@@ -22,15 +22,16 @@ export default class Members extends React.Component {
   render() {
     const members = this.state.members.map(member => {
       const src = `${member.avatar_url}&s=120`;
-      return <img className="member" key={member.avatar_url} src={src} />;
+      return <img className="member" key={member.avatar_url} src={src} alt="" />;
     });
 
     return (
-      <div className="members">
+      <div className="members" aria-hidden="true">
         <a
           href="https://github.com/koodiklinikka"
           target="_blank"
           rel="noopener noreferrer"
+          tabIndex="-1"
         >
           {members}
         </a>

pages/_document.jsx

@@ -11,7 +11,7 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html>
+      <Html lang="fi">
         <Head>
           <meta
             name="description"

pages/index.jsx

@@ -99,7 +99,7 @@ const IndexContent = () => (
             </div>
             <div className="column column1-2">
               <a href="/static/images/slack.png" target="_blank">
-                <img src="/static/images/slack.png" alt="Slack" />
+                <img src="/static/images/slack.png" alt="Slack app at Koodiklinikka" />
               </a>
             </div>
           </div>
@@ -107,7 +107,7 @@ const IndexContent = () => (
         <div className="row">
           <div className="bread">
             <div className="column column2-5">
-              <img src="/static/images/octocat.png" alt="Octocat" />
+              <img src="/static/images/octocat.png" alt="Octocat, the mascot of GitHub" />
             </div>
             <div className="column column3-5">
               <h3>Avoin lähdekoodi</h3>

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