From 9a4a86275738c9a4161137a4e25961a63cca6a3e Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:27:51 +0100
Subject: [PATCH 01/17] fix: add id to "filter books" heading

---
 frontend/app/components/books/BookFilters/BookFilters.tsx | 4 +++-
 frontend/app/components/books/SearchBar/SearchBar.tsx     | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/books/BookFilters/BookFilters.tsx b/frontend/app/components/books/BookFilters/BookFilters.tsx
index 16ac67a..790a7bb 100644
--- a/frontend/app/components/books/BookFilters/BookFilters.tsx
+++ b/frontend/app/components/books/BookFilters/BookFilters.tsx
@@ -41,7 +41,9 @@ function BookFilters() {
   return (
     <section className="flex flex-col gap-4">
       <header className="flex items-center justify-between">
-        <h2 className="text-lg font-bold">Filter Books</h2>
+        <h2 id="filter-books-heading" className="text-lg font-bold">
+          Filter Books
+        </h2>
         <Button
           type="button"
           variant="link"
diff --git a/frontend/app/components/books/SearchBar/SearchBar.tsx b/frontend/app/components/books/SearchBar/SearchBar.tsx
index 5ea859f..73a030d 100644
--- a/frontend/app/components/books/SearchBar/SearchBar.tsx
+++ b/frontend/app/components/books/SearchBar/SearchBar.tsx
@@ -115,7 +115,11 @@ function SearchBar({ resultCount }: SearchBarProps) {
             </Badge>
           )}
         </PopoverTrigger>
-        <PopoverContent align="end" className="w-80">
+        <PopoverContent
+          align="end"
+          className="w-80"
+          aria-labelledby="filter-books-heading"
+        >
           <BookFilters />
         </PopoverContent>
       </Popover>

From aa2b7f62d7b7cb21ef4469b9b714e8e5042644d1 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:28:15 +0100
Subject: [PATCH 02/17] fix: add ARIA label to ComboboxTrigger

---
 frontend/app/components/ui/Combobox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/ui/Combobox.tsx b/frontend/app/components/ui/Combobox.tsx
index cddd69f..534a252 100644
--- a/frontend/app/components/ui/Combobox.tsx
+++ b/frontend/app/components/ui/Combobox.tsx
@@ -71,7 +71,7 @@ function ComboboxInput({
           <InputGroupButton
             size="icon-xs"
             variant="ghost"
-            render={<ComboboxTrigger />}
+            render={<ComboboxTrigger aria-label="Show options" />}
             data-slot="input-group-button"
             className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
             disabled={disabled}

From 6e22bf4622006cba3d813f319a6a8cca82c1fb94 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:32:54 +0100
Subject: [PATCH 03/17] fix: adjust BookCard and BookCover to fulfill
 accessibility requirements

---
 .../app/components/BookCard/BookCard.test.tsx |  2 +-
 frontend/app/components/BookCard/BookCard.tsx |  3 +-
 .../__snapshots__/BookCard.test.tsx.snap      |  3 +-
 .../app/components/BookCover/BookCover.tsx    | 16 ++++++++--
 frontend/e2e/books.spec.ts                    | 29 ++++++++++---------
 frontend/e2e/fixtures.ts                      |  9 +++++-
 6 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/BookCard/BookCard.test.tsx b/frontend/app/components/BookCard/BookCard.test.tsx
index d286043..2f67ede 100644
--- a/frontend/app/components/BookCard/BookCard.test.tsx
+++ b/frontend/app/components/BookCard/BookCard.test.tsx
@@ -36,7 +36,7 @@ describe("BookCard", () => {
     renderRoutes(routes, { initialEntries: ["/?q=fantasy"] });
 
     expect(
-      screen.getByRole("link", { name: "View details for The Blade Itself" }),
+      screen.getByRole("link", { name: /^The Blade Itself/ }),
     ).toHaveAttribute("href", `/book/${book.id}?q=fantasy`);
   });
 
diff --git a/frontend/app/components/BookCard/BookCard.tsx b/frontend/app/components/BookCard/BookCard.tsx
index a8cc838..a453540 100644
--- a/frontend/app/components/BookCard/BookCard.tsx
+++ b/frontend/app/components/BookCard/BookCard.tsx
@@ -31,9 +31,8 @@ function BookCard({ book, searchListParams }: BookCardProps) {
           search: nextSearchParams.toString(),
         }}
         className="flex h-full flex-col cursor-pointer p-6 rounded-xl"
-        aria-label={`View details for ${book.title}`}
       >
-        <BookCover book={book} />
+        <BookCover book={book} decorative />
 
         <CardHeader className="mt-4">
           <CardTitle className="font-bold">{book.title}</CardTitle>
diff --git a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
index b282a01..892dfa3 100644
--- a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
+++ b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`BookCard > matches the snapshot 1`] = `
     data-slot="card"
   >
     <a
-      aria-label="View details for The Blade Itself"
       class="flex h-full flex-col cursor-pointer p-6 rounded-xl"
       data-discover="true"
       href="/book/1"
@@ -20,7 +19,7 @@ exports[`BookCard > matches the snapshot 1`] = `
           class="block h-full overflow-hidden"
         >
           <img
-            alt="Book cover of The Blade Itself"
+            alt=""
             class="size-full object-cover transition-transform duration-200 group-hover:scale-103"
             loading="lazy"
             src="https://covers.openlibrary.org/b/id/14543422-M.jpg?default=false"
diff --git a/frontend/app/components/BookCover/BookCover.tsx b/frontend/app/components/BookCover/BookCover.tsx
index 58c3197..3bb5131 100644
--- a/frontend/app/components/BookCover/BookCover.tsx
+++ b/frontend/app/components/BookCover/BookCover.tsx
@@ -5,22 +5,32 @@ interface BookCoverProps {
   // "lazy" lets the browser skip covers far outside the screen until the user
   // scrolls near them. Use "eager" for a cover that is visible right away.
   loading?: "lazy" | "eager";
+  // Hides the cover from screen readers when the title is next to it in the same
+  // link, so the link's name starts with the title instead of repeating it.
+  decorative?: boolean;
 }
 
-function BookCover({ book, loading = "lazy" }: BookCoverProps) {
+function BookCover({
+  book,
+  loading = "lazy",
+  decorative = false,
+}: BookCoverProps) {
   return book.coverImgUrl ? (
     <figure className="mx-6 my-3 aspect-2/3 contain-content">
       <picture className="block h-full overflow-hidden">
         <img
           src={book.coverImgUrl}
-          alt={`Book cover of ${book.title}`}
+          alt={decorative ? "" : `Book cover of ${book.title}`}
           loading={loading}
           className="size-full object-cover transition-transform duration-200 group-hover:scale-103"
         />
       </picture>
     </figure>
   ) : (
-    <p className="flex items-center justify-center mx-6 my-3 aspect-2/3 rounded-md bg-background text-center text-sm">
+    <p
+      aria-hidden={decorative || undefined}
+      className="flex items-center justify-center mx-6 my-3 aspect-2/3 rounded-md bg-background text-center text-sm"
+    >
       No cover available
     </p>
   );
diff --git a/frontend/e2e/books.spec.ts b/frontend/e2e/books.spec.ts
index aeff6c9..2d8cd58 100644
--- a/frontend/e2e/books.spec.ts
+++ b/frontend/e2e/books.spec.ts
@@ -1,7 +1,4 @@
-import { expect, test, type Page } from "@playwright/test";
-
-const bookLinks = (page: Page) =>
-  page.getByRole("link", { name: "View details for" });
+import { bookCards, expect, test } from "./fixtures";
 
 test("searching updates the URL and the results", async ({ page }) => {
   await page.goto("books");
@@ -11,9 +8,12 @@ test("searching updates the URL and the results", async ({ page }) => {
     .fill("potter");
 
   await expect(page).toHaveURL("books?q=potter");
-  await expect(bookLinks(page).first()).toContainText("potter", {
-    ignoreCase: true,
-  });
+  await expect(bookCards(page).first().getByRole("link")).toContainText(
+    "potter",
+    {
+      ignoreCase: true,
+    },
+  );
 });
 
 test("filtering by genre can be reset", async ({ page }) => {
@@ -44,7 +44,7 @@ test("sorting by rating orders the books", async ({ page }) => {
 
   // Retries because the old, unsorted list can still be shown right after the URL changes.
   await expect(async () => {
-    const ratings = (await bookLinks(page).allInnerTexts()).map((text) =>
+    const ratings = (await bookCards(page).allInnerTexts()).map((text) =>
       Number(/(\d\.\d{2})\s*\(/.exec(text)?.[1]),
     );
     expect(ratings).toHaveLength(12);
@@ -54,7 +54,10 @@ test("sorting by rating orders the books", async ({ page }) => {
 
 test("pagination moves to the next page", async ({ page }) => {
   await page.goto("books");
-  const firstBook = await bookLinks(page).first().getAttribute("aria-label");
+  const firstTitle = await bookCards(page)
+    .first()
+    .getByRole("link")
+    .innerText();
 
   await page.getByRole("link", { name: "Go to next page" }).click();
 
@@ -64,15 +67,15 @@ test("pagination moves to the next page", async ({ page }) => {
       .getByRole("navigation", { name: "pagination" })
       .getByRole("link", { name: "2", exact: true }),
   ).toHaveAttribute("aria-current", "page");
-  await expect(bookLinks(page).first()).not.toHaveAccessibleName(
-    firstBook ?? "",
+  await expect(bookCards(page).first().getByRole("link")).not.toHaveText(
+    firstTitle,
   );
 });
 
 test("a book can be opened, browsed and left again", async ({ page }) => {
   await page.goto("books?q=potter");
 
-  await bookLinks(page).first().click();
+  await bookCards(page).first().getByRole("link").click();
 
   await expect(page).toHaveURL(/\/book\/\d+\?q=potter$/);
   await expect(
@@ -94,7 +97,7 @@ test("a search without matches suggests other books", async ({ page }) => {
   await expect(
     page.getByRole("status").filter({ hasText: "No books found" }),
   ).toBeVisible();
-  await expect(bookLinks(page).first()).toBeVisible();
+  await expect(bookCards(page).first()).toBeVisible();
 });
 
 test("an unknown book shows a not found message", async ({ page }) => {
diff --git a/frontend/e2e/fixtures.ts b/frontend/e2e/fixtures.ts
index 0e14ff6..128d562 100644
--- a/frontend/e2e/fixtures.ts
+++ b/frontend/e2e/fixtures.ts
@@ -27,6 +27,13 @@ const test = base.extend<{ user: User }>({
   },
 });
 
+// A book card is a list item with a favorite button. Its link is named by the book title.
+function bookCards(page: Page) {
+  return page
+    .getByRole("listitem")
+    .filter({ has: page.getByRole("button", { name: "favorites" }) });
+}
+
 async function logIn(page: Page, email: string, password: string) {
   await page.goto("login");
   // Scoped to main because the header also has a "Log in" link.
@@ -36,4 +43,4 @@ async function logIn(page: Page, email: string, password: string) {
   await form.getByRole("button", { name: "Log in", exact: true }).click();
 }
 
-export { test, logIn, expect };
+export { test, bookCards, logIn, expect };

From 94354fa77a37598525f0e7b7b7c8ff6b3bb33f69 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:33:34 +0100
Subject: [PATCH 04/17] fix: adjust color of link on profile page in dark mode

---
 frontend/app/routes/profile.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/app/routes/profile.tsx b/frontend/app/routes/profile.tsx
index a0962ce..a27ffdf 100644
--- a/frontend/app/routes/profile.tsx
+++ b/frontend/app/routes/profile.tsx
@@ -155,7 +155,10 @@ export default function ProfilePage() {
           ) : books.length === 0 ? (
             <p className="text-muted-foreground">
               You have no favorite books yet.{" "}
-              <Link to="/books" className="text-primary underline">
+              <Link
+                to="/books"
+                className="text-primary underline dark:text-blue-300"
+              >
                 Browse books
               </Link>
             </p>

From eb6fa21bf0e04ce605def9220ef386299126e435 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:34:22 +0100
Subject: [PATCH 05/17] test: update after accessibility fixes

---
 frontend/app/routes/books.test.tsx | 26 +++++++++++++-------------
 frontend/app/routes/home.test.tsx  | 10 +++++-----
 frontend/e2e/accessibility.spec.ts | 18 ++++++------------
 frontend/e2e/favorites.spec.ts     | 20 ++++++++------------
 frontend/e2e/home.spec.ts          | 13 ++++++-------
 5 files changed, 38 insertions(+), 49 deletions(-)

diff --git a/frontend/app/routes/books.test.tsx b/frontend/app/routes/books.test.tsx
index 3a7150c..fa38667 100644
--- a/frontend/app/routes/books.test.tsx
+++ b/frontend/app/routes/books.test.tsx
@@ -15,9 +15,9 @@ vi.mock("~/api/auth", () => ({
   authClient: { useSession: vi.fn(() => loggedOut) },
 }));
 
-// Every book card is a link to the book's details page.
-const findBookLinks = () =>
-  screen.findAllByRole("link", { name: /View details for/ });
+// Every book card has a favorite button.
+const findBookCards = () =>
+  screen.findAllByRole("button", { name: /favorites/ });
 
 const routes = [
   { path: "/books", Component: BooksPage },
@@ -31,7 +31,7 @@ describe("BooksPage", () => {
       mocks: [searchBooksMock()],
     });
 
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
     expect(screen.getByText("Good Omens")).toBeInTheDocument();
     expect(
       screen.getByText("Terry Pratchett, Neil Gaiman"),
@@ -127,7 +127,7 @@ describe("BooksPage", () => {
         "No books found for this search. However, here are some books with similar titles:",
       ),
     ).toBeInTheDocument();
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
   });
 
   it("pages and sorts the similar titles", async () => {
@@ -159,7 +159,7 @@ describe("BooksPage", () => {
       ],
     });
 
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
     expect(
       screen.getByRole("combobox", { name: "Sort by" }),
     ).toBeInTheDocument();
@@ -206,7 +206,7 @@ describe("BooksPage", () => {
         "No books found for this search. However, here are some top-rated books matching your filters:",
       ),
     ).toBeInTheDocument();
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
     expect(
       screen.queryByRole("combobox", { name: "Sort by" }),
     ).not.toBeInTheDocument();
@@ -245,7 +245,7 @@ describe("BooksPage", () => {
         "No books found for this search. However, here are some top-rated books you might like:",
       ),
     ).toBeInTheDocument();
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
   });
 
   it("keeps the user's minimum number of ratings in the suggestions when it is higher", async () => {
@@ -277,7 +277,7 @@ describe("BooksPage", () => {
       ],
     });
 
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
   });
 
   it("browses through the suggestions on a suggested book's details page", async () => {
@@ -310,7 +310,7 @@ describe("BooksPage", () => {
 
     await user.click(
       await screen.findByRole("link", {
-        name: "View details for Before They Are Hanged",
+        name: /^Before They Are Hanged/,
       }),
     );
 
@@ -358,13 +358,13 @@ describe("BooksPage", () => {
 
     await user.click(
       await screen.findByRole("link", {
-        name: "View details for The Blade Itself",
+        name: /^The Blade Itself/,
       }),
     );
 
     expect(await screen.findByText(/Logen Ninefingers/)).toBeInTheDocument();
     expect(
-      screen.queryByRole("link", { name: /View details for/ }),
+      screen.queryByRole("searchbox", { name: "Search for books" }),
     ).not.toBeInTheDocument();
 
     await user.click(
@@ -372,7 +372,7 @@ describe("BooksPage", () => {
       screen.getByRole("button", { name: "Go back to search results" }),
     );
 
-    expect(await findBookLinks()).toHaveLength(3);
+    expect(await findBookCards()).toHaveLength(3);
     expect(
       screen.getByRole("searchbox", { name: "Search for books" }),
     ).toHaveValue("blade");
diff --git a/frontend/app/routes/home.test.tsx b/frontend/app/routes/home.test.tsx
index 8083575..44d63a5 100644
--- a/frontend/app/routes/home.test.tsx
+++ b/frontend/app/routes/home.test.tsx
@@ -87,11 +87,11 @@ describe("HomePage", () => {
     });
 
     expect(
-      await screen.findAllByRole("link", { name: /View details for/ }),
+      await screen.findAllByRole("button", { name: /favorites/ }),
     ).toHaveLength(3);
     // The details page browses the same top rated list with previous/next.
     expect(
-      screen.getByRole("link", { name: "View details for The Blade Itself" }),
+      screen.getByRole("link", { name: /^The Blade Itself/ }),
     ).toHaveAttribute(
       "href",
       `/book/1?sort=rating_desc&minRatings=${HOME_MIN_RATINGS}`,
@@ -199,12 +199,12 @@ describe("HomePage", () => {
       name: "Because you like Fantasy",
     });
     expect(
-      await within(forYou).findAllByRole("link", { name: /View details for/ }),
+      await within(forYou).findAllByRole("button", { name: /favorites/ }),
     ).toHaveLength(2);
     expect(within(forYou).queryByText(savedBook.title)).not.toBeInTheDocument();
     expect(
       within(forYou).getByRole("link", {
-        name: "View details for Good Omens",
+        name: /^Good Omens/,
       }),
     ).toHaveAttribute(
       "href",
@@ -324,7 +324,7 @@ describe("HomePage", () => {
       screen.getByRole("heading", { name: "Because you like Fantasy" }),
     ).toBeInTheDocument();
     expect(
-      within(forYou).getAllByRole("link", { name: /View details for/ }),
+      within(forYou).getAllByRole("button", { name: /favorites/ }),
     ).toHaveLength(2);
   });
 });
diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index 6a79763..e6495bd 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -1,5 +1,5 @@
 import AxeBuilder from "@axe-core/playwright";
-import { expect, test } from "./fixtures";
+import { bookCards, expect, test } from "./fixtures";
 import type { Locator, Page } from "@playwright/test";
 
 async function expectNoViolations(page: Page, loaded: Locator) {
@@ -26,13 +26,10 @@ for (const colorScheme of ["light", "dark"] as const) {
 
     test("home page", async ({ page }) => {
       await page.goto("./");
-      await expectNoViolations(
-        page,
-        page
-          .getByRole("region", { name: "Top rated" })
-          .getByRole("link", { name: "View details for" })
-          .first(),
-      );
+      await expect(
+        page.getByRole("button", { name: "Surprise me" }),
+      ).toBeEnabled();
+      await expectNoViolations(page, bookCards(page).first());
     });
 
     test("books page with filters open", async ({ page }) => {
@@ -46,10 +43,7 @@ for (const colorScheme of ["light", "dark"] as const) {
 
     test("book page", async ({ page }) => {
       await page.goto("books?q=potter");
-      await page
-        .getByRole("link", { name: "View details for" })
-        .first()
-        .click();
+      await bookCards(page).first().getByRole("link").click();
       await expectNoViolations(
         page,
         page.getByRole("heading", { name: "Description" }),
diff --git a/frontend/e2e/favorites.spec.ts b/frontend/e2e/favorites.spec.ts
index 5dbf6f2..012a5ae 100644
--- a/frontend/e2e/favorites.spec.ts
+++ b/frontend/e2e/favorites.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "./fixtures";
+import { bookCards, expect, test } from "./fixtures";
 
 test("logged out users are asked to log in to save favorites", async ({
   page,
@@ -20,16 +20,14 @@ test("a favorite shows on the profile and can be removed", async ({
   user,
 }) => {
   await page.goto("books?q=potter");
-  const bookLink = page.getByRole("link", { name: "View details for" }).first();
-  const title = (await bookLink.getAttribute("aria-label"))?.replace(
-    "View details for ",
-    "",
-  );
+  const addButton = bookCards(page)
+    .first()
+    .getByRole("button", { name: "to favorites" });
+  const title = (await addButton.getAttribute("aria-label"))
+    ?.replace("Add ", "")
+    .replace(" to favorites", "");
   expect(title).toBeTruthy();
 
-  const addButton = page.getByRole("button", {
-    name: `Add ${title} to favorites`,
-  });
   await addButton.click();
   await expect(
     page.getByRole("button", { name: `Remove ${title} from favorites` }),
@@ -37,9 +35,7 @@ test("a favorite shows on the profile and can be removed", async ({
 
   await page.getByRole("banner").getByRole("link", { name: user.name }).click();
   const favorites = page.getByRole("region", { name: "Favorite books" });
-  await favorites
-    .getByRole("link", { name: `View details for ${title}` })
-    .click();
+  await favorites.getByRole("link", { name: title }).click();
 
   await expect(
     page.getByRole("heading", { name: "Description" }),
diff --git a/frontend/e2e/home.spec.ts b/frontend/e2e/home.spec.ts
index 804eb05..606fc73 100644
--- a/frontend/e2e/home.spec.ts
+++ b/frontend/e2e/home.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { bookCards, expect, test } from "./fixtures";
 
 test.beforeEach(async ({ page }) => {
   await page.goto("./");
@@ -11,9 +11,10 @@ test("searching from the hero shows matching books", async ({ page }) => {
   await page.getByRole("button", { name: "Search" }).click();
 
   await expect(page).toHaveURL("books?q=potter");
-  await expect(
-    page.getByRole("link", { name: "View details for" }).first(),
-  ).toContainText("potter", { ignoreCase: true });
+  await expect(bookCards(page).first().getByRole("link")).toContainText(
+    "potter",
+    { ignoreCase: true },
+  );
 });
 
 test("a genre link shows books in that genre", async ({ page }) => {
@@ -25,9 +26,7 @@ test("a genre link shows books in that genre", async ({ page }) => {
 
   await expect(page).toHaveURL((url) => url.searchParams.has("genres"));
   await expect(page.getByLabel("1 filter active")).toBeVisible();
-  await expect(
-    page.getByRole("link", { name: "View details for" }).first(),
-  ).toBeVisible();
+  await expect(bookCards(page).first()).toBeVisible();
 });
 
 test("see all opens the top rated books", async ({ page }) => {

From 7f3b2e70492ff695b5ef728083c6656bb6f1ba2d Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 22:57:46 +0100
Subject: [PATCH 06/17] feat: adjust colors to meet WCAG 2 AAA standards

---
 frontend/app/index.css             | 9 +++++----
 frontend/app/routes/settings.tsx   | 4 ++--
 frontend/e2e/accessibility.spec.ts | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/app/index.css b/frontend/app/index.css
index f5d3e5e..24dbb3e 100644
--- a/frontend/app/index.css
+++ b/frontend/app/index.css
@@ -94,13 +94,13 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.488 0.243 264.376);
+  --primary: oklch(0.424 0.2 265.65);
   --primary-foreground: oklch(0.97 0.014 254.604);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.97 0 0);
-  /* Darker than the shadcn default (0.556), which was below 4.5:1 contrast on our background. */
-  --muted-foreground: oklch(0.52 0 0);
+  /* Darker than the shadcn default (0.556) to reach 7:1 contrast (WCAG AAA) on our backgrounds. */
+  --muted-foreground: oklch(0.435 0 0);
   --accent: oklch(93.7% 0.03 260.75);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -137,7 +137,8 @@
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  /* Lighter than the shadcn default (0.708) to reach 7:1 contrast (WCAG AAA) on cards. */
+  --muted-foreground: oklch(0.74 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
diff --git a/frontend/app/routes/settings.tsx b/frontend/app/routes/settings.tsx
index 83ce4e0..f72f296 100644
--- a/frontend/app/routes/settings.tsx
+++ b/frontend/app/routes/settings.tsx
@@ -49,12 +49,12 @@ export default function SettingsPage() {
         <h1 className="text-2xl font-medium">Settings</h1>
         <Link
           to="/profile"
-          className="flex items-center text-sm text-blue-600 hover:underline dark:text-blue-400"
+          className="flex items-center text-sm text-primary hover:underline dark:text-blue-300"
         >
           <ArrowLeftIcon className="mr-1 inline h-4 w-4" />
           Back to profile
         </Link>
-        <p className="text-sm text-gray-600 dark:text-gray-400">
+        <p className="text-sm text-muted-foreground">
           Update your profile information and change your password.
         </p>
         <ProfileForm name={session.user.name} bio={session.user.bio ?? ""} />
diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index e6495bd..ae54566 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -9,6 +9,7 @@ async function expectNoViolations(page: Page, loaded: Locator) {
     .withTags([
       "wcag2a",
       "wcag2aa",
+      "wcag2aaa",
       "wcag21a",
       "wcag21aa",
       "wcag22aa",

From 81c2a8975e6ac3a5dfad6150d03c32f5d39dbc1d Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:18:11 +0100
Subject: [PATCH 07/17] test: wait for content to be ready

---
 frontend/e2e/accessibility.spec.ts | 8 +++++---
 frontend/e2e/theme.spec.ts         | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index ae54566..24bf483 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -27,9 +27,11 @@ for (const colorScheme of ["light", "dark"] as const) {
 
     test("home page", async ({ page }) => {
       await page.goto("./");
-      await expect(
-        page.getByRole("button", { name: "Surprise me" }),
-      ).toBeEnabled();
+      // Wait until "Surprise Me" button is ready
+      await expect(page.getByRole("button", { name: "Surprise me" })).toHaveCSS(
+        "opacity",
+        "1",
+      );
       await expectNoViolations(page, bookCards(page).first());
     });
 
diff --git a/frontend/e2e/theme.spec.ts b/frontend/e2e/theme.spec.ts
index e8729a8..1e4b064 100644
--- a/frontend/e2e/theme.spec.ts
+++ b/frontend/e2e/theme.spec.ts
@@ -2,6 +2,9 @@ import { expect, test } from "@playwright/test";
 
 test("dark mode is kept after a reload", async ({ page }) => {
   await page.goto("./");
+  await expect(
+    page.getByRole("heading", { name: "Discover books worth reading" }),
+  ).toBeVisible();
 
   await page.getByRole("button", { name: "Toggle theme" }).click();
   await page.getByRole("menuitem", { name: "Dark" }).click();

From db7d87044d7c51faca1939757e924ad60de3c6db Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:23:37 +0100
Subject: [PATCH 08/17] docs: add info about automatic checks in Playwright

---
 docs/accessibility.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index 1ff100f..16cae57 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -16,6 +16,26 @@
 
 - **Responsive layout.** The book grid goes from four columns to one as the screen gets narrower, and the book page stacks vertically on small screens, so the app can be used on phones.
 
+## Automatic testing using Playwright
+
+We use [Playwright](https://playwright.dev/) to perform automatic accessibility checks.
+
+We're glad to share that we pass the automatic Playwright checks for all of the following levels:
+
+- WCAG 2 Level A
+- WCAG 2 Level AA
+- WCAG 2 Level AAA
+  - It is very difficult to test for all requirements in Level AAA automatically. We conform to those requirements that can be checked automatically, such as 7:1 color contrast.
+- WCAG 2.1 Level A
+- WCAG 2.1 Level AA
+- WCAG 2.2 Level AA
+- General best practices
+
+**We do not claim conforming to all of these levels, especially AAA.**
+
+Testing all of the WCAG requirements is difficult, and Playwright only tests for a subset of these.
+We have rectified multiple issues highlighted by Playwright.
+
 ## Limitations/Future work
 
 This section is meant as an overview of potential improvements with regard to accessibility, and also shows that we are aware of the downsides of our implementation. The table has a column for the status at delivery 3, and the same table will be used to show what work has been done from delivery 3 to 4.

From 82eca9150b72f89b22cc722cd1b0f353c3f4e5c5 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:33:13 +0100
Subject: [PATCH 09/17] fix: only one main heading per page

---
 docs/accessibility.md                          | 18 +++++++++---------
 frontend/app/components/Header/Header.tsx      |  2 +-
 .../components/books/SearchBar/SearchBar.tsx   |  1 +
 frontend/app/routes/book/selectedBook.tsx      |  4 ++--
 frontend/e2e/accessibility.spec.ts             |  1 +
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index 16cae57..b0a3253 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -40,12 +40,12 @@ We have rectified multiple issues highlighted by Playwright.
 
 This section is meant as an overview of potential improvements with regard to accessibility, and also shows that we are aware of the downsides of our implementation. The table has a column for the status at delivery 3, and the same table will be used to show what work has been done from delivery 3 to 4.
 
-| Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                            |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   |                                                                                                                                                                                                                                       |
-| The favorite button changes its label ("Add …" / "Remove …") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   |                                                                                                                                                                                                                                       |
-| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   |                                                                                                                                                                                                                                       |
-| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   |                                                                                                                                                                                                                                       |
-| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                       |
-| We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse). |
-| We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   |                                                                                                                                                                                                                                       |
+| Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                       |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`. |
+| The favorite button changes its label ("Add …" / "Remove …") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   |                                                                                                                                                                                                                                                  |
+| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
+| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   |                                                                                                                                                                                                                                                  |
+| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                                  |
+| We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).            |
+| We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
diff --git a/frontend/app/components/Header/Header.tsx b/frontend/app/components/Header/Header.tsx
index 1826663..c5edd3a 100644
--- a/frontend/app/components/Header/Header.tsx
+++ b/frontend/app/components/Header/Header.tsx
@@ -11,7 +11,7 @@ function Header() {
     <header className="flex items-center justify-between border-b-2 border-zinc-800 not-dark:bg-white px-10 py-3.75">
       <section className="flex items-center gap-10">
         <Link to="/">
-          <h1 className="m-0 text-2xl">Readr</h1>
+          <span className="text-2xl">Readr</span>
         </Link>
 
         <nav aria-label="Main">
diff --git a/frontend/app/components/books/SearchBar/SearchBar.tsx b/frontend/app/components/books/SearchBar/SearchBar.tsx
index 73a030d..6225530 100644
--- a/frontend/app/components/books/SearchBar/SearchBar.tsx
+++ b/frontend/app/components/books/SearchBar/SearchBar.tsx
@@ -67,6 +67,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
 
   return (
     <section className="flex items-center justify-center gap-4 mx-auto mt-10 w-full px-10 sm:mt-20">
+      <h1 className="sr-only">Browse books</h1>
       <InputGroup className="h-10 max-w-150 bg-card">
         <InputGroupAddon align="inline-start">
           <SearchIcon />
diff --git a/frontend/app/routes/book/selectedBook.tsx b/frontend/app/routes/book/selectedBook.tsx
index db380fb..61846bb 100644
--- a/frontend/app/routes/book/selectedBook.tsx
+++ b/frontend/app/routes/book/selectedBook.tsx
@@ -156,8 +156,8 @@ export default function SelectedBookPage({ params }: Route.ComponentProps) {
           <section className="flex flex-col gap-2">
             <Card className="p-7.5">
               <CardHeader className="px-0">
-                <CardTitle className="text-2xl font-bold">
-                  {book.title}
+                <CardTitle>
+                  <h1 className="text-2xl font-bold">{book.title}</h1>
                 </CardTitle>
               </CardHeader>
               <CardContent className="px-0 text-md">
diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index 24bf483..9e9249d 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -4,6 +4,7 @@ import type { Locator, Page } from "@playwright/test";
 
 async function expectNoViolations(page: Page, loaded: Locator) {
   await expect(loaded).toBeVisible();
+  await expect(page.getByRole("heading", { level: 1 })).toHaveCount(1);
 
   const results = await new AxeBuilder({ page })
     .withTags([

From a66e9f3b3ea04575ab719081c4782485467b99e2 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:37:41 +0100
Subject: [PATCH 10/17] fix: use one label only for FavoriteButton and adjust
 focus

---
 docs/accessibility.md                         |  2 +-
 .../__snapshots__/BookCard.test.tsx.snap      |  3 +-
 .../FavoriteButton/FavoriteButton.test.tsx    | 29 ++++++++++++++-----
 .../FavoriteButton/FavoriteButton.tsx         | 10 +++----
 frontend/app/routes/books.test.tsx            |  2 +-
 frontend/app/routes/home.test.tsx             | 12 ++++----
 frontend/e2e/favorites.spec.ts                | 29 ++++++++++++-------
 7 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index b0a3253..3095bfd 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -43,7 +43,7 @@ This section is meant as an overview of potential improvements with regard to ac
 | Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                       |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`. |
-| The favorite button changes its label ("Add …" / "Remove …") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   |                                                                                                                                                                                                                                                  |
+| The favorite button changes its label ("Add …" / "Remove …") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                         |
 | An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
 | There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   |                                                                                                                                                                                                                                                  |
 | Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                                  |
diff --git a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
index 892dfa3..fdc617b 100644
--- a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
+++ b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
@@ -55,7 +55,8 @@ exports[`BookCard > matches the snapshot 1`] = `
       </div>
     </a>
     <button
-      aria-label="Add The Blade Itself to favorites"
+      aria-disabled="false"
+      aria-label="Favorite The Blade Itself"
       aria-pressed="false"
       class="group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 not-disabled:cursor-pointer border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 size-8 absolute right-2 top-2 z-10 bg-favorite-button text-xl"
       data-slot="button"
diff --git a/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx b/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
index 7c29c9f..039faa3 100644
--- a/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
+++ b/frontend/app/components/FavoriteButton/FavoriteButton.test.tsx
@@ -42,7 +42,10 @@ describe("FavoriteButton", () => {
     renderRoutes(routes);
 
     await user.click(
-      screen.getByRole("button", { name: "Add The Blade Itself to favorites" }),
+      screen.getByRole("button", {
+        name: "Favorite The Blade Itself",
+        pressed: false,
+      }),
     );
 
     expect(
@@ -73,12 +76,16 @@ describe("FavoriteButton", () => {
     });
 
     await user.click(
-      screen.getByRole("button", { name: "Add The Blade Itself to favorites" }),
+      screen.getByRole("button", {
+        name: "Favorite The Blade Itself",
+        pressed: false,
+      }),
     );
 
     expect(
       await screen.findByRole("button", {
-        name: "Remove The Blade Itself from favorites",
+        name: "Favorite The Blade Itself",
+        pressed: true,
       }),
     ).toHaveAttribute("aria-pressed", "true");
   });
@@ -100,13 +107,15 @@ describe("FavoriteButton", () => {
     // Shown as a favorite once the user's favorites have loaded.
     await user.click(
       await screen.findByRole("button", {
-        name: "Remove The Blade Itself from favorites",
+        name: "Favorite The Blade Itself",
+        pressed: true,
       }),
     );
 
     expect(
       await screen.findByRole("button", {
-        name: "Add The Blade Itself to favorites",
+        name: "Favorite The Blade Itself",
+        pressed: false,
       }),
     ).toHaveAttribute("aria-pressed", "false");
   });
@@ -125,7 +134,10 @@ describe("FavoriteButton", () => {
     });
 
     await user.click(
-      screen.getByRole("button", { name: "Add The Blade Itself to favorites" }),
+      screen.getByRole("button", {
+        name: "Favorite The Blade Itself",
+        pressed: false,
+      }),
     );
 
     expect(
@@ -134,7 +146,10 @@ describe("FavoriteButton", () => {
       ),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "Add The Blade Itself to favorites" }),
+      screen.getByRole("button", {
+        name: "Favorite The Blade Itself",
+        pressed: false,
+      }),
     ).toHaveAttribute("aria-pressed", "false");
   });
 });
diff --git a/frontend/app/components/FavoriteButton/FavoriteButton.tsx b/frontend/app/components/FavoriteButton/FavoriteButton.tsx
index c80741d..a3a9cce 100644
--- a/frontend/app/components/FavoriteButton/FavoriteButton.tsx
+++ b/frontend/app/components/FavoriteButton/FavoriteButton.tsx
@@ -62,13 +62,11 @@ function FavoriteButton({ book }: FavoriteButtonProps) {
           favorite && "text-primary",
         )}
         onClick={() => void toggleFavorite()}
+        // Keeps keyboard focus on the button while saving
+        focusableWhenDisabled
         disabled={saving}
-        aria-label={
-          // Toggle the accessibility label based on the current state for screen readers
-          favorite
-            ? `Remove ${book.title} from favorites`
-            : `Add ${book.title} to favorites`
-        }
+        // The label stays the same, aria-pressed tells whether it is a favorite
+        aria-label={`Favorite ${book.title}`}
         aria-pressed={favorite}
       >
         <HeartIcon
diff --git a/frontend/app/routes/books.test.tsx b/frontend/app/routes/books.test.tsx
index fa38667..244f745 100644
--- a/frontend/app/routes/books.test.tsx
+++ b/frontend/app/routes/books.test.tsx
@@ -17,7 +17,7 @@ vi.mock("~/api/auth", () => ({
 
 // Every book card has a favorite button.
 const findBookCards = () =>
-  screen.findAllByRole("button", { name: /favorites/ });
+  screen.findAllByRole("button", { name: /^Favorite / });
 
 const routes = [
   { path: "/books", Component: BooksPage },
diff --git a/frontend/app/routes/home.test.tsx b/frontend/app/routes/home.test.tsx
index 44d63a5..2a154c8 100644
--- a/frontend/app/routes/home.test.tsx
+++ b/frontend/app/routes/home.test.tsx
@@ -87,7 +87,7 @@ describe("HomePage", () => {
     });
 
     expect(
-      await screen.findAllByRole("button", { name: /favorites/ }),
+      await screen.findAllByRole("button", { name: /^Favorite / }),
     ).toHaveLength(3);
     // The details page browses the same top rated list with previous/next.
     expect(
@@ -199,7 +199,7 @@ describe("HomePage", () => {
       name: "Because you like Fantasy",
     });
     expect(
-      await within(forYou).findAllByRole("button", { name: /favorites/ }),
+      await within(forYou).findAllByRole("button", { name: /^Favorite / }),
     ).toHaveLength(2);
     expect(within(forYou).queryByText(savedBook.title)).not.toBeInTheDocument();
     expect(
@@ -311,20 +311,22 @@ describe("HomePage", () => {
     });
     await user.click(
       await within(forYou).findByRole("button", {
-        name: "Add Before They Are Hanged to favorites",
+        name: "Favorite Before They Are Hanged",
+        pressed: false,
       }),
     );
 
     expect(
       await within(forYou).findByRole("button", {
-        name: "Remove Before They Are Hanged from favorites",
+        name: "Favorite Before They Are Hanged",
+        pressed: true,
       }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("heading", { name: "Because you like Fantasy" }),
     ).toBeInTheDocument();
     expect(
-      within(forYou).getAllByRole("button", { name: /favorites/ }),
+      within(forYou).getAllByRole("button", { name: /^Favorite / }),
     ).toHaveLength(2);
   });
 });
diff --git a/frontend/e2e/favorites.spec.ts b/frontend/e2e/favorites.spec.ts
index 012a5ae..955813b 100644
--- a/frontend/e2e/favorites.spec.ts
+++ b/frontend/e2e/favorites.spec.ts
@@ -5,7 +5,10 @@ test("logged out users are asked to log in to save favorites", async ({
 }) => {
   await page.goto("books");
 
-  await page.getByRole("button", { name: "to favorites" }).first().click();
+  await page
+    .getByRole("button", { name: /^Favorite / })
+    .first()
+    .click();
 
   const dialog = page.getByRole("alertdialog", {
     name: "Log in to save favorites",
@@ -22,16 +25,17 @@ test("a favorite shows on the profile and can be removed", async ({
   await page.goto("books?q=potter");
   const addButton = bookCards(page)
     .first()
-    .getByRole("button", { name: "to favorites" });
-  const title = (await addButton.getAttribute("aria-label"))
-    ?.replace("Add ", "")
-    .replace(" to favorites", "");
+    .getByRole("button", { name: /^Favorite /, pressed: false });
+  const title = (await addButton.getAttribute("aria-label"))?.replace(
+    "Favorite ",
+    "",
+  );
   expect(title).toBeTruthy();
 
   await addButton.click();
   await expect(
-    page.getByRole("button", { name: `Remove ${title} from favorites` }),
-  ).toHaveAttribute("aria-pressed", "true");
+    page.getByRole("button", { name: `Favorite ${title}`, pressed: true }),
+  ).toBeVisible();
 
   await page.getByRole("banner").getByRole("link", { name: user.name }).click();
   const favorites = page.getByRole("region", { name: "Favorite books" });
@@ -41,10 +45,10 @@ test("a favorite shows on the profile and can be removed", async ({
     page.getByRole("heading", { name: "Description" }),
   ).toBeVisible();
   await page
-    .getByRole("button", { name: `Remove ${title} from favorites` })
+    .getByRole("button", { name: `Favorite ${title}`, pressed: true })
     .click();
   await expect(
-    page.getByRole("button", { name: `Add ${title} to favorites` }),
+    page.getByRole("button", { name: `Favorite ${title}`, pressed: false }),
   ).toBeVisible();
 
   await page.goto("profile");
@@ -56,9 +60,12 @@ test("favorites give recommendations on the home page", async ({
   user: _user,
 }) => {
   await page.goto("books?q=potter");
-  await page.getByRole("button", { name: "to favorites" }).first().click();
+  await page
+    .getByRole("button", { name: /^Favorite / })
+    .first()
+    .click();
   await expect(
-    page.getByRole("button", { name: "from favorites" }).first(),
+    page.getByRole("button", { name: /^Favorite /, pressed: true }).first(),
   ).toBeVisible();
 
   await page.goto("./");

From 201e5f859f345a64c4ead219ff37ba3ae6f274f4 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:40:13 +0100
Subject: [PATCH 11/17] fix: announce errors to screen readers

---
 docs/accessibility.md                                     | 8 ++++----
 .../app/components/home/GenresSection/GenresSection.tsx   | 2 +-
 .../components/home/TopRatedSection/TopRatedSection.tsx   | 2 +-
 frontend/app/routes/books.test.tsx                        | 8 +++-----
 frontend/app/routes/books.tsx                             | 2 +-
 frontend/app/routes/profile.tsx                           | 2 +-
 6 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index 3095bfd..23e04ac 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -8,9 +8,9 @@
 
 - **Forms.** Every field has a label connected to its input, invalid fields are marked with `aria-invalid`, and help text (such as the minimum password length) is connected with `aria-describedby`. Error messages are shown with `role="alert"`, so screen readers read them out as they appear. We also set `autoComplete` on the fields, so browsers and password managers can fill them in, and the error messages tell the user what went wrong, for example that the email is already in use.
 
-- **Images and icons.** Book covers have an alternative text (`Book cover of …`), and books without a cover show a text instead. Decorative icons, such as the heart on the favorite button and loading spinners, are hidden from screen readers. The star rating is hidden as well, and replaced by text that reads, for example, "Rated 4.12 out of 5, 1234 ratings".
+- **Images and icons.** Book covers have an alternative text (`Book cover of ...`), and books without a cover show a text instead. Decorative icons, such as the heart on the favorite button and loading spinners, are hidden from screen readers. The star rating is hidden as well, and replaced by text that reads, for example, "Rated 4.12 out of 5, 1234 ratings".
 
-- **Names for icon buttons and links.** Buttons and links that only show an icon or a short text have a descriptive label, for example "Filter books", "Search for books", "View details for …" and "Go to previous book". The filter button also tells how many filters are active.
+- **Names for icon buttons and links.** Buttons and links that only show an icon or a short text have a descriptive label, for example "Filter books", "Search for books", "View details for ..." and "Go to previous book". The filter button also tells how many filters are active.
 
 - **Communicating state.** The favorite button uses `aria-pressed`, the "Read more" button on the book page uses `aria-expanded`, and disabled pagination links use `aria-disabled` and are skipped when tabbing. Loading and empty search results are announced with `role="status"`.
 
@@ -43,8 +43,8 @@ This section is meant as an overview of potential improvements with regard to ac
 | Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                       |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`. |
-| The favorite button changes its label ("Add …" / "Remove …") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                         |
-| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
+| The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                       |
+| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   | Done. Errors when loading books, genres and favorites now use `role="alert"`.                                                                                                                                                                    |
 | There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   |                                                                                                                                                                                                                                                  |
 | Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                                  |
 | We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).            |
diff --git a/frontend/app/components/home/GenresSection/GenresSection.tsx b/frontend/app/components/home/GenresSection/GenresSection.tsx
index 0821bb6..2d33b6e 100644
--- a/frontend/app/components/home/GenresSection/GenresSection.tsx
+++ b/frontend/app/components/home/GenresSection/GenresSection.tsx
@@ -34,7 +34,7 @@ function GenresSection() {
           ))}
         </ul>
       ) : error || genres.length === 0 ? (
-        <p role="status">Could not load the genres right now.</p>
+        <p role="alert">Could not load the genres right now.</p>
       ) : (
         <ul className="flex flex-wrap gap-3">
           {genres.slice(0, GENRE_LIMIT).map((genre) => (
diff --git a/frontend/app/components/home/TopRatedSection/TopRatedSection.tsx b/frontend/app/components/home/TopRatedSection/TopRatedSection.tsx
index 2d40bca..46ff277 100644
--- a/frontend/app/components/home/TopRatedSection/TopRatedSection.tsx
+++ b/frontend/app/components/home/TopRatedSection/TopRatedSection.tsx
@@ -58,7 +58,7 @@ function TopRatedSection({
               ))}
         </ul>
       ) : (
-        <p role="status">Could not load the top rated books right now.</p>
+        <p role="alert">Could not load the top rated books right now.</p>
       )}
     </RevealSection>
   );
diff --git a/frontend/app/routes/books.test.tsx b/frontend/app/routes/books.test.tsx
index 244f745..f59c961 100644
--- a/frontend/app/routes/books.test.tsx
+++ b/frontend/app/routes/books.test.tsx
@@ -339,11 +339,9 @@ describe("BooksPage", () => {
       ],
     });
 
-    expect(
-      await screen.findByText(
-        "Sorry, there was an error loading the books. Please try again later.",
-      ),
-    ).toBeInTheDocument();
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Sorry, there was an error loading the books. Please try again later.",
+    );
   });
 
   it("opens a book's details and goes back to the same search", async () => {
diff --git a/frontend/app/routes/books.tsx b/frontend/app/routes/books.tsx
index d687ff1..c08e393 100644
--- a/frontend/app/routes/books.tsx
+++ b/frontend/app/routes/books.tsx
@@ -85,7 +85,7 @@ export default function BooksPage() {
       <main>
         <SearchBar />
         <p
-          role="status"
+          role="alert"
           className="grid place-items-center min-h-[50svh] px-10 text-center"
         >
           Sorry, there was an error loading the books. Please try again later.
diff --git a/frontend/app/routes/profile.tsx b/frontend/app/routes/profile.tsx
index a27ffdf..44b7838 100644
--- a/frontend/app/routes/profile.tsx
+++ b/frontend/app/routes/profile.tsx
@@ -151,7 +151,7 @@ export default function ProfilePage() {
               ))}
             </ul>
           ) : error || !books ? (
-            <p>Could not load your favorite books. Please try again later.</p>
+            <p role="alert">Could not load your favorite books. Please try again later.</p>
           ) : books.length === 0 ? (
             <p className="text-muted-foreground">
               You have no favorite books yet.{" "}

From d7484e8ff6f2cc379d0503f75eab7cba0f287b08 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:40:25 +0100
Subject: [PATCH 12/17] docs: adjust formatting of search query params

---
 docs/choices-and-reasoning.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/choices-and-reasoning.md b/docs/choices-and-reasoning.md
index c1be4b5..c56010c 100644
--- a/docs/choices-and-reasoning.md
+++ b/docs/choices-and-reasoning.md
@@ -46,7 +46,7 @@ better-auth stores users and sessions in our own PostgreSQL database through its
 
 ## The URL holds the search state
 
-The search text, filters, sorting and page number are stored in the URL (`?q=…&genres=…&sort=…&page=…`) instead of in component state. This means a search can be shared as a link, survives a page reload, and the browser's back button works as expected. Together with Apollo Client's cache for data from the server, this covers our need for state management without a separate global store.
+The search text, filters, sorting and page number are stored in the URL (`?q=...&genres=...&sort=...&page=...`) instead of in component state. This means a search can be shared as a link, survives a page reload, and the browser's back button works as expected. Together with Apollo Client's cache for data from the server, this covers our need for state management without a separate global store.
 
 ## Pagination with page numbers
 

From 0e367ccfb1a466d32b487b0303b1b33c5548ea78 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:52:52 +0100
Subject: [PATCH 13/17] feat: add "skip to main content" link in header

---
 docs/accessibility.md              |  4 ++--
 frontend/app/root.tsx              | 20 +++++++++++++++++++-
 frontend/e2e/accessibility.spec.ts | 14 ++++++++++++++
 frontend/e2e/fixtures.ts           |  2 +-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index 23e04ac..51f4b85 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -43,9 +43,9 @@ This section is meant as an overview of potential improvements with regard to ac
 | Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                       |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`. |
-| The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                             | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                       |
+| The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                         | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                       |
 | An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   | Done. Errors when loading books, genres and favorites now use `role="alert"`.                                                                                                                                                                    |
-| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   |                                                                                                                                                                                                                                                  |
+| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   | Done. A "Skip to main content" link is the first focusable element on every page, and is shown when it gets focus.                                                                                                                               |
 | Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                                  |
 | We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).            |
 | We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index 597d491..97dd2e5 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -13,7 +13,9 @@ import { MainLoading } from "~/components/MainLoading/MainLoading";
 import type { Route } from "./+types/root";
 import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
 import { ApolloProvider } from "@apollo/client/react";
+import { buttonVariants } from "~/components/ui/Button";
 import { Toaster } from "~/components/ui/Toast";
+import { cn } from "~/lib/utils";
 import { TooltipProvider } from "~/components/ui/Tooltip";
 import { ThemeProvider, ThemeScript } from "~/lib/themeProvider";
 
@@ -67,8 +69,24 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <ThemeProvider>
           <ApolloProvider client={apolloClient}>
             <TooltipProvider>
+              <a
+                href="#main-content"
+                className={cn(
+                  buttonVariants(),
+                  "sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50",
+                )}
+              >
+                Skip to main content
+              </a>
               <Header />
-              {children}
+              {/* One target for the skip link, since each route uses its own <main> */}
+              <div
+                id="main-content"
+                tabIndex={-1}
+                className="flex flex-1 flex-col outline-none"
+              >
+                {children}
+              </div>
               <Footer />
               <ScrollRestoration />
               <Scripts />
diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index 9e9249d..615b0dc 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -87,3 +87,17 @@ for (const colorScheme of ["light", "dark"] as const) {
     });
   });
 }
+
+test("skip link moves focus past the header", async ({ page, browserName }) => {
+  test.skip(
+    browserName === "webkit",
+    "WebKit only moves focus to links with Tab when the user turns it on",
+  );
+  await page.goto("./");
+  await page.keyboard.press("Tab");
+  const skipLink = page.getByRole("link", { name: "Skip to main content" });
+  await expect(skipLink).toBeFocused();
+
+  await page.keyboard.press("Enter");
+  await expect(page.locator("#main-content")).toBeFocused();
+});
diff --git a/frontend/e2e/fixtures.ts b/frontend/e2e/fixtures.ts
index 128d562..5ab8f84 100644
--- a/frontend/e2e/fixtures.ts
+++ b/frontend/e2e/fixtures.ts
@@ -31,7 +31,7 @@ const test = base.extend<{ user: User }>({
 function bookCards(page: Page) {
   return page
     .getByRole("listitem")
-    .filter({ has: page.getByRole("button", { name: "favorites" }) });
+    .filter({ has: page.getByRole("button", { name: /^Favorite / }) });
 }
 
 async function logIn(page: Page, email: string, password: string) {

From cd4e5ec8f2e9a1f1596d336734b51336e2ddcaf2 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 23:57:01 +0100
Subject: [PATCH 14/17] fix: add reduced motion to BookCard and BookPagination

---
 docs/accessibility.md                         |  2 +-
 .../__snapshots__/BookCard.test.tsx.snap      |  2 +-
 .../app/components/BookCover/BookCover.tsx    |  2 +-
 .../BookPagination/BookPagination.test.tsx    | 27 ++++++++++++++++++-
 .../BookPagination/BookPagination.tsx         |  3 ++-
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index 51f4b85..d908433 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -46,6 +46,6 @@ This section is meant as an overview of potential improvements with regard to ac
 | The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                         | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                       |
 | An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   | Done. Errors when loading books, genres and favorites now use `role="alert"`.                                                                                                                                                                    |
 | There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   | Done. A "Skip to main content" link is the first focusable element on every page, and is shown when it gets focus.                                                                                                                               |
-| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   |                                                                                                                                                                                                                                                  |
+| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   | Done. The cover zoom uses `motion-safe:`, like the animations on the home page, and changing page scrolls to the top without animation when the user prefers reduced motion.                                                                     |
 | We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).            |
 | We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
diff --git a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
index fdc617b..62eede4 100644
--- a/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
+++ b/frontend/app/components/BookCard/__snapshots__/BookCard.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`BookCard > matches the snapshot 1`] = `
         >
           <img
             alt=""
-            class="size-full object-cover transition-transform duration-200 group-hover:scale-103"
+            class="size-full object-cover transition-transform duration-200 motion-safe:group-hover:scale-103"
             loading="lazy"
             src="https://covers.openlibrary.org/b/id/14543422-M.jpg?default=false"
           />
diff --git a/frontend/app/components/BookCover/BookCover.tsx b/frontend/app/components/BookCover/BookCover.tsx
index 3bb5131..6e7d9f8 100644
--- a/frontend/app/components/BookCover/BookCover.tsx
+++ b/frontend/app/components/BookCover/BookCover.tsx
@@ -22,7 +22,7 @@ function BookCover({
           src={book.coverImgUrl}
           alt={decorative ? "" : `Book cover of ${book.title}`}
           loading={loading}
-          className="size-full object-cover transition-transform duration-200 group-hover:scale-103"
+          className="size-full object-cover transition-transform duration-200 motion-safe:group-hover:scale-103"
         />
       </picture>
     </figure>
diff --git a/frontend/app/components/BookPagination/BookPagination.test.tsx b/frontend/app/components/BookPagination/BookPagination.test.tsx
index 8aabf9f..93c083e 100644
--- a/frontend/app/components/BookPagination/BookPagination.test.tsx
+++ b/frontend/app/components/BookPagination/BookPagination.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BookPagination } from "~/components/BookPagination/BookPagination";
@@ -15,7 +15,19 @@ const Stub = createRoutesStub([
 const currentPage = () =>
   screen.getByRole("link", { current: "page" }).textContent;
 
+function prefersReducedMotion(reduce: boolean) {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => ({ matches: reduce })),
+  );
+}
+
 describe("BookPagination", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
   it("disables Previous on the first page and Next on the last page", () => {
     const { unmount } = render(<Stub />);
 
@@ -35,6 +47,7 @@ describe("BookPagination", () => {
   });
 
   it("moves to the next or previous page and scrolls to the top", async () => {
+    prefersReducedMotion(false);
     // jsdom cannot scroll; replace window.scrollTo so it does not warn.
     const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(vi.fn());
     const user = userEvent.setup();
@@ -47,6 +60,18 @@ describe("BookPagination", () => {
     await waitFor(() => expect(currentPage()).toBe("3"));
 
     expect(scrollTo).toHaveBeenCalledTimes(2);
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: "smooth" });
+  });
+
+  it("scrolls to the top without animation when the user prefers reduced motion", async () => {
+    prefersReducedMotion(true);
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(vi.fn());
+    const user = userEvent.setup();
+    render(<Stub initialEntries={["/?page=3"]} />);
+
+    await user.click(screen.getByRole("link", { name: "Go to next page" }));
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: "instant" });
   });
 
   it("keeps the search and filters when changing page", () => {
diff --git a/frontend/app/components/BookPagination/BookPagination.tsx b/frontend/app/components/BookPagination/BookPagination.tsx
index 569195a..be34e25 100644
--- a/frontend/app/components/BookPagination/BookPagination.tsx
+++ b/frontend/app/components/BookPagination/BookPagination.tsx
@@ -45,7 +45,8 @@ function BookPagination({ totalPages }: { totalPages: number }) {
   };
 
   const handlePageChange = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    window.scrollTo({ top: 0, behavior: reduceMotion ? "instant" : "smooth" });
   };
 
   const renderPageLink = (page: number) => (

From 2df156af5e3c449da0e2ebf02de681cd0e9cc4de Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 00:16:28 +0100
Subject: [PATCH 15/17] test: add keyboard navigation check

---
 frontend/e2e/keyboard.spec.ts | 60 +++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 frontend/e2e/keyboard.spec.ts

diff --git a/frontend/e2e/keyboard.spec.ts b/frontend/e2e/keyboard.spec.ts
new file mode 100644
index 0000000..e404bd7
--- /dev/null
+++ b/frontend/e2e/keyboard.spec.ts
@@ -0,0 +1,60 @@
+import { bookCards, expect, test } from "./fixtures";
+
+test("filters and sorting work with the keyboard", async ({ page }) => {
+  await page.goto("books");
+
+  const filterButton = page.getByRole("button", { name: "Filter books" });
+  const heading = page.getByRole("heading", { name: "Filter Books" });
+  await filterButton.focus();
+  await page.keyboard.press("Enter");
+  await expect(heading).toBeVisible();
+
+  // Opening the filters moves focus to the genre field.
+  const genres = page.getByRole("combobox", { name: "Genres" });
+  await expect(genres).toBeFocused();
+  // The genres load from the API, so ArrowDown can open an empty list at first.
+  await expect(async () => {
+    await page.keyboard.press("ArrowDown");
+    await expect(genres).toHaveAttribute("aria-activedescendant", /.+/, {
+      timeout: 500,
+    });
+  }).toPass();
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL((url) => url.searchParams.has("genres"));
+
+  await expect(async () => {
+    await page.keyboard.press("Escape");
+    await expect(heading).toBeHidden({ timeout: 500 });
+  }).toPass();
+  await expect(filterButton).toBeFocused();
+
+  await page.getByRole("combobox", { name: "Sort by" }).focus();
+  await page.keyboard.press("Enter");
+  await page.getByRole("option", { name: "Rating: high to low" }).focus();
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL((url) => url.searchParams.has("sort"));
+});
+
+test("a book can be opened, saved and left with the keyboard", async ({
+  page,
+  user: _user,
+}) => {
+  await page.goto("books?q=potter");
+
+  await bookCards(page).first().getByRole("link").focus();
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL(/\/book\/\d+\?q=potter$/);
+  await expect(
+    page.getByRole("heading", { name: "Description" }),
+  ).toBeVisible();
+
+  const favoriteButton = page.getByRole("button", { name: /^Favorite / });
+  await favoriteButton.focus();
+  await page.keyboard.press("Space");
+  await expect(favoriteButton).toHaveAttribute("aria-pressed", "true");
+  await expect(favoriteButton).toBeFocused();
+
+  await page.getByRole("button", { name: "Go back to search results" }).focus();
+  await page.keyboard.press("Enter");
+  await expect(page).toHaveURL("books?q=potter");
+});

From a7224dc81c94c8dd3e7a2e5205a670389bd0a86e Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sun, 8 Nov 2026 00:16:51 +0100
Subject: [PATCH 16/17] docs: add comment about keyboard tests

---
 docs/accessibility.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/accessibility.md b/docs/accessibility.md
index d908433..5c0bf21 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -40,12 +40,12 @@ We have rectified multiple issues highlighted by Playwright.
 
 This section is meant as an overview of potential improvements with regard to accessibility, and also shows that we are aware of the downsides of our implementation. The table has a column for the status at delivery 3, and the same table will be used to show what work has been done from delivery 3 to 4.
 
-| Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                       |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`. |
-| The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                         | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                       |
-| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   | Done. Errors when loading books, genres and favorites now use `role="alert"`.                                                                                                                                                                    |
-| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   | Done. A "Skip to main content" link is the first focusable element on every page, and is shown when it gets focus.                                                                                                                               |
-| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   | Done. The cover zoom uses `motion-safe:`, like the animations on the home page, and changing page scrolls to the top without animation when the user prefers reduced motion.                                                                     |
-| We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).            |
-| We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   |                                                                                                                                                                                                                                                  |
+| Limitation                                                                                                                                                                                                                                                              | Possible improvement                                                                                                                                                                                                      | Delivery 3 | Delivery 4                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| The heading structure is inconsistent. The login, sign-up, profile and settings pages have two `<h1>` headings (the site name in the header and the page's own heading), the home page has no heading of its own, and the book title on the book page is not a heading. | Show the site name in the header as a link without a heading, and give each page one `<h1>` that describes it, for example the book title on the book page and a heading for the search page (it can be visually hidden). | Not done   | Done. The site name in the header is no longer a heading, the book title is the `<h1>` on the book page, and the search page has a visually hidden `<h1>`. The automatic Playwright checks now also check that each page has exactly one `<h1>`.                                                                                                             |
+| The favorite button changes its label ("Add ..." / "Remove ...") and also uses `aria-pressed`, so screen readers may read conflicting states. It is also disabled while saving, which can move the keyboard focus away from it.                                         | Use a fixed label together with `aria-pressed`, and use `aria-disabled` instead of `disabled` while saving.                                                                                                               | Not done   | Done. The button is always labelled "Favorite ...", and `aria-pressed` tells whether the book is a favorite. While saving, it is marked with `aria-disabled` and keeps the keyboard focus.                                                                                                                                                                   |
+| An error when loading books is announced with `role="status"`, which screen readers may read later or not at all.                                                                                                                                                       | Use `role="alert"` for errors, and keep `role="status"` for loading and empty results.                                                                                                                                    | Not done   | Done. Errors when loading books, genres and favorites now use `role="alert"`.                                                                                                                                                                                                                                                                                |
+| There is no "Skip to main content" link, so keyboard users have to tab through the header on every page.                                                                                                                                                                | Add a skip link as the first focusable element.                                                                                                                                                                           | Not done   | Done. A "Skip to main content" link is the first focusable element on every page, and is shown when it gets focus.                                                                                                                                                                                                                                           |
+| Animations, such as the cover zooming in on hover, don't respect the user's setting for reduced motion.                                                                                                                                                                 | Turn off these animations with Tailwind's `motion-reduce:` variant.                                                                                                                                                       | Not done   | Done. The cover zoom uses `motion-safe:`, like the animations on the home page, and changing page scrolls to the top without animation when the user prefers reduced motion.                                                                                                                                                                                 |
+| We have not tested the app with automatic tools, and color contrast has not been measured.                                                                                                                                                                              | Run Lighthouse and axe on all pages.                                                                                                                                                                                      | Not done   | Done. Lighthouse, which uses axe for its accessibility checks, gives 100 on all pages after we made `--muted-foreground` darker (the breadcrumb links were 4.29:1). See the [Lighthouse results](/docs/sustainability.md#lighthouse).                                                                                                                        |
+| We have not tested the main flows with only a keyboard or with a screen reader.                                                                                                                                                                                         | Test the main flows with only a keyboard and with a screen reader (VoiceOver or NVDA).                                                                                                                                    | Not done   | Done. We tabbed through every page: the order follows the layout, and every element shows a focus ring. Playwright tests search, filter, sort, opening a book, saving it as a favorite and going back using only the keyboard. Testing with a screen reader is done manually, and showed links being read correct, tabs listed (e.g. "tab 1 out of 3"), etc. |

From ac84f6934b3c59f06940cd4eeebf59a26a10aea3 Mon Sep 17 00:00:00 2001
From: Johannes Horn <johahor@stud.ntnu.no>
Date: Tue, 10 Nov 2026 21:57:26 +0100
Subject: [PATCH 17/17] test: update expected suggestion texts in books test

---
 frontend/app/routes/books.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/routes/books.test.tsx b/frontend/app/routes/books.test.tsx
index f59c961..365f8e8 100644
--- a/frontend/app/routes/books.test.tsx
+++ b/frontend/app/routes/books.test.tsx
@@ -124,7 +124,7 @@ describe("BooksPage", () => {
     ).toBeInTheDocument();
     expect(
       screen.getByText(
-        "No books found for this search. However, here are some books with similar titles:",
+        "No books found for this search. However, we found some books with similar titles.",
       ),
     ).toBeInTheDocument();
     expect(await findBookCards()).toHaveLength(3);
@@ -203,7 +203,7 @@ describe("BooksPage", () => {
     ).toBeInTheDocument();
     expect(
       screen.getByText(
-        "No books found for this search. However, here are some top-rated books matching your filters:",
+        "No books found for this search. However, we found some top-rated books matching your filters.",
       ),
     ).toBeInTheDocument();
     expect(await findBookCards()).toHaveLength(3);
@@ -242,7 +242,7 @@ describe("BooksPage", () => {
     ).toBeInTheDocument();
     expect(
       screen.getByText(
-        "No books found for this search. However, here are some top-rated books you might like:",
+        "No books found for this search. However, we found some top-rated books you might like.",
       ),
     ).toBeInTheDocument();
     expect(await findBookCards()).toHaveLength(3);