From 5bf1e82257ca86a75846a40a6f8f4d4ed94844db Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Mon, 2 Jun 2025 23:18:14 +0700
Subject: [PATCH] fix(a11y): make code examples in quiz accessible (#60498)

---
 client/src/templates/Challenges/quiz/show.css | 12 ++++++++++
 client/src/templates/Challenges/quiz/show.tsx | 22 ++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/client/src/templates/Challenges/quiz/show.css b/client/src/templates/Challenges/quiz/show.css
index 25275d2c54a..6e6cd8da143 100644
--- a/client/src/templates/Challenges/quiz/show.css
+++ b/client/src/templates/Challenges/quiz/show.css
@@ -9,3 +9,15 @@
 .quiz-challenge-container div[role='radiogroup'] label p:last-child {
   margin-bottom: 0;
 }
+
+/* Quiz question text and option text have the <p> tag removed
+   so the HTML can be semantically correct. 
+   This also removes the `p` styles that the text should have,
+   so we need to clone the CSS of the `p` element here. */
+.quiz-question-label,
+.quiz-answer-label {
+  line-height: 1.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  margin: 0 0 1.2rem;
+}
diff --git a/client/src/templates/Challenges/quiz/show.tsx b/client/src/templates/Challenges/quiz/show.tsx
index 0674302ad94..34b29e475df 100644
--- a/client/src/templates/Challenges/quiz/show.tsx
+++ b/client/src/templates/Challenges/quiz/show.tsx
@@ -85,6 +85,8 @@ interface ShowQuizProps {
   closeFinishQuizModal: () => void;
 }
 
+const removeParagraphTags = (text: string) => text.replace(/^<p>|<\/p>$/g, '');
+
 const ShowQuiz = ({
   challengeMounted,
   data: {
@@ -143,7 +145,12 @@ const ShowQuiz = ({
       const distractors = question.distractors.map((distractor, index) => {
         return {
           label: (
-            <PrismFormatted className='quiz-answer-label' text={distractor} />
+            <PrismFormatted
+              className='quiz-answer-label'
+              text={removeParagraphTags(distractor)}
+              useSpan
+              noAria
+            />
           ),
           value: index + 1
         };
@@ -153,14 +160,23 @@ const ShowQuiz = ({
         label: (
           <PrismFormatted
             className='quiz-answer-label'
-            text={question.answer}
+            text={removeParagraphTags(question.answer)}
+            useSpan
+            noAria
           />
         ),
         value: 4
       };
 
       return {
-        question: <PrismFormatted text={question.text} />,
+        question: (
+          <PrismFormatted
+            className='quiz-question-label'
+            text={removeParagraphTags(question.text)}
+            useSpan
+            noAria
+          />
+        ),
         answers: shuffleArray([...distractors, answer]),
         correctAnswer: answer.value
       };