diff --git a/src/components/RecordingDialog.tsx b/src/components/RecordingDialog.tsx index dafe32746..34d5e0afb 100644 --- a/src/components/RecordingDialog.tsx +++ b/src/components/RecordingDialog.tsx @@ -72,6 +72,9 @@ const RecordingDialog = ({ ); const countdownStages: CountdownStage[] = useMemo( () => [ + // Empty string state added to countdown because aria-live role region + // reads dynamic changes to region and not the initial contents. + { value: "", duration: 1, fontSize: "8xl" }, { value: 3, duration: 500, fontSize: "8xl" }, { value: 2, duration: 500, fontSize: "8xl" }, { value: 1, duration: 500, fontSize: "8xl" }, @@ -241,6 +244,17 @@ const RecordingDialog = ({ return recordingsToCapture - recordingsRemaining; }, [recordingsRemaining, recordingsToCapture]); + const recordingText = useMemo(() => { + if (recordingStatus === RecordingStatus.Recording) { + return intl.formatMessage({ id: "recording" }); + } else if (recordingStatus === RecordingStatus.Countdown) { + return countdownStages[countdownStageIndex].value; + } else if (recordingStatus === RecordingStatus.Done) { + return intl.formatMessage({ id: "recording-complete" }); + } + return ""; + }, [countdownStageIndex, countdownStages, intl, recordingStatus]); + return ( - {recordingStatus === RecordingStatus.Recording && ( - - - - )} - {recordingStatus === RecordingStatus.Countdown && ( - - {countdownStages[countdownStageIndex].value} - - )} - {recordingStatus === RecordingStatus.Done && ( - - - - )} + + {recordingText} +