diff --git a/src/components/forms/TextField/TextField.js b/src/components/forms/TextField/TextField.js index 6a0aaf248..37ea075e1 100644 --- a/src/components/forms/TextField/TextField.js +++ b/src/components/forms/TextField/TextField.js @@ -37,7 +37,7 @@ export const TextField = ({ /> {description} - {touched && } + {touched && } ); }; diff --git a/src/components/forms/ValidationErrors.js b/src/components/forms/ValidationErrors.js index 347f99945..e5f940303 100644 --- a/src/components/forms/ValidationErrors.js +++ b/src/components/forms/ValidationErrors.js @@ -2,10 +2,14 @@ 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 ( - + {error} ); @@ -13,6 +17,7 @@ const ValidationErrors = ({error = ''}) => { ValidationErrors.propTypes = { error: PropTypes.string, + ariaDescribedby: PropTypes.string, }; export default ValidationErrors; diff --git a/src/formio/templates/addressNL.ejs b/src/formio/templates/addressNL.ejs index 5c806cc5f..f0bb93684 100644 --- a/src/formio/templates/addressNL.ejs +++ b/src/formio/templates/addressNL.ejs @@ -1 +1 @@ -
+
diff --git a/src/formio/templates/field.ejs b/src/formio/templates/field.ejs index bced410d0..0c20fa9a3 100644 --- a/src/formio/templates/field.ejs +++ b/src/formio/templates/field.ejs @@ -3,6 +3,7 @@
@@ -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}}">
+ aria-describedby="{{ctx.instance.id}}-{{ctx.component.key}}"> @@ -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}}"> + aria-describedby="{{ctx.instance.id}}-{{ctx.component.key}}"> {% } %}