From 1c2b2c115683fdd3cf7dfaf35d9ce7e8827ad2f2 Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:34:52 +0200 Subject: [PATCH 1/8] fix: improve character card accessibility --- src/components/CharacterCardSmall.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/CharacterCardSmall.tsx b/src/components/CharacterCardSmall.tsx index 358b2c8..28aed51 100644 --- a/src/components/CharacterCardSmall.tsx +++ b/src/components/CharacterCardSmall.tsx @@ -24,11 +24,15 @@ export default function CharacterCardSmall({
- character image + {name}

{name}

-
From 46e8c544e3c8e59cfc1d97597947c9d7f92ab0cd Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:35:12 +0200 Subject: [PATCH 2/8] fix: improve character detail accessibility --- src/components/CharacterDetailCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CharacterDetailCard.tsx b/src/components/CharacterDetailCard.tsx index 8b60415..d0e2a8c 100644 --- a/src/components/CharacterDetailCard.tsx +++ b/src/components/CharacterDetailCard.tsx @@ -150,10 +150,10 @@ export default function CharacterDetailCard({
globe-icon - +

Origin

{character.origin.name} - +
From 2401d32ebb0d4c5ad2f1de7f5b09836b9a70a30c Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:35:27 +0200 Subject: [PATCH 3/8] fix: add accessible labels to search bar --- src/components/Searchbar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx index b123de9..3d47b79 100644 --- a/src/components/Searchbar.tsx +++ b/src/components/Searchbar.tsx @@ -18,6 +18,7 @@ export default function Searchbar({ name="search" className="searchfield" placeholder="Enter a character name..." + aria-label="Search characters" value={searchQuery} onChange={(event) => onSearchChange(event.target.value)} /> From 4b23a9580534d48b3c240c8459875e9f7b01eee1 Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:35:53 +0200 Subject: [PATCH 4/8] refactor: improve semantic HTML in characters page --- src/pages/CharactersPage.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/CharactersPage.tsx b/src/pages/CharactersPage.tsx index bb82d10..f6edca4 100644 --- a/src/pages/CharactersPage.tsx +++ b/src/pages/CharactersPage.tsx @@ -185,10 +185,10 @@ export default function CharactersPage() { } return ( -
+
-
+
{filteredCharacters.map((character) => ( setSelectedCharacter(character)} /> ))} -
+
-
+
+
{renderFilterOptions()}
+ {selectedCharacter && ( handleToggleFavorite(selectedCharacter.id)} /> )} - +
); } From 7ddba9194d9e1caaa23b4a327123ff8f0954726c Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:36:13 +0200 Subject: [PATCH 5/8] refactor: improve semantic HTML in hero page --- src/pages/HeroPage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/HeroPage.tsx b/src/pages/HeroPage.tsx index c1ac4a1..3c163de 100644 --- a/src/pages/HeroPage.tsx +++ b/src/pages/HeroPage.tsx @@ -5,8 +5,8 @@ import "./HeroPage.css"; function HeroPage() { return ( -
-
+
+
Rick and Morty @@ -31,8 +31,8 @@ function HeroPage() { src={HeroImage} alt="Rick and Morty characters" /> -
-
+ + ); } From 7f151e287b371864c30397d4d9cd7e4f27e04b53 Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:36:47 +0200 Subject: [PATCH 6/8] refactor: improve page structure in App --- src/App.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9510877..2b680fc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,11 +4,15 @@ import Footer from "./components/Footer"; function App() { return ( -
+ <> - + +
+ +
+
-
+ ); } From 3733b730e6829f76ed0ce9e33e85c321d87532d1 Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 15:37:23 +0200 Subject: [PATCH 7/8] style: format project with Prettier --- src/main.tsx | 4 ++-- src/utils/filterCharacters.ts | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index b273eb5..d0a8775 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,10 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import "./index.css"; import App from "./App.tsx"; -const queryClient = new QueryClient() +const queryClient = new QueryClient(); createRoot(document.getElementById("root")!).render( diff --git a/src/utils/filterCharacters.ts b/src/utils/filterCharacters.ts index 34b612c..e391cb6 100644 --- a/src/utils/filterCharacters.ts +++ b/src/utils/filterCharacters.ts @@ -4,8 +4,11 @@ export type FilterCategory = "favorite" | "gender" | "species" | "status"; export type SelectedFilters = Record; export function filterCharacters( -// Takes in all characters, the value in the search field and the chosen filters -characters: Character[], searchQuery: string, selectedFilters: SelectedFilters, favoriteCharacterIds: number[], + // Takes in all characters, the value in the search field and the chosen filters + characters: Character[], + searchQuery: string, + selectedFilters: SelectedFilters, + favoriteCharacterIds: number[], ): Character[] { return characters.filter((character) => { //Checks whether each character's name matches with the search and if the character's gender, specie or status is checked off in the filter @@ -29,6 +32,12 @@ characters: Character[], searchQuery: string, selectedFilters: SelectedFilters, selectedFilters.status.length === 0 || selectedFilters.status.includes(character.status.toLowerCase()); //Returns the result of the checks mentioned above - return matchesSearch && matchesFavorite && matchesGender && matchesSpecies && matchesStatus; + return ( + matchesSearch && + matchesFavorite && + matchesGender && + matchesSpecies && + matchesStatus + ); }); } From f3812b43829a378e939a7275a965b4b8a9bb594a Mon Sep 17 00:00:00 2001 From: mina Date: Fri, 18 Sep 2026 16:43:10 +0200 Subject: [PATCH 8/8] test: update character card tests and snapshot --- src/components/CharacterCardSmall.test.tsx | 2 +- src/components/__snapshots__/CharacterCardSmall.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CharacterCardSmall.test.tsx b/src/components/CharacterCardSmall.test.tsx index b75859f..4bb2c3b 100644 --- a/src/components/CharacterCardSmall.test.tsx +++ b/src/components/CharacterCardSmall.test.tsx @@ -34,7 +34,7 @@ describe("CharacterCardSmall", () => { />, ); - const image = screen.getByAltText("character image"); + const image = screen.getByAltText("Rick Sanchez"); expect(image).toHaveAttribute("src", "rick.jpg"); }); diff --git a/src/components/__snapshots__/CharacterCardSmall.test.tsx.snap b/src/components/__snapshots__/CharacterCardSmall.test.tsx.snap index a9a10af..75e79e3 100644 --- a/src/components/__snapshots__/CharacterCardSmall.test.tsx.snap +++ b/src/components/__snapshots__/CharacterCardSmall.test.tsx.snap @@ -17,7 +17,7 @@ exports[`CharacterCardSmall > matches snapshot 1`] = ` class="character-info" > character image