Merge pull request #26 from SuperMeepBoy/improve-accessibility-2

Allow using spacebar or enter to trigger buttons

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);

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(
+  const handleKeyDown = useKeyboardButton(() => {
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    toggle();
-      if (event.key === 'Enter') {
+  });
-        toggle();
-      }
-    },
-    [toggle],
-  );
 
   return (
     <div

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;
+};