From c800d22ccf9182d4b11f0d94573a266b4ebfd7cb Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sat, 22 Aug 2020 04:20:14 +0200
Subject: [PATCH] Accessibility stuff

---
 app/src/main/kotlin/views/BaseView.kt                  | 4 ++--
 app/src/main/kotlin/views/SettingView.kt               | 9 +++++++--
 app/src/main/kotlin/views/components/NoteListHeader.kt | 1 +
 css/src/button.pcss                                    | 8 ++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/src/main/kotlin/views/BaseView.kt b/app/src/main/kotlin/views/BaseView.kt
index dc71663..bb08441 100644
--- a/app/src/main/kotlin/views/BaseView.kt
+++ b/app/src/main/kotlin/views/BaseView.kt
@@ -20,7 +20,7 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
             unsafe {
                 @Language("html")
                 val html = """
-                    <div class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
+                    <div aria-label="demo" class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
                         <div class="flex justify-between mb-4">
                           <h1 class="text-2xl underline">Notes</h1>
                             <span>
@@ -29,7 +29,7 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
                             </span>
                         </div>
                         <form class="md:space-x-2" id="search">
-                        <input name="search" disabled="" value="tag:&quot;demo&quot;">
+                        <input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
                         <span id="buttons"><button disabled="">search</button><a href="#">clear</a></span>
                         </form>
                         <div class="overflow-x-auto">
diff --git a/app/src/main/kotlin/views/SettingView.kt b/app/src/main/kotlin/views/SettingView.kt
index 6a348cf..961e775 100644
--- a/app/src/main/kotlin/views/SettingView.kt
+++ b/app/src/main/kotlin/views/SettingView.kt
@@ -38,7 +38,7 @@ class SettingView(staticFileResolver: StaticFileResolver) : View(staticFileResol
             }
 
             section(classes = "m-4 p-4 bg-gray-800 rounded") {
-                h2(classes = "mb-4 text-red-600 text-lg font-semibold") {
+                h2(classes = "mb-4 text-red-400 text-lg font-semibold") {
                     +"Delete my account"
                 }
 
@@ -66,8 +66,13 @@ class SettingView(staticFileResolver: StaticFileResolver) : View(staticFileResol
                             error = validationErrors.find { it.dataPath == ".password" }?.message
                         )
                         checkBoxInput(name = "checked") {
+                            id = "checked"
                             attributes["required"] = ""
-                            +" Do you want to proceed ?"
+                            label {
+                                attributes["for"] = "checked"
+                                +" Do you want to proceed ?"
+                            }
+
                         }
                         button(
                             type = submit,
diff --git a/app/src/main/kotlin/views/components/NoteListHeader.kt b/app/src/main/kotlin/views/components/NoteListHeader.kt
index 9baa8fa..c17472f 100644
--- a/app/src/main/kotlin/views/components/NoteListHeader.kt
+++ b/app/src/main/kotlin/views/components/NoteListHeader.kt
@@ -22,6 +22,7 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") {
         id = "search"
         input(name = "search") {
             attributes["value"] = query
+            attributes["aria-label"] = "search"
         }
         span {
             id = "buttons"
diff --git a/css/src/button.pcss b/css/src/button.pcss
index d422fa6..595c79e 100644
--- a/css/src/button.pcss
+++ b/css/src/button.pcss
@@ -1,5 +1,5 @@
 .btn {
-    @apply font-semibold py-2 px-4 rounded;
+    @apply font-bold py-2 px-4 rounded;
 
     &:focus {
         @apply outline-none shadow-outline;
@@ -7,7 +7,7 @@
 }
 
 .btn-teal {
-    @apply bg-teal-500 text-white;
+    @apply bg-teal-400 text-gray-800;
 
     &:focus {
         @apply bg-teal-600;
@@ -19,7 +19,7 @@
 }
 
 .btn-green {
-    @apply bg-green-500 text-white;
+    @apply bg-green-400 text-gray-800;
 
     &:focus {
         @apply bg-green-600;
@@ -31,7 +31,7 @@
 }
 
 .btn-red {
-    @apply bg-red-500 text-white;
+    @apply bg-red-400 text-gray-800;
 
     &:focus {
         @apply bg-red-600;