fix(a11y): associate MCQ options with the correct question (#59297)

client/src/templates/Challenges/components/multiple-choice-questions.tsx

@@ -35,8 +35,10 @@ function MultipleChoiceQuestions({
         }
       />
       {questions.map((question, questionIndex) => (
-        <div key={questionIndex}>
-          <PrismFormatted className={'line-numbers'} text={question.text} />
+        <fieldset key={questionIndex}>
+          <legend className='mcq-question-text'>
+            <PrismFormatted className={'line-numbers'} text={question.text} />
+          </legend>
           <div className='video-quiz-options'>
             {question.answers.map(({ answer }, answerIndex) => {
               const isSubmittedAnswer =
@@ -57,7 +59,7 @@ function MultipleChoiceQuestions({
                     htmlFor={`mc-question-${questionIndex}-answer-${answerIndex}`}
                   >
                     <input
-                      name='quiz'
+                      name={`mc-question-${questionIndex}`}
                       checked={selectedOptions[questionIndex] === answerIndex}
                       className='sr-only'
                       onChange={() =>
@@ -109,7 +111,7 @@ function MultipleChoiceQuestions({
             })}
           </div>
           <Spacer size='m' />
-        </div>
+        </fieldset>
       ))}
       <Spacer size='m' />
     </>

client/src/templates/Challenges/video.css

@@ -150,3 +150,10 @@ input:focus-visible + .video-quiz-input-visible {
 .mcq-prism-incorrect code {
   color: var(--danger-color);
 }
+
+/* Override the default styles of `legend` element */
+.mcq-question-text {
+  border: none;
+  color: var(--primary-color);
+  margin: 0;
+}