From 06e5d4c9e7e681aaabaf7e80c012f19309c42aca Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:09:33 +0100
Subject: [PATCH 1/6] Adjust primary color and primary btn style for
 accessibility

---
 ui/assets/css/base.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/assets/css/base.scss b/ui/assets/css/base.scss
index 9a315ac6..bd44c99d 100644
--- a/ui/assets/css/base.scss
+++ b/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;

From 0750ffae68eeff05f898bfa4211e2559279cf4eb Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:21:42 +0100
Subject: [PATCH 2/6] wrap content in main tag, add language to html root

---
 ui/layouts/screen.vue | 4 ++--
 ui/nuxt.config.js     | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/layouts/screen.vue b/ui/layouts/screen.vue
index 1d942c63..d5aa7e37 100644
--- a/ui/layouts/screen.vue
+++ b/ui/layouts/screen.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="screen bg-primary dark">
-    <div class="content">
+    <main class="content">
       <nuxt />
-    </div>
+    </main>
 
     <div class="footer">
       <nuxt-link to="/login">Login</nuxt-link>
diff --git a/ui/nuxt.config.js b/ui/nuxt.config.js
index 10460e84..ebffdb0c 100644
--- a/ui/nuxt.config.js
+++ b/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' },

From 7c3d3a4d040587ab5e7d765d64d2fd386c7555b0 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:26:10 +0100
Subject: [PATCH 3/6] Remove incorrect label-for attributes on login and
 register form fields, replace with aria-labels on inputs

---
 ui/pages/login.vue    | 6 ++++--
 ui/pages/recover.vue  | 3 ++-
 ui/pages/register.vue | 9 ++++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/pages/login.vue b/ui/pages/login.vue
index 8308e6e7..41e38cda 100644
--- a/ui/pages/login.vue
+++ b/ui/pages/login.vue
@@ -3,8 +3,9 @@
     <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
+          aria-label="Username"
           id="username"
           v-model="username"
           trim
@@ -12,8 +13,9 @@
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
+          aria-label="Password"
           id="password"
           v-model="password"
           type="password"
diff --git a/ui/pages/recover.vue b/ui/pages/recover.vue
index b8146e7f..fe960d8a 100644
--- a/ui/pages/recover.vue
+++ b/ui/pages/recover.vue
@@ -3,9 +3,10 @@
     <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
 
     <b-form class="box" @submit.prevent="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
+          aria-label="Username"
           v-model="username"
           trim
           placeholder="Username or Email"
diff --git a/ui/pages/register.vue b/ui/pages/register.vue
index 2b38c451..c07ecb63 100644
--- a/ui/pages/register.vue
+++ b/ui/pages/register.vue
@@ -3,27 +3,30 @@
     <img src="../assets/img/logo_white_small.png" alt="OhMyForm" />
 
     <b-form class="box" @submit="submit">
-      <b-form-group label-for="username">
+      <b-form-group>
         <b-form-input
           id="username"
+          aria-label="Username"
           v-model="username"
           trim
           placeholder="Username"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="email">
+      <b-form-group>
         <b-form-input
           id="email"
+          aria-label="Email"
           v-model="email"
           trim
           placeholder="Email"
         ></b-form-input>
       </b-form-group>
 
-      <b-form-group label-for="password">
+      <b-form-group>
         <b-form-input
           id="password"
+          aria-label="Password"
           v-model="password"
           type="password"
           placeholder="Password"

From 3133af88eca72c81439fbfed27de0e6b15b12c76 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:28:31 +0100
Subject: [PATCH 4/6] Add H1 tags for register, login, and recover pages

---
 ui/pages/login.vue    | 4 +++-
 ui/pages/recover.vue  | 4 +++-
 ui/pages/register.vue | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/pages/login.vue b/ui/pages/login.vue
index 41e38cda..57d4d036 100644
--- a/ui/pages/login.vue
+++ b/ui/pages/login.vue
@@ -1,6 +1,8 @@
 <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>
diff --git a/ui/pages/recover.vue b/ui/pages/recover.vue
index fe960d8a..135ebec2 100644
--- a/ui/pages/recover.vue
+++ b/ui/pages/recover.vue
@@ -1,6 +1,8 @@
 <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>
diff --git a/ui/pages/register.vue b/ui/pages/register.vue
index c07ecb63..eb94d33b 100644
--- a/ui/pages/register.vue
+++ b/ui/pages/register.vue
@@ -1,6 +1,8 @@
 <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>

From af22df803ce07e92dfe0c7c165213339afde391e Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:30:26 +0100
Subject: [PATCH 5/6] make the footer a footer

---
 ui/layouts/screen.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/layouts/screen.vue b/ui/layouts/screen.vue
index d5aa7e37..74bf09ce 100644
--- a/ui/layouts/screen.vue
+++ b/ui/layouts/screen.vue
@@ -4,12 +4,12 @@
       <nuxt />
     </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>
 

From fa54ce8991fc85e753b32e4e2fc4f77c08b4c5d6 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne.aitchison@gmail.com>
Date: Sat, 12 Oct 2019 12:32:08 +0100
Subject: [PATCH 6/6] Fix attribute order to comply with lint

---
 ui/pages/login.vue    | 4 ++--
 ui/pages/recover.vue  | 2 +-
 ui/pages/register.vue | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/pages/login.vue b/ui/pages/login.vue
index 57d4d036..b088d576 100644
--- a/ui/pages/login.vue
+++ b/ui/pages/login.vue
@@ -7,9 +7,9 @@
     <b-form class="box" @submit.prevent="submit">
       <b-form-group>
         <b-form-input
-          aria-label="Username"
           id="username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>
@@ -17,9 +17,9 @@
 
       <b-form-group>
         <b-form-input
-          aria-label="Password"
           id="password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim
diff --git a/ui/pages/recover.vue b/ui/pages/recover.vue
index 135ebec2..78f6e611 100644
--- a/ui/pages/recover.vue
+++ b/ui/pages/recover.vue
@@ -8,8 +8,8 @@
       <b-form-group>
         <b-form-input
           id="username"
-          aria-label="Username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username or Email"
         ></b-form-input>
diff --git a/ui/pages/register.vue b/ui/pages/register.vue
index eb94d33b..a1b07b56 100644
--- a/ui/pages/register.vue
+++ b/ui/pages/register.vue
@@ -8,8 +8,8 @@
       <b-form-group>
         <b-form-input
           id="username"
-          aria-label="Username"
           v-model="username"
+          aria-label="Username"
           trim
           placeholder="Username"
         ></b-form-input>
@@ -18,8 +18,8 @@
       <b-form-group>
         <b-form-input
           id="email"
-          aria-label="Email"
           v-model="email"
+          aria-label="Email"
           trim
           placeholder="Email"
         ></b-form-input>
@@ -28,8 +28,8 @@
       <b-form-group>
         <b-form-input
           id="password"
-          aria-label="Password"
           v-model="password"
+          aria-label="Password"
           type="password"
           placeholder="Password"
           trim