From d8bcb5d5236bf08f100adf34d1036abe463ae1d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eduard=20Bardaj=C3=AD=20Puig?= <ebardaji@gmail.com>
Date: Wed, 20 Mar 2024 20:44:51 +0100
Subject: [PATCH] Handle ARIA key events

---
 src/lib/ProviderOption.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/lib/ProviderOption.tsx b/src/lib/ProviderOption.tsx
index 47755d0..668751b 100644
--- a/src/lib/ProviderOption.tsx
+++ b/src/lib/ProviderOption.tsx
@@ -7,13 +7,31 @@ interface Props extends ProviderOption {
 }
 
 export function WalletOption(props: Props) {
-  function handleWalletSelected(walletId: string) {
+  function handleWalletSelected() {
     if (props.installPrompt) {
       window.open(props.installPrompt.url, "_blank");
       return;
     }
 
-    props.onWalletSelected(walletId);
+    props.onWalletSelected(props.id);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (props.installPrompt) {
+      // Handle required ARIA keyboard events for links
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role
+      if (e.key === "Enter") {
+        handleWalletSelected();
+        return;
+      }
+      return;
+    }
+
+    // Handle required ARIA keyboard events for buttons
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
+    if (e.key === "Enter" || e.key === " ") {
+      handleWalletSelected();
+    }
   }
 
   const [isMouseOver, setIsMouseOver] = createSignal(false);
@@ -37,7 +55,8 @@ export function WalletOption(props: Props) {
         outline: "none",
         "padding-top": "10px",
       }}
-      onClick={[handleWalletSelected, props.id]}
+      onClick={handleWalletSelected}
+      onKeyDown={handleKeyDown}
       onMouseEnter={() => setIsMouseOver(true)}
       onMouseLeave={() => setIsMouseOver(false)}
       onFocus={() => setIsFocused(true)}