diff --git a/site/source/components/Simulation/Questions.tsx b/site/source/components/Simulation/Questions.tsx index 4c5e909ec..6a18347c4 100644 --- a/site/source/components/Simulation/Questions.tsx +++ b/site/source/components/Simulation/Questions.tsx @@ -27,14 +27,14 @@ export function Questions({ }: { customEndMessages?: ConversationProps['customEndMessages'] }) { - const progress = useSimulationProgress() + const { numberCurrentStep, numberSteps } = useSimulationProgress() return ( <> - +
- {progress < 1 && ( + {numberCurrentStep < numberSteps && ( Améliorez votre simulation en répondant aux questions : diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx index 9aef9730e..8b9d6e9df 100644 --- a/site/source/components/Simulation/SimulationGoals.tsx +++ b/site/source/components/Simulation/SimulationGoals.tsx @@ -40,6 +40,7 @@ export function SimulationGoals({ publique={publique} role="group" aria-labelledby="simulator-legend" + aria-live="polite" > ({ ...theme, darkMode: true })}>
diff --git a/site/source/components/conversation/TextInput.tsx b/site/source/components/conversation/TextInput.tsx index 6472ef65a..777e6f1bf 100644 --- a/site/source/components/conversation/TextInput.tsx +++ b/site/source/components/conversation/TextInput.tsx @@ -10,6 +10,7 @@ export default function TextInput({ description, title, missing, + autoFocus, }: InputProps & { value: Evaluation }) { const debouncedOnChange = useCallback(debounce(1000, onChange), []) @@ -17,6 +18,8 @@ export default function TextInput({ { debouncedOnChange(`'${value}'`) }} diff --git a/site/source/components/ui/Progress.tsx b/site/source/components/ui/Progress.tsx index 5c679b6b4..2ab12445c 100644 --- a/site/source/components/ui/Progress.tsx +++ b/site/source/components/ui/Progress.tsx @@ -3,28 +3,40 @@ import styled from 'styled-components' type ProgressProps = { progress: number + minValue?: number + maxValue?: number + step?: number } -export default function Progress({ progress }: ProgressProps) { +export default function Progress({ + progress, + minValue = 0, + maxValue = 1, + step = 1, +}: ProgressProps) { const propsBar = { showValueLabel: false, - label: 'Précision de votre simulation', - minValue: 0, - maxValue: 1, + label: 'Précisions concernant votre simulation', + minValue, + maxValue, value: progress, } + const a11yPrefixLabel = `Étape ${progress + step} sur ${String(maxValue)}, ` + const { progressBarProps, labelProps } = useProgressBar(propsBar) return ( - <> - - {propsBar.label} +
+ + {`${a11yPrefixLabel} ${propsBar.label}`} - + - +
) } diff --git a/site/source/components/utils/useNextQuestion.tsx b/site/source/components/utils/useNextQuestion.tsx index 74d3c9278..336da82e4 100644 --- a/site/source/components/utils/useNextQuestion.tsx +++ b/site/source/components/utils/useNextQuestion.tsx @@ -173,9 +173,18 @@ export const useNextQuestions = function (): Array { return nextQuestions } -export function useSimulationProgress(): number { +export function useSimulationProgress(): { + progressRatio: number + numberCurrentStep: number + numberSteps: number +} { const numberQuestionAnswered = useSelector(answeredQuestionsSelector).length const numberQuestionLeft = useNextQuestions().length - return numberQuestionAnswered / (numberQuestionAnswered + numberQuestionLeft) + return { + progressRatio: + numberQuestionAnswered / (numberQuestionAnswered + numberQuestionLeft), + numberCurrentStep: numberQuestionAnswered, + numberSteps: numberQuestionAnswered + numberQuestionLeft, + } } diff --git a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx index 05c0a61fa..acae95c3b 100644 --- a/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx +++ b/site/source/pages/gerer/declaration-revenu-independants/cotisations.tsx @@ -16,7 +16,7 @@ import { SimpleField } from '../_components/Fields' import { DéclarationRevenu } from './_components/DéclarationRevenu' export default function Cotisations() { - const progress = useSimulationProgress() + const { numberCurrentStep, numberSteps } = useSimulationProgress() const engine = useEngine() return ( @@ -100,7 +100,10 @@ export default function Cotisations() { margin: 0 -1.5rem; `} > - +
diff --git a/site/source/pages/gerer/declaration-revenu-independants/index.tsx b/site/source/pages/gerer/declaration-revenu-independants/index.tsx index 28cdc737b..dac13e225 100644 --- a/site/source/pages/gerer/declaration-revenu-independants/index.tsx +++ b/site/source/pages/gerer/declaration-revenu-independants/index.tsx @@ -88,7 +88,7 @@ function useSteps() { const step1Progress = useProgress(Step1Objectifs) const step2Progress = useProgress(Step2Objectifs) const step3Progress = useProgress(useStep3Objectifs()) - const step4Progress = useSimulationProgress() + const { progressRatio: step4Progress } = useSimulationProgress() const casExcluStep1 = useEngine().evaluate('DRI . cas exclus ') .nodeValue as boolean const casExcluStep2 = useEngine().evaluate('DRI . imposition cas exclus')