♿ [open-formulieren/open-forms#4622] Error message is linked to respo…

…nsible input

Using aria-describedby to explain which input is responsible for the error

src/components/forms/TextField/TextField.js

@@ -37,7 +37,7 @@ export const TextField = ({
         />
       </Paragraph>
       <HelpText>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} ariaDescribedby={id} />}
     </UtrechtFormField>
   );
 };

src/components/forms/ValidationErrors.js

@@ -2,17 +2,22 @@ import {FormFieldDescription} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ValidationErrors = ({error = ''}) => {
+const ValidationErrors = ({error = '', ariaDescribedby = ''}) => {
   if (!error) return null;
   return (
-    <FormFieldDescription invalid className="utrecht-form-field-description--openforms-errors">
+    <FormFieldDescription
+      invalid
+      className="utrecht-form-field-description--openforms-errors"
+      aria-describedby={ariaDescribedby}
+    >
       {error}
     </FormFieldDescription>
   );
 };
 
 ValidationErrors.propTypes = {
   error: PropTypes.string,
+  ariaDescribedby: PropTypes.string,
 };
 
 export default ValidationErrors;

src/formio/templates/addressNL.ejs

@@ -1 +1 @@
-<div ref="addressNLContainer"></div>
+<div ref="addressNLContainer" id="{{ctx.instance.id}}-{{ctx.component.key}}"></div>

src/formio/templates/field.ejs

@@ -3,6 +3,7 @@
   <div class="utrecht-form-fieldset utrecht-form-fieldset--openforms">
     <fieldset
       class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset"
+      id="{{ctx.instance.id}}-{{ctx.component.key}}"
       {% if (ctx.component.type === 'radio') { %}role="radiogroup"{% } %}
       {% if (ctx.component.description) { %}aria-describedby="{{ctx.id}}-description"{% } %}
     >
@@ -34,7 +35,7 @@
         ref="messageContainer"
         class="utrecht-form-field-description utrecht-form-field-description--invalid utrecht-form-field-description--openforms-errors"
         role="alert"
-        aria-describedby="{{ctx.id}}"></div>
+        aria-describedby="{{ctx.instance.id}}-{{ctx.component.key}}"></div>
 
     </fieldset>
   </div>
@@ -73,6 +74,6 @@
       ref="messageContainer"
       class="utrecht-form-field-description utrecht-form-field-description--invalid utrecht-form-field-description--openforms-errors"
       role="alert"
-      aria-describedby="{{ctx.id}}"></div>
+      aria-describedby="{{ctx.instance.id}}-{{ctx.component.key}}"></div>
   </div>
 {% } %}