Merge pull request #58 from aitchiss/accessible-color-themes

Accessibility fixes for login, register and recover pages

ui/assets/css/base.scss

@@ -1,12 +1,15 @@
 $accent: #fae596;
-$primary: #3fb0ac;
+$primary: #379A96;
+
+$font-size-standard: 1rem;
+$font-size-md: 1.25rem;
 
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 1html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
   Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
+  font-size: $font-size-standard;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -36,6 +39,8 @@ $primary: #3fb0ac;
   color: #fff;
   background-color: $primary;
   border-color: $primary;
+  font-size: $font-size-md;
+  font-weight: bold;
 
   &:hover {
     color: #fff;

ui/layouts/screen.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="screen bg-primary dark">
-    <div class="content">
+    <main class="content">
       <nuxt />
-    </div>
+    </main>
 
-    <div class="footer">
+    <footer class="footer">
       <nuxt-link to="/login">Login</nuxt-link>
       <nuxt-link to="/register">Register</nuxt-link>
       <nuxt-link to="/admin">Manage</nuxt-link>
       <a href="https://ohmyform.com">OhMyForm</a>
-    </div>
+    </footer>
   </div>
 </template>
 

ui/nuxt.config.js

@@ -8,6 +8,9 @@ export default {
    */
   head: {
     title: pkg.name,
+    htmlAttrs: {
+      lang: 'en-US'
+    },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },

ui/pages/login.vue

@@ -1,21 +1,25 @@
 <template>
   <div>
-    <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    <h1 aria-label="Login">
+      <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
           id="password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim

ui/pages/recover.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    <h1 aria-label="Recover Password">
+      <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>

ui/pages/register.vue

@@ -1,30 +1,35 @@
 <template>
   <div>
-    <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    <h1 aria-label="Register">
+      <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
+    </h1>
 
     <b-form class="box" @submit="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="email">
+      <b-form-group>
         <b-form-input
           id="email"
           v-model="email"
+          aria-label="Email"
           trim
           placeholder="Email"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
           id="password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim