Merge pull request #4 from igorm84/fix/image_alt

fix: added alt to img
igorm84 · Sep 9, 2023 · 56c264c · 56c264c
2 parents 6192170 + 48afd98
commit 56c264c
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 0 deletions.
diff --git a/src/components/MusicsTable.astro b/src/components/MusicsTable.astro
@@ -25,6 +25,7 @@ import InlineArtists from "./InlineArtists.astro";
             <div class="h-10 w-10">
               <img
                 src={song.image}
+                alt={song.title}
                 class="rounded object-cover h-full w-full shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"
               />
             </div>

diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
@@ -9,6 +9,7 @@ import Icon from "astro-icon";
 >
   <a
     href="/"
+    aria-label="go back to home page"
     class="bg-zinc-900 rounded-full inline-flex justify-center items-center h-8 w-8"
   >
     <Icon name="bi:chevron-left" class="h-4 w-4 -ml-0.5" />
@@ -26,6 +27,7 @@ import Icon from "astro-icon";
     </a>
     <a
       target="_blank"
+      aria-label={"github repository"}
       href="https://github.com/igorm84/spotify-astro-transitions"
       class="text-gray-200 hover:text-white"
     >

diff --git a/src/components/PlaylistCard.astro b/src/components/PlaylistCard.astro
@@ -19,6 +19,7 @@ const { playlist } = Astro.props;
     <div class="relative group mx-auto h-40 w-full flex-none shadow-lg">
       <img
         src={playlist.cover}
+        alt={playlist.title}
         class="object-cover h-full w-full rounded-md shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"
         transition:name=`playlist ${playlist.id} image`
       />

diff --git a/src/components/PlaylistItemCard.astro b/src/components/PlaylistItemCard.astro
@@ -17,6 +17,7 @@ const { playlist } = Astro.props;
   <div class="h-20 w-20">
     <img
       src={playlist.cover}
+      alt={playlist.title}
       class="object-cover h-full w-full shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"
       transition:name=`playlist ${playlist.id} image`
     />

diff --git a/src/components/Side/SideItemCard.astro b/src/components/Side/SideItemCard.astro
@@ -18,6 +18,7 @@ const { playlist } = Astro.props;
   <div class="h-12 w-12 flex-none">
     <img
       src={playlist.cover}
+      alt={playlist.title}
       class="object-cover rounded h-full w-full shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"
     />
   </div>

diff --git a/src/pages/playlist/[id].astro b/src/pages/playlist/[id].astro
@@ -32,6 +32,7 @@ const playlist = allPlaylists.find((playlist) => playlist.id === id);
       <div class="h-52 w-52 flex-none">
         <img
           src={playlist?.cover}
+          alt={playlist?.title}
           class="object-cover h-full w-full shadow-[5px_0_30px_0px_rgba(0,0,0,0.3)]"
           transition:name=`playlist ${playlist?.id} image`
         />
@@ -74,6 +75,7 @@ const playlist = allPlaylists.find((playlist) => playlist.id === id);
     >
       <img
         src={playlist?.cover}
+        alt={playlist?.title}
         class="el-to-fade transition-all duration-500 z-[-1] absolute inset-0 mix-blend-overlay opacity-20 scale-90 w-full h-full object-cover blur-md"
       />
       <div