From 488f2538a0ddfb8f95fe020f277589c890f7580c Mon Sep 17 00:00:00 2001
From: Lea <ltnphan@ntnu.no>
Date: Tue, 13 Oct 2026 12:29:41 +0200
Subject: [PATCH 1/2] improve accesibility with tab navigation etc

---
 src/App.css                                      |  8 ++++++++
 src/components/AlbumCard/AlbumCard.css           |  9 ---------
 src/components/AlbumCard/AlbumCard.tsx           |  2 +-
 src/components/FilterControls/FilterControls.tsx |  8 +++++---
 src/components/SearchBar/SearchBar.tsx           | 11 ++++++-----
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/App.css b/src/App.css
index 72417f0..d8a50f7 100644
--- a/src/App.css
+++ b/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;
 }
diff --git a/src/components/AlbumCard/AlbumCard.css b/src/components/AlbumCard/AlbumCard.css
index 435a35b..4e3ab3d 100644
--- a/src/components/AlbumCard/AlbumCard.css
+++ b/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%;
diff --git a/src/components/AlbumCard/AlbumCard.tsx b/src/components/AlbumCard/AlbumCard.tsx
index 2ed7fac..560440c 100644
--- a/src/components/AlbumCard/AlbumCard.tsx
+++ b/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">
diff --git a/src/components/FilterControls/FilterControls.tsx b/src/components/FilterControls/FilterControls.tsx
index bcff5fd..c46d412 100644
--- a/src/components/FilterControls/FilterControls.tsx
+++ b/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)}
       >
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 6c1c0e5..f173d28 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/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>
   )
 }
 

From b60d47cc9902cdf3c29e1a4513fc4600d950228e Mon Sep 17 00:00:00 2001
From: Lea <ltnphan@ntnu.no>
Date: Tue, 13 Oct 2026 12:31:18 +0200
Subject: [PATCH 2/2] remove the decades 1920s and and 1930s

---
 src/pages/CataloguePage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/CataloguePage.tsx b/src/pages/CataloguePage.tsx
index b9c4df4..98ba244 100644
--- a/src/pages/CataloguePage.tsx
+++ b/src/pages/CataloguePage.tsx
@@ -39,8 +39,6 @@ function CataloguePage() {
 
   const decades = [
     'All decades',
-    '1920s',
-    '1930s',
     '1940s',
     '1950s',
     '1960s',