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

@@ -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

@@ -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 {