Feature/catalogue accessibility

src/App.css

@@ -156,6 +156,14 @@
   outline-offset: 2px;
 }
 
+  input:focus-visible,
+  select:focus-visible,
+  button:focus-visible,
+  a:focus-visible {
+  outline: 3px solid #74070E;
+  outline-offset: 3px;
+}
+
 .rating {
   margin-top: 14px;
 }

src/components/AlbumCard/AlbumCard.css

@@ -24,15 +24,6 @@
   outline-offset: 4px;
 }
 
-.album-card:hover {
-  transform: translateY(-4px);
-}
-
-.album-card:focus-visible {
-  outline: 2px solid #74070E;
-  outline-offset: 4px;
-}
-
 .album-image {
   display: block;
   width: 100%;

src/components/AlbumCard/AlbumCard.tsx

@@ -17,7 +17,7 @@ function AlbumCard({ album }: AlbumCardProps) {
         <img
           className="album-image"
           src={album.coverUrl}
-          alt={`${album.title} album cover`}
+          alt={`Album cover for ${album.title} by ${album.artist}`}
         />
       ) : (
         <div className="album-image album-placeholder">

src/components/FilterControls/FilterControls.tsx

@@ -19,22 +19,24 @@ function FilterControls({
 }: FilterControlsProps) {
   return (
     <>
-      <label htmlFor="genre">Genre</label>
+      <label htmlFor="genre">Filter by genre</label>
       <select
         id="genre"
+        name="genre"
         value={genre}
         onChange={(event) => onGenreChange(event.target.value)}
       >
         {genres.map((item) => (
           <option key={item} value={item}>
-            {item}
+            {item === 'All genres' ? 'All genres' : item}
           </option>
         ))}
       </select>
 
-      <label htmlFor="decade">Decade</label>
+      <label htmlFor="decade">Filter by decade</label>
       <select
         id="decade"
+        name="decade"
         value={decade}
         onChange={(event) => onDecadeChange(event.target.value)}
       >

src/components/SearchBar/SearchBar.tsx

@@ -6,16 +6,17 @@ interface SearchBarProps {
 
 function SearchBar({ search, onSearchChange }: SearchBarProps) {
   return (
-    <>
-      <label htmlFor="search">Search</label>
+    <div>
+      <label htmlFor="album-search">Search for albums or artists</label>
       <input
-        id="search"
+        id="album-search"
+        name="album-search"
         type="search"
-        placeholder="Album or artist..."
         value={search}
         onChange={(event) => onSearchChange(event.target.value)}
+        placeholder="Marvin Gaye"
       />
-    </>
+    </div>
   )
 }
 

src/pages/CataloguePage.tsx

@@ -39,8 +39,6 @@ function CataloguePage() {
 
   const decades = [
     'All decades',
-    '1920s',
-    '1930s',
     '1940s',
     '1950s',
     '1960s',