From 4853e9cee61b99887b8535f0ba1dab831c27da12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 25 Oct 2026 09:15:05 +0100 Subject: [PATCH] fix(mental-health): focus the first question once its wording has loaded Each step focuses its question, but the first step's question only exists once the language's wording chunk has arrived; the focus ran while the step still showed its loading state and was never moved again, so a keyboard or screen reader user started on the page body. --- .../mental-health/check-in-wizard.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/mental-health/check-in-wizard.tsx b/src/components/mental-health/check-in-wizard.tsx index 75a832828..ce8d91891 100644 --- a/src/components/mental-health/check-in-wizard.tsx +++ b/src/components/mental-health/check-in-wizard.tsx @@ -67,6 +67,18 @@ interface StepWording { lang: string; } +/** + * Each step focuses its question. The first step's question exists only once + * the wording's chunk has loaded, so the focus also follows that. + */ +function useStepFocus(step: number, hasWording: boolean) { + const headingRef = useRef(null); + useEffect(() => { + headingRef.current?.focus({ preventScroll: false }); + }, [step, hasWording]); + return headingRef; +} + export function CheckInWizard({ instrument, onSubmit, @@ -99,10 +111,7 @@ export function CheckInWizard({ const onFunctional = step === steps.functionalStep; const questionIndex = step - 1; - const headingRef = useRef(null); - useEffect(() => { - headingRef.current?.focus({ preventScroll: false }); - }, [step]); + const headingRef = useStepFocus(step, Boolean(wording)); function advance() { if (fromReview && isComplete(items)) {