Merge pull request #971 from curtgrimes/894-ability-keyboard-navigation

Make `<Ability/>` support keyboard navigation

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>
   );
 }

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;