From 977453230847790de86aa7721c059d4fe3ec7eeb Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 24 Apr 2024 15:55:42 +0330
Subject: [PATCH] feat: add better aria labels

---
 src/components/sound/favorite/favorite.tsx | 9 +++++++--
 src/components/sound/sound.tsx             | 3 ++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/sound/favorite/favorite.tsx b/src/components/sound/favorite/favorite.tsx
index 45802a4..aba700f 100644
--- a/src/components/sound/favorite/favorite.tsx
+++ b/src/components/sound/favorite/favorite.tsx
@@ -11,9 +11,10 @@ import { useKeyboardButton } from '@/hooks/use-keyboard-button';
 
 interface FavoriteProps {
   id: string;
+  label: string;
 }
 
-export function Favorite({ id }: FavoriteProps) {
+export function Favorite({ id, label }: FavoriteProps) {
   const isFavorite = useSoundStore(state => state.sounds[id].isFavorite);
   const toggleFavorite = useSoundStore(state => state.toggleFavorite);
 
@@ -26,8 +27,12 @@ export function Favorite({ id }: FavoriteProps) {
   return (
     <AnimatePresence initial={false} mode="wait">
       <button
-        aria-label="Add Sound to Favorites"
         className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
+        aria-label={
+          isFavorite
+            ? `Remove ${label} Sound from Favorites`
+            : `Add ${label} Sound to Favorites`
+        }
         onKeyDown={handleKeyDown}
         onClick={e => {
           e.stopPropagation();
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index 04ba078..eb7f08b 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -81,6 +81,7 @@ export function Sound({
 
   return (
     <div
+      aria-label={`${label} sound`}
       role="button"
       tabIndex={0}
       className={cn(
@@ -91,7 +92,7 @@ export function Sound({
       onClick={handleClick}
       onKeyDown={handleKeyDown}
     >
-      <Favorite id={id} />
+      <Favorite id={id} label={label} />
       <div className={styles.icon}>
         {isLoading ? (
           <span className={styles.spinner}>