From 63d78bc3ae6cd1c0553aa5c9956f4df7a92ed744 Mon Sep 17 00:00:00 2001
From: Curt Grimes <curt@curtgrimes.com>
Date: Mon, 26 Sep 2022 00:24:37 -0700
Subject: [PATCH 1/2] Make `<Ability/>` support keyboard navigation

`<Ability/>` can now be tabbed through, and it now shares the same focus
outline, hover, and mousedown styles with `<AbilitiesSelector/>`. This
includes the `cursor: pointer` style that makes it more obvious that
this component is clickable like other buttons.

Fixes #894.
---
 app/components/Ability.tsx | 4 ++--
 app/styles/common.css      | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Ability.tsx b/app/components/Ability.tsx
index 0ca792655..71a2b7ef0 100644
--- a/app/components/Ability.tsx
+++ b/app/components/Ability.tsx
@@ -20,7 +20,7 @@ export function Ability({
   const sizeNumber = sizeMap[size];
 
   return (
-    <div
+    <button
       className="build__ability"
       style={
         {
@@ -31,6 +31,6 @@ export function Ability({
       data-cy={`${ability}-ability`}
     >
       <Image alt="" path={abilityImageUrl(ability)} />
-    </div>
+    </button>
   );
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index 8d74bff55..3286d62ad 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -792,6 +792,7 @@ dialog::backdrop {
   border-radius: 50%;
   box-shadow: 0 0 0 1px var(--bg-ability);
   user-select: none;
+  padding: 0;
 }
 
 .build__bottom-row {

From ced742bbadf00843e74b5e0d41faad76ac0ef36c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 26 Sep 2022 20:24:43 +0300
Subject: [PATCH 2/2] Apply linter

---
 app/styles/common.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/common.css b/app/styles/common.css
index 3286d62ad..81c285b85 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -784,6 +784,7 @@ dialog::backdrop {
 .build__ability {
   width: var(--ability-size);
   height: var(--ability-size);
+  padding: 0;
   border: 2px solid var(--theme-transparent);
   border-right: 0;
   border-bottom: 0;
@@ -792,7 +793,6 @@ dialog::backdrop {
   border-radius: 50%;
   box-shadow: 0 0 0 1px var(--bg-ability);
   user-select: none;
-  padding: 0;
 }
 
 .build__bottom-row {