keyboard navigable tooltips

index.html

@@ -239,7 +239,9 @@
         <option value="yes">Only</option>
         <option value="no">Ignored</option>
       </select>
-      <span class="info"
+      <span
+        tabindex="0"
+        class="info"
         title="Some bikes shift their center of gravity inwards while drifting, making them handle very differently. Select &quot;Only&quot; to only see these bikes, or &quot;Ignored&quot; to omit these bikes."
       ></span>
       <br />
@@ -485,6 +487,7 @@
         </tbody>
       </table>
       <div id="rivals">Rivals<sup
+        tabindex="0"
         class="info"
         title="When playing as P1 in a Grand Prix, these characters are guaranteed to be COM characters and should be better than other COMs, unless they are chosen by other players. Not all characters have rivals."
       ></sup>:&nbsp;</div>

src/index.civet

@@ -324,7 +324,12 @@ form.addEventListener
     { +passive }
 
 document.querySelectorAll<HTMLElement> '.info'
-    .forEach .addEventListener
-        'click'
-        -> alert @title
-        { +passive }
+    .forEach (el) =>
+        el.addEventListener
+            'click'
+            -> alert @title
+            { +passive }
+        el.addEventListener
+            'keypress'
+            (e) -> if e.key is 'Enter' or e.key is ' ' then alert @title
+            { +passive }