From 86694897475d1e85452796f80021f62707428691 Mon Sep 17 00:00:00 2001
From: Jef Roelandt <roelandt.jef@plaws.fr>
Date: Sun, 21 Apr 2024 16:24:08 +0200
Subject: [PATCH] Fix keyboard focus on Sound cards

---
 src/components/sound/sound.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index dba6639..d65bef9 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -65,20 +65,34 @@ export function Sound({
   }, [unselect, setVolume, id]);
 
   const toggle = useCallback(() => {
-    if (isSelected) return _unselect();
+    if (isSelected) _unselect();
+    else _select();
+  }, [isSelected, _select, _unselect]);
 
-    _select();
-  }, [isSelected, _unselect, _select]);
+  const handleClick = useCallback(() => {
+    toggle();
+  }, [toggle]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        toggle();
+      }
+    },
+    [toggle],
+  );
 
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={cn(
         styles.sound,
         isSelected && styles.selected,
         hidden && styles.hidden,
       )}
-      onClick={toggle}
-      onKeyDown={toggle}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
     >
       <Favorite id={id} />
       <div className={styles.icon}>