From cbb3dbc4f52089d4b22e4fbc191adb0c2cdaed18 Mon Sep 17 00:00:00 2001
From: Xavier Desoindre <xavier.desoindre@hotmail.fr>
Date: Tue, 10 Dec 2024 18:22:56 +0100
Subject: [PATCH] chore: review accessibility on quiz (#759)

---
 src/components/outils/quiz/Answer.tsx        |   1 -
 src/components/outils/quiz/QuizSimulator.tsx | 288 ++++++++++---------
 2 files changed, 147 insertions(+), 142 deletions(-)

diff --git a/src/components/outils/quiz/Answer.tsx b/src/components/outils/quiz/Answer.tsx
index 80d06dc1b..8a763b883 100644
--- a/src/components/outils/quiz/Answer.tsx
+++ b/src/components/outils/quiz/Answer.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import classNames from 'classnames'
-import React from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { ComputedEquivalent } from 'types/equivalent'
 import { getName } from 'utils/Equivalent/equivalent'
diff --git a/src/components/outils/quiz/QuizSimulator.tsx b/src/components/outils/quiz/QuizSimulator.tsx
index d4bf0d3ea..5d49f3f64 100644
--- a/src/components/outils/quiz/QuizSimulator.tsx
+++ b/src/components/outils/quiz/QuizSimulator.tsx
@@ -55,154 +55,160 @@ const QuizSimulator = () => {
 
   return (
     <>
-      <div className={styles.header} ref={ref} tabIndex={-1}>
-        {question > 0 && config && (
-          <button
-            data-testid='quiz-previous-button'
-            className={styles.previousButton}
-            onClick={() => {
-              setAnswer(undefined)
-              setQuestion(question - 1)
-              setDisplayMore(false)
-              track('Quiz', 'Previous', question.toString())
-            }}>
-            <FullArrowLeftIcon />
-            {t('previous')}
-          </button>
-        )}
-        <p className={styles.question} data-testid='quiz-header'>
-          {config ? (
-            <>
-              {t('question')} {question + 1} / 10
-            </>
-          ) : (
-            t('finished')
-          )}
-        </p>
-        <p className={styles.title} data-testid='quiz-title'>
-          {config
-            ? t.rich('title')
-            : t.rich('score', { score: score.current.reduce((acc, current) => acc + current, 0) })}
-        </p>
-        {config && (
-          <p
-            className={classNames(styles.tag, {
-              [styles.correct]: answer === config.answer,
-              [styles.missed]: answer && answer !== config.answer,
-            })}
-            data-testid='quiz-question-result'
-            role='status'>
-            {answer ? (
-              answer === config.answer ? (
-                t.rich('correct')
-              ) : (
+      <form>
+        <fieldset>
+          <div className={styles.header} ref={ref} tabIndex={-1}>
+            {question > 0 && config && (
+              <button
+                data-testid='quiz-previous-button'
+                className={styles.previousButton}
+                onClick={() => {
+                  setAnswer(undefined)
+                  setQuestion(question - 1)
+                  setDisplayMore(false)
+                  track('Quiz', 'Previous', question.toString())
+                }}>
+                <FullArrowLeftIcon />
+                {t('previous')}
+              </button>
+            )}
+            <p className={styles.question} data-testid='quiz-header'>
+              {config ? (
                 <>
-                  {t.rich('missed')} {config.answer} !
+                  {t('question')} {question + 1} / 10
                 </>
-              )
-            ) : (
-              t('tag')
+              ) : (
+                t('finished')
+              )}
+            </p>
+            <legend className={styles.title} data-testid='quiz-title'>
+              {config
+                ? t.rich('title')
+                : t.rich('score', { score: score.current.reduce((acc, current) => acc + current, 0) })}
+            </legend>
+            {config && (
+              <p
+                className={classNames(styles.tag, {
+                  [styles.correct]: answer === config.answer,
+                  [styles.missed]: answer && answer !== config.answer,
+                })}
+                data-testid='quiz-question-result'
+                role='status'>
+                {answer ? (
+                  answer === config.answer ? (
+                    t.rich('correct')
+                  ) : (
+                    <>
+                      {t.rich('missed')} {config.answer} !
+                    </>
+                  )
+                ) : (
+                  t('tag')
+                )}
+              </p>
             )}
-          </p>
-        )}
-      </div>
-      {config ? (
-        <div className={answer && !displayMore ? styles.reduced : undefined}>
-          <Question
-            question={config}
-            nextQuestion={() => {
-              score.current[question] = answer === config.answer ? 1 : 0
-              setNavigated(true)
-              setAnswer(undefined)
-              setQuestion(question + 1)
-              setDisplayMore(false)
-            }}
-            answer={answer}
-            setAnswer={setAnswer}
-            ref={nextRef}
-            displayMore={displayMore}
-          />
-        </div>
-      ) : (
-        <>
-          <div className={styles.result}>
-            <Image src='/images/tools-quiz-end.svg' alt='' width={220} height={180} data-testid='quiz-success' />
-            <Button
-              data-testid='quiz-restart-button'
-              priority='outline'
-              onClick={() => {
-                setAnswer(undefined)
-                setQuestion(0)
-                track('Quiz', 'Restart', 'quiz_restart_button')
-              }}>
-              {t('restart')}
-            </Button>
-          </div>
-          <QuizInfography />
-          <div className={styles.ressources}>
-            <p>{t('read-more')}</p>
-            <Resource
-              image='/images/fiches.png'
-              text='fiches'
-              href='/kit/fiches.zip'
-              withLink='Télécharger les 20 fiches'
-              tracking='Quiz'
-            />
-            <Resource
-              image='/images/tools-transport.svg'
-              text='ico2-transport'
-              href='https://impactco2.fr/outils/transport'
-              withLink='Simulateur Transports'
-              tracking='Quiz'
-            />
-            <Resource
-              image='/images/tools-fruitsetlegumes.svg'
-              text='ico2-fruitsetlegumes'
-              href='https://impactco2.fr/outils/fruitsetlegumes'
-              withLink='Fruits et légumes de saison'
-              tracking='Quiz'
-            />
-            <Resource
-              image='/images/lvao.png'
-              text='lvao'
-              href='https://quefairedemesobjets.ademe.fr/?mtm_campaign=impactCO2'
-              withLink='Longue Vie Aux Objets'
-              tracking='Quiz'
-            />
-            <Resource
-              image='/images/ngc.png'
-              text='ngc'
-              href='https://nosgestesclimat.fr/'
-              withLink='Nos Gestes Climat'
-              tracking='Quiz'
-            />
           </div>
-          <div className={shareableStyles.separator} />
-        </>
-      )}
-      {answer && (
-        <button
-          className={styles.moreButton}
-          onClick={() => {
-            setDisplayMore(!displayMore)
-            track('Quiz', displayMore ? 'HideMore' : 'DisplayMore', (question + 1).toString())
-            if (displayMore && ref.current) {
-              ref.current.scrollIntoView({ behavior: 'smooth' })
-            }
-          }}
-          data-testid='quiz-more-info-button'
-          aria-expanded={displayMore}
-          aria-controls='quiz-more-info'>
-          {displayMore ? (
-            <>
-              {t('less')} <DropdownArrowUpIcon />
-            </>
+          {config ? (
+            <div className={answer && !displayMore ? styles.reduced : undefined}>
+              <Question
+                question={config}
+                nextQuestion={() => {
+                  score.current[question] = answer === config.answer ? 1 : 0
+                  setNavigated(true)
+                  setAnswer(undefined)
+                  setQuestion(question + 1)
+                  setDisplayMore(false)
+                }}
+                answer={answer}
+                setAnswer={setAnswer}
+                ref={nextRef}
+                displayMore={displayMore}
+              />
+            </div>
           ) : (
             <>
-              {t('more')} <DropdownArrowDownIcon />
+              <div className={styles.result}>
+                <Image src='/images/tools-quiz-end.svg' alt='' width={220} height={180} data-testid='quiz-success' />
+                <Button
+                  data-testid='quiz-restart-button'
+                  priority='outline'
+                  onClick={() => {
+                    setAnswer(undefined)
+                    setQuestion(0)
+                    track('Quiz', 'Restart', 'quiz_restart_button')
+                  }}>
+                  {t('restart')}
+                </Button>
+              </div>
+              <QuizInfography />
+              <div className={styles.ressources}>
+                <p>{t('read-more')}</p>
+                <Resource
+                  image='/images/fiches.png'
+                  text='fiches'
+                  href='/kit/fiches.zip'
+                  withLink='Télécharger les 20 fiches'
+                  tracking='Quiz'
+                />
+                <Resource
+                  image='/images/tools-transport.svg'
+                  text='ico2-transport'
+                  href='https://impactco2.fr/outils/transport'
+                  withLink='Simulateur Transports'
+                  tracking='Quiz'
+                />
+                <Resource
+                  image='/images/tools-fruitsetlegumes.svg'
+                  text='ico2-fruitsetlegumes'
+                  href='https://impactco2.fr/outils/fruitsetlegumes'
+                  withLink='Fruits et légumes de saison'
+                  tracking='Quiz'
+                />
+                <Resource
+                  image='/images/lvao.png'
+                  text='lvao'
+                  href='https://quefairedemesobjets.ademe.fr/?mtm_campaign=impactCO2'
+                  withLink='Longue Vie Aux Objets'
+                  tracking='Quiz'
+                />
+                <Resource
+                  image='/images/ngc.png'
+                  text='ngc'
+                  href='https://nosgestesclimat.fr/'
+                  withLink='Nos Gestes Climat'
+                  tracking='Quiz'
+                />
+              </div>
+              <div className={shareableStyles.separator} />
             </>
-          )}
-        </button>
+          )}{' '}
+        </fieldset>
+      </form>
+      {answer && (
+        <div role='alert' aria-live='polite'>
+          <button
+            className={styles.moreButton}
+            onClick={() => {
+              setDisplayMore(!displayMore)
+              track('Quiz', displayMore ? 'HideMore' : 'DisplayMore', (question + 1).toString())
+              if (displayMore && ref.current) {
+                ref.current.scrollIntoView({ behavior: 'smooth' })
+              }
+            }}
+            data-testid='quiz-more-info-button'
+            aria-expanded={displayMore}
+            aria-controls='quiz-more-info'>
+            {displayMore ? (
+              <>
+                {t('less')} <DropdownArrowUpIcon />
+              </>
+            ) : (
+              <>
+                {t('more')} <DropdownArrowDownIcon />
+              </>
+            )}
+          </button>
+        </div>
       )}
     </>
   )