Skip to content

Commit

Permalink
chore: review accessibility on quiz (#759)
Browse files Browse the repository at this point in the history
  • Loading branch information
@desoindx
desoindx authored Dec 10, 2024
1 parent 69df8a5 commit cbb3dbc
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 142 deletions.
1 change: 0 additions & 1 deletion src/components/outils/quiz/Answer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
288 changes: 147 additions & 141 deletions src/components/outils/quiz/QuizSimulator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
</>
)
Expand Down

0 comments on commit cbb3dbc

Please sign in to comment.