From ee0a28b296cebe16cf1a7726deb8ecd47e8f920d Mon Sep 17 00:00:00 2001
From: Jef Roelandt <roelandt.jef@plaws.fr>
Date: Wed, 19 Jun 2024 22:49:37 +0200
Subject: [PATCH] accessibility: ignore icons for screen readers

---
 src/components/buttons/play/play.tsx        | 4 ++--
 src/components/categories/donate/donate.tsx | 2 +-
 src/components/category/category.tsx        | 4 +++-
 src/components/hero.astro                   | 3 ++-
 src/components/sound/favorite/favorite.tsx  | 1 +
 src/components/sound/sound.tsx              | 4 ++--
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx
index eecaa71..f407668 100644
--- a/src/components/buttons/play/play.tsx
+++ b/src/components/buttons/play/play.tsx
@@ -48,14 +48,14 @@ export function PlayButton() {
     >
       {isPlaying ? (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPause />
           </span>{' '}
           Pause
         </>
       ) : (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPlay />
           </span>{' '}
           Play
diff --git a/src/components/categories/donate/donate.tsx b/src/components/categories/donate/donate.tsx
index 1593ca5..be77204 100644
--- a/src/components/categories/donate/donate.tsx
+++ b/src/components/categories/donate/donate.tsx
@@ -9,7 +9,7 @@ export function Donate() {
     <div className={styles.donate}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
-        <div className={styles.icon}>
+        <div aria-hidden="true" className={styles.icon}>
           <FaCoffee />
         </div>
       </div>
diff --git a/src/components/category/category.tsx b/src/components/category/category.tsx
index 48bbb2c..8c86446 100644
--- a/src/components/category/category.tsx
+++ b/src/components/category/category.tsx
@@ -19,7 +19,9 @@ export function Category({
     <div className={styles.category} id={`category-${id}`}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
-        <div className={styles.icon}>{icon}</div>
+        <div aria-hidden="true" className={styles.icon}>
+          {icon}
+        </div>
       </div>
 
       <div className={styles.title}>{title}</div>
diff --git a/src/components/hero.astro b/src/components/hero.astro
index df30893..7623cd7 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -13,6 +13,7 @@ const count = soundCount();
     <div class="wrapper">
       <img
         alt="Faded Moodist Logo"
+        aria-hidden="true"
         class="logo"
         height={45}
         src="/logo.svg"
@@ -28,7 +29,7 @@ const count = soundCount();
       <h1 class="desc">Ambient sounds for focus and calm.</h1>
 
       <p class="sounds">
-        <span class="icon">
+        <span aria-hidden="true" class="icon">
           <BsSoundwave />
         </span>
         <span>{count} Sounds</span>
diff --git a/src/components/sound/favorite/favorite.tsx b/src/components/sound/favorite/favorite.tsx
index 9290729..580bb72 100644
--- a/src/components/sound/favorite/favorite.tsx
+++ b/src/components/sound/favorite/favorite.tsx
@@ -56,6 +56,7 @@ export function Favorite({ id, label }: FavoriteProps) {
       >
         <motion.span
           animate="show"
+          aria-hidden="true"
           exit="hidden"
           initial="hidden"
           key={isFavorite ? `${id}-is-favorite` : `${id}-not-favorite`}
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index d68eb89..b7927bb 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -97,11 +97,11 @@ export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
       <Favorite id={id} label={label} />
       <div className={styles.icon}>
         {isLoading ? (
-          <span className={styles.spinner}>
+          <span aria-hidden="true" className={styles.spinner}>
             <ImSpinner9 />
           </span>
         ) : (
-          icon
+          <span aria-hidden="true">{icon}</span>
         )}
       </div>
       <div className={styles.label} id={id}>