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