From 20548daccfd2f950e97e4e555eba8434c7302afc Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Fri, 25 May 2018 20:48:03 +0100
Subject: [PATCH] Use <button> for habits +/- buttons

Use the `<button>` tag instead of a `<div>`. This makes the element
naturally focusable with the keyboard, and makes the HTML more semantic.

Update the CSS to align the icons in the centre of the `<button>`.
---
 website/client/assets/scss/task.scss     | 19 ++++++++++++++-----
 website/client/components/tasks/task.vue | 10 +++++++---
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
index 35ee425538..3bee334e1c 100644
--- a/website/client/assets/scss/task.scss
+++ b/website/client/assets/scss/task.scss
@@ -295,15 +295,24 @@
   .svg-icon {
     width: 10px;
     height: 10px;
-    margin: 0 auto;
+    margin: auto;
   }
+}
 
-  .positive {
-    margin-top: 9px;
+.positive,
+.negative {
+  align-items: center;
+  display: flex;
+
+  > svg {
+    margin: auto;
+    width: 10px;
   }
+}
 
-  .negative {
-    margin-top: 13px;
+.negative {
+  > svg {
+    height: 2px;
   }
 }
 
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index 5f743a0d44..c61687115c 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -5,11 +5,11 @@
     .d-flex(:class="{'task-not-scoreable': isUser !== true}")
       // Habits left side control
       .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
-        .task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
+        button.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
           .svg-icon.positive(v-html="icons.positive")
       // Dailies and todos left side control
       .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
-        .task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
+        button.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
           .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
       // Task title, description and icons
       .task-content(:class="contentClass")
@@ -98,7 +98,7 @@
 
       // Habits right side control
       .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
-        .task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
+        button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
           .svg-icon.negative(v-html="icons.negative")
       // Rewards right side control
       .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
@@ -427,7 +427,11 @@
   }
 
   .task-control, .reward-control {
+    align-items: center;
+    border: none;
     cursor: pointer;
+    margin: 0;
+    padding: 0;
   }
 
   .task-not-scoreable {