From 1cd3452f087e9d28e54c246f17012e76bfbc6ee4 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Tue, 4 Aug 2020 15:32:28 -0400
Subject: [PATCH] Improve some focus styles and make statblocks tabbable

---
 src/components/ActionButton.vue | 7 ++++++-
 src/components/ChoiceButton.vue | 6 +++---
 src/components/Statblock.vue    | 6 ++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/ActionButton.vue b/src/components/ActionButton.vue
index 13f26aa..d5587c3 100644
--- a/src/components/ActionButton.vue
+++ b/src/components/ActionButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @mouseover="describe" class="action-button" @click="execute">
+  <button @focus="describe" class="action-button" @click="execute">
     <div class="action-title">{{ action.name }}</div>
     <div class="action-desc">{{ action.desc }}</div>
   </button>
@@ -59,6 +59,11 @@ export default class ActionButton extends Vue {
   border-color: #666;
   border-style: outset;
   user-select: none;
+  outline: none;
+}
+
+.action-button:focus {
+  background: #444;
 }
 
 .action-button:hover {
diff --git a/src/components/ChoiceButton.vue b/src/components/ChoiceButton.vue
index a8a0a8f..f9cf60c 100644
--- a/src/components/ChoiceButton.vue
+++ b/src/components/ChoiceButton.vue
@@ -42,8 +42,8 @@ export default class ChoiceButton extends Vue {
 .choice-button,
 .choice-button:hover,
 .choice-button:active {
-  width: 90%;
-  margin: 5%;
+  width: calc(100%-16pt);
+  margin: 8pt;
   background: repeating-linear-gradient(45deg, #333, #333 20px, #222 20px, #222 40px);
   color: #ccc;
   font-size: 150%;
@@ -52,7 +52,7 @@ export default class ChoiceButton extends Vue {
   border-radius: 8px;
   border-style: outset;
   outline: none;
-  padding: 0;
+  padding: 4pt;
 }
 
 .choice-button:focus {
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue
index c736858..1b44dae 100644
--- a/src/components/Statblock.vue
+++ b/src/components/Statblock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('select', $el)" class="statblock">
+  <div @click="$emit('select', $el)" @keyup.enter="$emit('select', $el)" class="statblock" tabindex="0">
     <div class="statblock-shader statblock-shader-hover"></div>
     <div class="statblock-shader statblock-shader-selected marching-ants"></div>
     <div class="statblock-shader statblock-shader-selected-ally marching-ants"></div>
@@ -180,6 +180,7 @@ a {
   overflow: hidden;
   background: none;
   border-radius: 10px;
+  outline: none;
 }
 
 .stat-line {
@@ -351,7 +352,8 @@ a {
   opacity: 0;
 }
 
-.statblock:hover .statblock-shader-hover {
+.statblock:hover .statblock-shader-hover,
+.statblock:focus .statblock-shader-hover {
   background: white;
   opacity: 0.20;
 }