fix(a11y): make code examples in quiz accessible (freeCodeCamp#60498)

Author: huyenltnguyen

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;
+}

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