From 60cc2e9369aff3a374458cf1c3234eec8cd0530e Mon Sep 17 00:00:00 2001
From: Jef Roelandt <roelandt.jef@plaws.fr>
Date: Tue, 23 Apr 2024 13:24:41 +0200
Subject: [PATCH] feat: allow using spacebar or enter to trigger buttons

It is a good practice for accessibility.
Cf https://webaim.org/techniques/keyboard/ or
any other resource on the Internet talking about buttons accessibiltiy.
---
 src/components/sound/favorite/favorite.tsx |  7 +++++++
 src/components/sound/sound.tsx             | 13 +++++--------
 src/hooks/useKeyboardButton.ts             | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/useKeyboardButton.ts

diff --git a/src/components/sound/favorite/favorite.tsx b/src/components/sound/favorite/favorite.tsx
index 64f122b..80c364f 100644
--- a/src/components/sound/favorite/favorite.tsx
+++ b/src/components/sound/favorite/favorite.tsx
@@ -7,6 +7,8 @@ import { fade } from '@/lib/motion';
 
 import styles from './favorite.module.css';
 
+import { useKeyboardButton } from '@/hooks/useKeyboardButton';
+
 interface FavoriteProps {
   id: string;
 }
@@ -17,11 +19,16 @@ export function Favorite({ id }: FavoriteProps) {
 
   const variants = fade();
 
+  const handleKeyDown = useKeyboardButton(() => {
+    toggleFavorite(id);
+  });
+
   return (
     <AnimatePresence initial={false} mode="wait">
       <button
         aria-label="Add Sound to Favorites"
         className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
+        onKeyDown={handleKeyDown}
         onClick={e => {
           e.stopPropagation();
           toggleFavorite(id);
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index d65bef9..380b8c8 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -12,6 +12,8 @@ import styles from './sound.module.css';
 
 import type { Sound } from '@/data/types';
 
+import { useKeyboardButton } from '@/hooks/useKeyboardButton';
+
 interface SoundProps extends Sound {
   functional: boolean;
   hidden: boolean;
@@ -73,14 +75,9 @@ export function Sound({
     toggle();
   }, [toggle]);
 
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'Enter') {
-        toggle();
-      }
-    },
-    [toggle],
-  );
+  const handleKeyDown = useKeyboardButton(() => {
+    toggle();
+  });
 
   return (
     <div
diff --git a/src/hooks/useKeyboardButton.ts b/src/hooks/useKeyboardButton.ts
new file mode 100644
index 0000000..13eb366
--- /dev/null
+++ b/src/hooks/useKeyboardButton.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import type { KeyboardEvent } from 'react';
+
+export const useKeyboardButton = (
+  actionCallback: () => void,
+): ((event: KeyboardEvent<HTMLElement>) => void) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        actionCallback();
+        event.stopPropagation();
+      }
+    },
+    [actionCallback],
+  );
+
+  return handleKeyDown;
+};