Improve html accessibility

src/App.tsx

@@ -4,11 +4,15 @@ import Footer from "./components/Footer";
 
 function App() {
   return (
-    <main>
+    <>
       <HeroPage />
-      <CharactersPage />
+
+      <main>
+        <CharactersPage />
+      </main>
+
       <Footer />
-    </main>
+    </>
   );
 }
 

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");
   });
 

src/components/CharacterCardSmall.tsx

@@ -24,11 +24,15 @@ export default function CharacterCardSmall({
         <img src={CardShape} alt="" className="card-shape" />
 
         <div className="character-info">
-          <img src={image} alt="character image" className="character-image" />
+          <img src={image} alt={name} className="character-image" />
           <p className="character-name">{name}</p>
 
           <div className="card-buttons">
-            <button type="button" className="details-button" onClick={onDetails}>
+            <button
+              type="button"
+              className="details-button"
+              onClick={onDetails}
+            >
               Details
             </button>
           </div>

src/components/CharacterDetailCard.tsx

@@ -150,10 +150,10 @@ export default function CharacterDetailCard({
           </div>
           <div className="origin-section">
             <img src={Globe} alt="globe-icon" />
-            <span>
+            <div>
               <p>Origin</p>
               {character.origin.name}
-            </span>
+            </div>
           </div>
 
           <div className="detail-episodes-section">

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)}
       />

src/components/__snapshots__/CharacterCardSmall.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`CharacterCardSmall > matches snapshot 1`] = `
         class="character-info"
       >
         <img
-          alt="character image"
+          alt="Rick Sanchez"
           class="character-image"
           src="rick.jpg"
         />

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(
   <StrictMode>

src/pages/CharactersPage.tsx

@@ -185,10 +185,10 @@ export default function CharactersPage() {
   }
 
   return (
-    <section className="content">
+    <div className="content">
       <section className="search-area" aria-label="Characters">
         <Searchbar searchQuery={searchQuery} onSearchChange={setSearchQuery} />
-        <section className="character-cards">
+        <div className="character-cards">
           {filteredCharacters.map((character) => (
             <CharacterCardSmall
               key={character.id}
@@ -199,18 +199,18 @@ export default function CharactersPage() {
               onDetails={() => setSelectedCharacter(character)}
             />
           ))}
-        </section>
+        </div>
       </section>
-      <div className="filter-area" aria-label="Filters">
+      <aside className="filter-area" aria-label="Character filters">
         <details className="filter-dropdown">
           <summary>
             Filters
             <span className="filter-dropdown-icon" aria-hidden="true" />
           </summary>
           <div className="filter-options">{renderFilterOptions()}</div>
         </details>
-        <aside className="filter-sidebar">{renderFilterOptions()}</aside>
-      </div>
+        <div className="filter-sidebar">{renderFilterOptions()}</div>
+      </aside>
       {selectedCharacter && (
         <CharacterDetailCard
           character={selectedCharacter}
@@ -221,6 +221,6 @@ export default function CharactersPage() {
           onToggleFavorite={() => handleToggleFavorite(selectedCharacter.id)}
         />
       )}
-    </section>
+    </div>
   );
 }

src/pages/HeroPage.tsx

@@ -5,8 +5,8 @@ import "./HeroPage.css";
 
 function HeroPage() {
   return (
-    <section className="hero">
-      <section className="hero-content">
+    <header className="hero">
+      <div className="hero-content">
         <div className="hero-text">
           <img className="logo" src={Logo} alt="Rick and Morty" />
 
@@ -31,8 +31,8 @@ function HeroPage() {
           src={HeroImage}
           alt="Rick and Morty characters"
         />
-      </section>
-    </section>
+      </div>
+    </header>
   );
 }
 

src/utils/filterCharacters.ts

@@ -4,8 +4,11 @@ export type FilterCategory = "favorite" | "gender" | "species" | "status";
 export type SelectedFilters = Record<FilterCategory, string[]>;
 
 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
+    );
   });
 }