Improved the HTML tags by using better semantics

src/App.tsx

@@ -101,7 +101,11 @@ function App() {
   };
 
   if (questions.length === 0) {
-    return <div>Loading...</div>;
+    return (
+      <main>
+        <h1>Loading Python Quiz...</h1>
+      </main>
+    );
   } else if (!gameStarted) {
     return <Intro onStartButtonClick={startGame} />;
   } else if (currentQuestionIndex >= questions.length) {
@@ -112,7 +116,7 @@ function App() {
 
   return (
     <>
-      <div className="main-container">
+      <main role="main" className="main-container">
         <h4 className="question-count">
           Question {currentQuestionIndex + 1}/20:
         </h4>
@@ -136,7 +140,7 @@ function App() {
             Continue
           </button>
         )}
-      </div>
+      </main>
       <Footer />
     </>
   );

src/components/Explanation.tsx

@@ -6,17 +6,14 @@ type Props = {
 };
 
 const Explanation: React.FC<Props> = ({ explanation, correctAnswer }) => {
+  const statusHeading = correctAnswer ? "Correct!" : "Incorrect!";
+  const statusClass = correctAnswer ? "correct-answer" : "incorrect-answer";
+
   return (
-    <>
-      <div className="explanation-container">
-        {correctAnswer ? (
-          <h2 className="correct-answer">Correct!</h2>
-        ) : (
-          <h2 className="incorrect-answer">Incorrect!</h2>
-        )}
-        <p>{explanation}</p>
-      </div>
-    </>
+    <section className="explanation-container" aria-live="polite">
+      <h2 className={statusClass}>{statusHeading}</h2>
+      <p>{explanation}</p>
+    </section>
   );
 };
 

src/components/Footer.tsx

@@ -2,21 +2,20 @@ import React from "react";
 
 const Footer: React.FC = () => {
   return (
-    <footer>
-      <div className="footer">
-        <p>Designed and Developed by Alexander Engström, 2024</p>
-        <p>
-          Contribute to this project on{" "}
-          <a
-            href="https://github.com/alexandengstrom/python-quizzer"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub
-          </a>
-          .
-        </p>
-      </div>
+    <footer className="footer">
+      <p>Designed and Developed by Alexander Engström, 2024</p>
+      <p>
+        Contribute to this project on{" "}
+        <a
+          href="https://github.com/alexandengstrom/python-quizzer"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Contribute to Python Quizzer on GitHub"
+        >
+          GitHub
+        </a>
+        .
+      </p>
     </footer>
   );
 };

src/components/Intro.tsx

@@ -1,43 +1,51 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { getTotalNumberOfQuestions } from "../utilities/questionFetcher";
 
 type Props = {
   onStartButtonClick: () => void;
 };
 
 const Intro: React.FC<Props> = ({ onStartButtonClick }) => {
+  const [totalQuestions, setTotalQuestions] = useState<number>(0);
+
+  useEffect(() => {
+    setTotalQuestions(getTotalNumberOfQuestions());
+  }, []);
+
   return (
-    <>
-      <div className="main-container">
-        <div className="intro-container">
-          <div className="title-container">
-            <img src="./icon-transparent.png" />
-            <h1>Welcome to the Python Quizzer!</h1>
-          </div>
+    <main className="main-container">
+      <section className="intro-container">
+        <header className="title-container">
+          <img src="./icon-transparent.png" alt="Python Quizzer Icon" />
+          <h1>Welcome to the Python Quizzer!</h1>
+        </header>
 
+        <article>
           <p>
             Get ready for a bit of Python fun. In total, we have{" "}
-            {getTotalNumberOfQuestions()} Python questions available. You will
-            get <b>20 random questions</b> each round. Each question contain a
-            code snippet and six possible answers, your job is to choose the
-            correct answer!
+            {totalQuestions > 0 ? totalQuestions : "...loading"} Python
+            questions available. You will get{" "}
+            <strong>20 random questions</strong> each round. Each question
+            contains a code snippet and six possible answers; your job is to
+            choose the correct one!
           </p>
           <p>
             These questions will start easy and gradually get trickier. After
             each question, we'll explain how the code works.{" "}
-            <i>Learning Python while having fun</i>, what could be better?
+            <em>Learning Python while having fun</em>, what could be better?
           </p>
           <p>
-            Feel free to tackle the problems your way but we suggest making your
-            best guess first. If you're curious, copy the code and play around
-            with it. Python is all about experimenting and learning as you go.
+            Feel free to tackle the problems your way, but we suggest making
+            your best guess first. If you're curious, copy the code and play
+            around with it. Python is all about experimenting and learning as
+            you go.
           </p>
           <button className="wide-button" onClick={onStartButtonClick}>
             Ready to roll? Start the quiz!
           </button>
-        </div>
-      </div>
-    </>
+        </article>
+      </section>
+    </main>
   );
 };
 

src/components/Options.tsx

@@ -16,7 +16,6 @@ const Options: React.FC<Props> = ({ options, answer, onOptionClick }) => {
   }, [options]);
 
   const onOptionChosen = (key: string) => {
-    console.log(key);
     setChosenAnswer(key);
     onOptionClick(key);
   };
@@ -35,13 +34,23 @@ const Options: React.FC<Props> = ({ options, answer, onOptionClick }) => {
 
   return (
     <>
-      <div className="options-container">
+      <div
+        className="options-container"
+        role="radiogroup"
+        aria-labelledby="questionOptions"
+      >
         {Object.entries(options).map(([key, value]) => (
-          <div key={key} className="option">
+          <div
+            key={key}
+            className="option"
+            role="radio"
+            aria-checked={chosenAnswer === key}
+          >
             <button
               className={getButtonClassName(key)}
               onClick={() => onOptionChosen(key)}
               disabled={chosenAnswer !== null}
+              aria-label={`Option ${key.toUpperCase()}`}
             >
               <h3>{key.toUpperCase() + ")"}</h3>
               <p>{value}</p>

src/components/Question.tsx

@@ -26,18 +26,21 @@ const Question: React.FC<Props> = ({ question, codeSnippet }) => {
   }, []);
 
   return (
-    <>
-      <div className="question-container">
-        <h2>{question}</h2>
+    <article className="question-container" aria-labelledby="questionHeading">
+      <header>
+        <h2 id="questionHeading">{question}</h2>
+      </header>
+
+      <section aria-labelledby="codeSnippetHeading">
         <SyntaxHighlighter
           className="code-snippet"
           language="python"
           style={isDarkMode ? vs2015 : docco}
         >
           {codeSnippet}
         </SyntaxHighlighter>
-      </div>
-    </>
+      </section>
+    </article>
   );
 };
 

src/components/Score.tsx

@@ -58,49 +58,49 @@ const Score: React.FC<Props> = ({ score, restart }) => {
         "Not a single point, but don't fret! Every coding hero begins with zero. Time to hit those Python books!"
       );
     }
-  });
+  }, [score]);
 
   return (
-    <>
-      <div className="main-container">
-        <div className="score-container">
-          <h1>{score}/20 points</h1>
+    <main className="main-container">
+      <section className="score-container">
+        <h1>Your Score: {score}/20 Points</h1>
+        <p>
+          <strong>{message}</strong>
+        </p>
+        {score < 10 && (
           <p>
-            <strong>{message}</strong>
-          </p>
-          {score < 10 && (
-            <p>
-              Enhance your Python skills by exploring the official
-              documentation. It's a great resource to deepen your understanding
-              and improve your performance.{" "}
-              <a
-                href="https://docs.python.org/3/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Discover more here!
-              </a>
-            </p>
-          )}
-
-          <p>
-            Do you want to create your own questions or did you find any errors
-            in the quiz? Contribute to this project on{" "}
+            Enhance your Python skills by exploring the official documentation.
+            It's a great resource to deepen your understanding and improve your
+            performance.{" "}
             <a
-              href="https://github.com/alexandengstrom/python-quizzer"
+              href="https://docs.python.org/3/"
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="Discover more about Python documentation"
             >
-              GitHub
+              Discover more here!
             </a>
-            .
           </p>
-          <button className="wide-button" onClick={restart}>
-            Restart the quiz!
-          </button>
-        </div>
-      </div>
-    </>
+        )}
+
+        <p>
+          Do you want to create your own questions or did you find any errors in
+          the quiz? Contribute to this project on{" "}
+          <a
+            href="https://github.com/alexandengstrom/python-quizzer"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Contribute to Python Quizzer on GitHub"
+          >
+            GitHub
+          </a>
+          .
+        </p>
+        <button className="wide-button" onClick={restart}>
+          Restart the quiz!
+        </button>
+      </section>
+    </main>
   );
 };
 

src/main.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import Footer from "./components/Footer.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);