Merge pull request #38 from SuperMeepBoy/accessbility-ignore-icons-screen-reader

accessibility: ignore icons for screen readers

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

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>

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>

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>

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`}

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