CCM-7548 Fix aria error labels (#222)

Ian-Hodges · web-flow · commit cb74bd58d6dd · 2024-12-18T12:16:58.000Z
diff --git a/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap
@@ -145,7 +145,7 @@ exports[`renders page one error 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="emailTemplateName-error-message"
+                id="emailTemplateName--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
@@ -753,7 +753,7 @@ exports[`renders page with multiple errors 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="emailTemplateName-error-message"
+                id="emailTemplateName--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
@@ -791,7 +791,7 @@ exports[`renders page with multiple errors 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="emailTemplateSubjectLine-error-message"
+                id="emailTemplateSubjectLine--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
@@ -823,7 +823,7 @@ exports[`renders page with multiple errors 1`] = `
             </label>
             <span
               class="nhsuk-error-message"
-              id="emailTemplateMessage-error-message"
+              id="emailTemplateMessage--error-message"
             >
               <span
                 class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap
@@ -581,7 +581,7 @@ exports[`renders page one error 1`] = `
           >
             <span
               class="nhsuk-error-message"
-              id="nhsAppTemplateName-error-message"
+              id="nhsAppTemplateName--error-message"
             >
               <span
                 class="nhsuk-u-visually-hidden"
@@ -1069,7 +1069,7 @@ exports[`renders page with multiple errors 1`] = `
           >
             <span
               class="nhsuk-error-message"
-              id="nhsAppTemplateName-error-message"
+              id="nhsAppTemplateName--error-message"
             >
               <span
                 class="nhsuk-u-visually-hidden"
@@ -1100,7 +1100,7 @@ exports[`renders page with multiple errors 1`] = `
           </label>
           <span
             class="nhsuk-error-message"
-            id="nhsAppTemplateMessage-error-message"
+            id="nhsAppTemplateMessage--error-message"
           >
             <span
               class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/forms/ReviewEmailTemplate/__snapshots__/ReviewEmailTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/ReviewEmailTemplate/__snapshots__/ReviewEmailTemplate.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`Review email form renders matches error snapshot 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="reviewEmailTemplateAction-error-message"
+                id="reviewEmailTemplateAction--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/forms/ReviewNHSAppTemplate/__snapshots__/ReviewNHSAppTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/ReviewNHSAppTemplate/__snapshots__/ReviewNHSAppTemplate.test.tsx.snap
@@ -182,7 +182,7 @@ exports[`Review nhs app form renders matches error snapshot 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="reviewNHSAppTemplateAction-error-message"
+                id="reviewNHSAppTemplateAction--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/forms/ReviewSMSTemplate/__snapshots__/ReviewSMSTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/ReviewSMSTemplate/__snapshots__/ReviewSMSTemplate.test.tsx.snap
@@ -182,7 +182,7 @@ exports[`Review sms form renders matches error snapshot 1`] = `
             >
               <span
                 class="nhsuk-error-message"
-                id="reviewSMSTemplateAction-error-message"
+                id="reviewSMSTemplateAction--error-message"
               >
                 <span
                   class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap
@@ -470,7 +470,7 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
           >
             <span
               class="nhsuk-error-message"
-              id="smsTemplateName-error-message"
+              id="smsTemplateName--error-message"
             >
               <span
                 class="nhsuk-u-visually-hidden"
@@ -850,7 +850,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
           >
             <span
               class="nhsuk-error-message"
-              id="smsTemplateName-error-message"
+              id="smsTemplateName--error-message"
             >
               <span
                 class="nhsuk-u-visually-hidden"
@@ -881,7 +881,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
           </label>
           <span
             class="nhsuk-error-message"
-            id="smsTemplateMessage-error-message"
+            id="smsTemplateMessage--error-message"
           >
             <span
               class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/NHSNotifyRadioButtonForm.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/NHSNotifyRadioButtonForm.test.tsx.snap
@@ -210,7 +210,7 @@ exports[`Renders NHSNotifyRadioButtonForm correctly with errors 1`] = `
         >
           <span
             class="nhsuk-error-message"
-            id="radios-id-error-message"
+            id="radios-id--error-message"
           >
             <span
               class="nhsuk-u-visually-hidden"
diff --git a/frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx b/frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx
@@ -90,7 +90,7 @@ export const EmailTemplateForm: FC<
                 onChange={emailTemplateNameHandler}
                 value={emailTemplateName}
                 error={templateNameError}
-                errorProps={{ id: 'emailTemplateName-error-message' }}
+                errorProps={{ id: 'emailTemplateName--error-message' }}
                 data-testid='emailTemplateName-input'
               />
             </div>
@@ -108,7 +108,7 @@ export const EmailTemplateForm: FC<
                 onChange={emailTemplateSubjectLineHandler}
                 value={emailTemplateSubjectLine}
                 error={templateSubjectLineError}
-                errorProps={{ id: 'emailTemplateSubjectLine-error-message' }}
+                errorProps={{ id: 'emailTemplateSubjectLine--error-message' }}
                 data-testid='emailTemplateSubjectLine-input'
               />
             </div>
@@ -121,7 +121,7 @@ export const EmailTemplateForm: FC<
               onChange={emailTemplateMessageHandler}
               value={emailTemplateMessage}
               error={templateMessageError}
-              errorProps={{ id: 'emailTemplateMessage-error-message' }}
+              errorProps={{ id: 'emailTemplateMessage--error-message' }}
               data-testid='emailTemplateMessage-input'
             />
           </FormSection>
diff --git a/frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx b/frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx
@@ -79,7 +79,7 @@ export const NhsAppTemplateForm: FC<
               defaultValue={nhsAppTemplateName}
               onChange={nhsAppTemplateNameHandler}
               error={templateNameError}
-              errorProps={{ id: 'nhsAppTemplateName-error-message' }}
+              errorProps={{ id: 'nhsAppTemplateName--error-message' }}
             />
           </div>
           <Textarea
@@ -91,7 +91,7 @@ export const NhsAppTemplateForm: FC<
             onChange={nhsAppMessageHandler}
             defaultValue={nhsAppTemplateMessage}
             error={templateMessageError}
-            errorProps={{ id: 'nhsAppTemplateMessage-error-message' }}
+            errorProps={{ id: 'nhsAppTemplateMessage--error-message' }}
           />
           <p style={useJsEnabledStyle()} id='character-count'>
             {nhsAppTemplateMessage.length}
diff --git a/frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx b/frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx
@@ -70,7 +70,7 @@ export const SmsTemplateForm: FC<
               defaultValue={smsTemplateName}
               onChange={smsTemplateNameHandler}
               error={templateNameError}
-              errorProps={{ id: 'smsTemplateName-error-message' }}
+              errorProps={{ id: 'smsTemplateName--error-message' }}
             />
           </div>
           <Textarea
@@ -82,7 +82,7 @@ export const SmsTemplateForm: FC<
             maxLength={MAX_SMS_CHARACTER_LENGTH}
             rows={10}
             error={templateMessageError}
-            errorProps={{ id: 'smsTemplateMessage-error-message' }}
+            errorProps={{ id: 'smsTemplateMessage--error-message' }}
           />
           <div style={useJsEnabledStyle()} id='smsMessageCharacterCount'>
             <p className='nhsuk-u-margin-bottom-0' id='character-count'>
diff --git a/frontend/src/components/molecules/NHSNotifyRadioButtonForm/NHSNotifyRadioButtonForm.tsx b/frontend/src/components/molecules/NHSNotifyRadioButtonForm/NHSNotifyRadioButtonForm.tsx
@@ -56,7 +56,7 @@ export const NHSNotifyRadioButtonForm = ({
         id={radiosId}
         hint={hint}
         error={state.validationError?.fieldErrors[radiosId]?.join(', ')}
-        errorProps={{ id: `${radiosId}-error-message` }}
+        errorProps={{ id: `${radiosId}--error-message` }}
       >
         {options.map(({ id, text, checked }) => (
           <Radios.Radio

Original file line number	Diff line number	Diff line change
@@ -145,7 +145,7 @@ exports[`renders page one error 1`] = `
`145`	`145`	`>`
`146`	`146`	`<span`
`147`	`147`	`class="nhsuk-error-message"`
`148`		`- id="emailTemplateName-error-message"`
	`148`	`+ id="emailTemplateName--error-message"`
`149`	`149`	`>`
`150`	`150`	`<span`
`151`	`151`	`class="nhsuk-u-visually-hidden"`
@@ -753,7 +753,7 @@ exports[`renders page with multiple errors 1`] = `
`753`	`753`	`>`
`754`	`754`	`<span`
`755`	`755`	`class="nhsuk-error-message"`
`756`		`- id="emailTemplateName-error-message"`
	`756`	`+ id="emailTemplateName--error-message"`
`757`	`757`	`>`
`758`	`758`	`<span`
`759`	`759`	`class="nhsuk-u-visually-hidden"`
@@ -791,7 +791,7 @@ exports[`renders page with multiple errors 1`] = `
`791`	`791`	`>`
`792`	`792`	`<span`
`793`	`793`	`class="nhsuk-error-message"`
`794`		`- id="emailTemplateSubjectLine-error-message"`
	`794`	`+ id="emailTemplateSubjectLine--error-message"`
`795`	`795`	`>`
`796`	`796`	`<span`
`797`	`797`	`class="nhsuk-u-visually-hidden"`
@@ -823,7 +823,7 @@ exports[`renders page with multiple errors 1`] = `
`823`	`823`	`</label>`
`824`	`824`	`<span`
`825`	`825`	`class="nhsuk-error-message"`
`826`		`- id="emailTemplateMessage-error-message"`
	`826`	`+ id="emailTemplateMessage--error-message"`
`827`	`827`	`>`
`828`	`828`	`<span`
`829`	`829`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -581,7 +581,7 @@ exports[`renders page one error 1`] = `
`581`	`581`	`>`
`582`	`582`	`<span`
`583`	`583`	`class="nhsuk-error-message"`
`584`		`- id="nhsAppTemplateName-error-message"`
	`584`	`+ id="nhsAppTemplateName--error-message"`
`585`	`585`	`>`
`586`	`586`	`<span`
`587`	`587`	`class="nhsuk-u-visually-hidden"`
@@ -1069,7 +1069,7 @@ exports[`renders page with multiple errors 1`] = `
`1069`	`1069`	`>`
`1070`	`1070`	`<span`
`1071`	`1071`	`class="nhsuk-error-message"`
`1072`		`- id="nhsAppTemplateName-error-message"`
	`1072`	`+ id="nhsAppTemplateName--error-message"`
`1073`	`1073`	`>`
`1074`	`1074`	`<span`
`1075`	`1075`	`class="nhsuk-u-visually-hidden"`
@@ -1100,7 +1100,7 @@ exports[`renders page with multiple errors 1`] = `
`1100`	`1100`	`</label>`
`1101`	`1101`	`<span`
`1102`	`1102`	`class="nhsuk-error-message"`
`1103`		`- id="nhsAppTemplateMessage-error-message"`
	`1103`	`+ id="nhsAppTemplateMessage--error-message"`
`1104`	`1104`	`>`
`1105`	`1105`	`<span`
`1106`	`1106`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -208,7 +208,7 @@ exports[`Review email form renders matches error snapshot 1`] = `
`208`	`208`	`>`
`209`	`209`	`<span`
`210`	`210`	`class="nhsuk-error-message"`
`211`		`- id="reviewEmailTemplateAction-error-message"`
	`211`	`+ id="reviewEmailTemplateAction--error-message"`
`212`	`212`	`>`
`213`	`213`	`<span`
`214`	`214`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -182,7 +182,7 @@ exports[`Review nhs app form renders matches error snapshot 1`] = `
`182`	`182`	`>`
`183`	`183`	`<span`
`184`	`184`	`class="nhsuk-error-message"`
`185`		`- id="reviewNHSAppTemplateAction-error-message"`
	`185`	`+ id="reviewNHSAppTemplateAction--error-message"`
`186`	`186`	`>`
`187`	`187`	`<span`
`188`	`188`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -182,7 +182,7 @@ exports[`Review sms form renders matches error snapshot 1`] = `
`182`	`182`	`>`
`183`	`183`	`<span`
`184`	`184`	`class="nhsuk-error-message"`
`185`		`- id="reviewSMSTemplateAction-error-message"`
	`185`	`+ id="reviewSMSTemplateAction--error-message"`
`186`	`186`	`>`
`187`	`187`	`<span`
`188`	`188`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -470,7 +470,7 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
`470`	`470`	`>`
`471`	`471`	`<span`
`472`	`472`	`class="nhsuk-error-message"`
`473`		`- id="smsTemplateName-error-message"`
	`473`	`+ id="smsTemplateName--error-message"`
`474`	`474`	`>`
`475`	`475`	`<span`
`476`	`476`	`class="nhsuk-u-visually-hidden"`
@@ -850,7 +850,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
`850`	`850`	`>`
`851`	`851`	`<span`
`852`	`852`	`class="nhsuk-error-message"`
`853`		`- id="smsTemplateName-error-message"`
	`853`	`+ id="smsTemplateName--error-message"`
`854`	`854`	`>`
`855`	`855`	`<span`
`856`	`856`	`class="nhsuk-u-visually-hidden"`
@@ -881,7 +881,7 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
`881`	`881`	`</label>`
`882`	`882`	`<span`
`883`	`883`	`class="nhsuk-error-message"`
`884`		`- id="smsTemplateMessage-error-message"`
	`884`	`+ id="smsTemplateMessage--error-message"`
`885`	`885`	`>`
`886`	`886`	`<span`
`887`	`887`	`class="nhsuk-u-visually-hidden"`
Original file line number	Diff line number	Diff line change
@@ -210,7 +210,7 @@ exports[`Renders NHSNotifyRadioButtonForm correctly with errors 1`] = `
`210`	`210`	`>`
`211`	`211`	`<span`
`212`	`212`	`class="nhsuk-error-message"`
`213`		`- id="radios-id-error-message"`
	`213`	`+ id="radios-id--error-message"`
`214`	`214`	`>`
`215`	`215`	`<span`
`216`	`216`	`class="nhsuk-u-visually-hidden"`