feat(AppButton): Make button keyboard-focus only (accessibility)

Author: colinj

src/components/AppButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <button class="app-btn" type="button">
+    <span tabindex="-1">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "AppButton"
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/CanvasEditor.vue

@@ -13,10 +13,10 @@
       <div class="control-footer">
         <span>Name</span>
         <span :title="fileName">{{ fileName }}</span>
-        <button class="btn" @click="openFilePicker">
+        <app-button @click="openFilePicker">
           <img src="@/assets/triangle.svg" alt="" srcset="" />
           Upload
-        </button>
+        </app-button>
       </div>
     </div>
     <input
@@ -29,10 +29,14 @@
 </template>
 
 <script>
+import AppButton from "@/components/AppButton";
+
 const pipe = (...fns) => initVal => fns.reduce((val, fn) => fn(val), initVal);
 
 export default {
-  components: {},
+  components: {
+    AppButton
+  },
   name: "CanvasEditor",
   props: {
     settings: {
@@ -157,7 +161,7 @@ export default {
   }
 }
 
-.btn {
+.app-btn {
   margin-left: 1.5rem;
 }
 </style>

src/styles/components/_button.scss

@@ -1,28 +1,45 @@
-.btn {
-  @extend %control-style;
-  padding: 1rem 2rem;
-  display: flex;
-  align-items: center;
-  margin-left: 1.5rem;
-  border-radius: $border-radius;
-  background-color: $grey-1;
-  color: $blue;
+        .app-btn {
+  @at-root button#{&} {
+    appearance: none;
+    background: none;
+    border: none;
+    outline: none;
+  }
 
-  &:hover {
-    background-color: darken($grey-1, 10%);
+  > span {
+    @extend %control-style;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 1rem 2rem;
+    border-radius: $border-radius;
+    background-color: $grey-1;
+    color: $blue;
+
+    &:focus {
+      outline: none;
+    }
+
+    img {
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5em;
+    }
   }
 
-  &:focus {
-    outline: none;
+  &:hover > span {
+    background-color: darken($grey-1, 5%);
   }
 
-  &:active {
-    background-color: darken($grey-1, 15%);
+  &:active > span {
+    background-color: darken($grey-1, 10%);
   }
 
-  img {
-    width: 1em;
-    height: 1em;
-    margin-right: 0.5em;
+  &:focus {
+    outline: none;
+
+    > span {
+      box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.2);
+    }
   }
 }