Merge pull request #8095 from espoon-voltti/screen-read-application-errors

Ruudunlukija lukee hakemuksen tarkistuksen virheet

Author: terolaakso-reaktor

frontend/src/citizen-frontend/applications/editor/ApplicationEditor.tsx

@@ -78,6 +78,7 @@ export type ApplicationFormProps = {
   ) => void
   errors: ApplicationFormDataErrors
   verificationRequested: boolean
+  alertTrigger: number
   isInvalidDate: ((localDate: LocalDate) => string | null) | undefined
   minDate: LocalDate
   maxDate: LocalDate
@@ -161,6 +162,7 @@ const ApplicationEditorContent = React.memo(function DaycareApplicationEditor({
     useState<boolean>(false)
   const [verifying, setVerifying] = useState<boolean>(false)
   const [verified, setVerified] = useState<boolean>(false)
+  const [verificationCount, setVerificationCount] = useState<number>(0)
   const [allowOtherGuardianAccess, setAllowOtherGuardianAccess] =
     useState<boolean>(application.allowOtherGuardianAccess)
 
@@ -216,6 +218,7 @@ const ApplicationEditorContent = React.memo(function DaycareApplicationEditor({
   const onVerify = () => {
     setErrors(validateApplication(application, formData, terms))
     setVerificationRequested(true)
+    setVerificationCount((prev) => prev + 1)
 
     if (!applicationHasErrors(errors)) {
       setVerified(false)
@@ -328,6 +331,7 @@ const ApplicationEditorContent = React.memo(function DaycareApplicationEditor({
             setFormData={setFormData}
             errors={errors}
             verificationRequested={verificationRequested}
+            alertTrigger={verificationCount}
             isInvalidDate={isInvalidDate}
             minDate={minDate}
             maxDate={maxDate}
@@ -341,6 +345,7 @@ const ApplicationEditorContent = React.memo(function DaycareApplicationEditor({
             setFormData={setFormData}
             errors={errors}
             verificationRequested={verificationRequested}
+            alertTrigger={verificationCount}
             terms={terms}
             isInvalidDate={isInvalidDate}
             minDate={minDate}
@@ -355,6 +360,7 @@ const ApplicationEditorContent = React.memo(function DaycareApplicationEditor({
             setFormData={setFormData}
             errors={errors}
             verificationRequested={verificationRequested}
+            alertTrigger={verificationCount}
             terms={terms}
             isInvalidDate={isInvalidDate}
             minDate={minDate}

frontend/src/citizen-frontend/applications/editor/ApplicationFormClub.tsx

@@ -19,6 +19,7 @@ export default React.memo(function ApplicationFormClub({
   setFormData,
   errors,
   verificationRequested,
+  alertTrigger,
   isInvalidDate,
   minDate,
   maxDate,
@@ -34,6 +35,7 @@ export default React.memo(function ApplicationFormClub({
         firstName={application.form.child.person.firstName}
         lastName={application.form.child.person.lastName}
         errors={verificationRequested ? errors : undefined}
+        alertTrigger={alertTrigger}
       />
 
       <ServiceNeedSection

frontend/src/citizen-frontend/applications/editor/ApplicationFormDaycare.tsx

@@ -25,6 +25,7 @@ export default React.memo(function ApplicationFormDaycare({
   setFormData,
   errors,
   verificationRequested,
+  alertTrigger,
   isInvalidDate,
   minDate,
   maxDate
@@ -59,6 +60,7 @@ export default React.memo(function ApplicationFormDaycare({
         firstName={application.form.child.person.firstName}
         lastName={application.form.child.person.lastName}
         errors={verificationRequested ? errors : undefined}
+        alertTrigger={alertTrigger}
       />
 
       <ServiceNeedSection

frontend/src/citizen-frontend/applications/editor/ApplicationFormPreschool.tsx

@@ -25,6 +25,7 @@ export default React.memo(function ApplicationFormPreschool({
   setFormData,
   errors,
   verificationRequested,
+  alertTrigger,
   isInvalidDate,
   minDate,
   maxDate,
@@ -66,6 +67,7 @@ export default React.memo(function ApplicationFormPreschool({
         firstName={application.form.child.person.firstName}
         lastName={application.form.child.person.lastName}
         errors={verificationRequested ? errors : undefined}
+        alertTrigger={alertTrigger}
       />
 
       <ServiceNeedSection

frontend/src/citizen-frontend/applications/editor/Heading.tsx

@@ -24,11 +24,16 @@ type HeadingProps = {
   lastName: string
   errors?: ApplicationFormDataErrors
   transferApplication: boolean
+  /**
+   * Update this value to force re-rendering of the error box, causing screenreader to re-read the error summary.
+   */
+  alertTrigger: number
 }
 export default React.memo(function Heading({
   type,
   errors,
   transferApplication,
+  alertTrigger,
   ...name
 }: HeadingProps) {
   const t = useTranslation()
@@ -49,6 +54,7 @@ export default React.memo(function Heading({
         <>
           <Gap size="s" />
           <AlertBox
+            key={alertTrigger}
             message={
               <div>
                 <span data-qa="application-has-errors-title">