From 411ec900780cd7888f2765143d0acb1f124c81a2 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Thu, 26 Sep 2024 17:34:26 +0200
Subject: [PATCH] :wheelchair: [open-formulieren/open-forms#4622] Connect input
 to error message using aria-describedby

---
 src/components/forms/Checkbox/Checkbox.js       | 3 ++-
 src/components/forms/NumberField/NumberField.js | 3 ++-
 src/components/forms/RadioField/RadioField.js   | 4 +++-
 src/components/forms/SelectField/SelectField.js | 3 ++-
 src/components/forms/TextField/TextField.js     | 3 ++-
 src/components/forms/ValidationErrors.js        | 9 +++++++--
 src/formio/components/TextField.js              | 7 +++++++
 7 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/forms/Checkbox/Checkbox.js b/src/components/forms/Checkbox/Checkbox.js
index e62e63bc6..6e26b3e92 100644
--- a/src/components/forms/Checkbox/Checkbox.js
+++ b/src/components/forms/Checkbox/Checkbox.js
@@ -40,10 +40,11 @@ const Checkbox = ({
         invalid={invalid}
         required={isRequired}
         appearance="custom"
+        aria-describedby={invalid ? `${id}-error-message` : undefined}
         {...inputProps}
       />
       <HelpText>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} inputId={id} />}
     </FormField>
   );
 };
diff --git a/src/components/forms/NumberField/NumberField.js b/src/components/forms/NumberField/NumberField.js
index 879c1a29b..8e7d72ac2 100644
--- a/src/components/forms/NumberField/NumberField.js
+++ b/src/components/forms/NumberField/NumberField.js
@@ -66,11 +66,12 @@ const NumberField = ({
           type={useNumberType ? 'number' : 'text'}
           customInput={Textbox}
           readOnly={readOnly}
+          aria-describedby={invalid ? `${id}-error-message` : undefined}
           {...separatorProps}
         />
       </Paragraph>
       <HelpText>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} inputId={id} />}
     </UtrechtFormField>
   );
 };
diff --git a/src/components/forms/RadioField/RadioField.js b/src/components/forms/RadioField/RadioField.js
index 8f53a72f1..dabc38155 100644
--- a/src/components/forms/RadioField/RadioField.js
+++ b/src/components/forms/RadioField/RadioField.js
@@ -35,6 +35,7 @@ export const RadioField = ({
   const {error, touched} = getFieldMeta(name);
   const invalid = touched && !!error;
   const descriptionid = `${id}-description`;
+  // @TODO check aria descriptions with screen reader... Is it still usable, with the description and error messages?
   return (
     <Fieldset
       className="utrecht-form-fieldset--openforms"
@@ -58,6 +59,7 @@ export const RadioField = ({
             id={`${id}-opt-${index}`}
             name={name}
             value={optionValue}
+            aria-describedby={invalid ? `${id}-error-message` : undefined}
             {...inputProps}
           />
           <Paragraph className="utrecht-form-field__label utrecht-form-field__label--radio">
@@ -74,7 +76,7 @@ export const RadioField = ({
       ))}
 
       <HelpText id={descriptionid}>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} inputId={id} />}
     </Fieldset>
   );
 };
diff --git a/src/components/forms/SelectField/SelectField.js b/src/components/forms/SelectField/SelectField.js
index 8f6fbb63f..2c975ce99 100644
--- a/src/components/forms/SelectField/SelectField.js
+++ b/src/components/forms/SelectField/SelectField.js
@@ -135,9 +135,10 @@ const SelectField = ({
         }}
         value={value}
         onBlur={() => setTouched(true)}
+        aria-describedby={invalid ? `${id}-error-message` : undefined}
       />
       <HelpText>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} inputId={id} />}
     </FormField>
   );
 };
diff --git a/src/components/forms/TextField/TextField.js b/src/components/forms/TextField/TextField.js
index 6a0aaf248..307c6cfa8 100644
--- a/src/components/forms/TextField/TextField.js
+++ b/src/components/forms/TextField/TextField.js
@@ -33,11 +33,12 @@ export const TextField = ({
           className="utrecht-textbox--openforms"
           disabled={disabled}
           invalid={invalid}
+          aria-describedby={invalid ? `${id}-error-message` : undefined}
           {...inputProps}
         />
       </Paragraph>
       <HelpText>{description}</HelpText>
-      {touched && <ValidationErrors error={error} />}
+      {touched && <ValidationErrors error={error} inputId={id} />}
     </UtrechtFormField>
   );
 };
diff --git a/src/components/forms/ValidationErrors.js b/src/components/forms/ValidationErrors.js
index 347f99945..634172aee 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 = '', inputId = ''}) => {
   if (!error) return null;
   return (
-    <FormFieldDescription invalid className="utrecht-form-field-description--openforms-errors">
+    <FormFieldDescription
+      id={`${inputId}-error-message`}
+      invalid
+      className="utrecht-form-field-description--openforms-errors"
+    >
       {error}
     </FormFieldDescription>
   );
@@ -13,6 +17,7 @@ const ValidationErrors = ({error = ''}) => {
 
 ValidationErrors.propTypes = {
   error: PropTypes.string,
+  inputId: PropTypes.string,
 };
 
 export default ValidationErrors;
diff --git a/src/formio/components/TextField.js b/src/formio/components/TextField.js
index c24e0e1cc..08f5d3a70 100644
--- a/src/formio/components/TextField.js
+++ b/src/formio/components/TextField.js
@@ -29,6 +29,13 @@ class TextField extends Formio.Components.components.textfield {
     return info;
   }
 
+  checkValidity(data, dirty, row, silentCheck) {
+    const validity = super.checkValidity(data, dirty, row, silentCheck);
+    console.log({data, dirty, row, validity});
+    // info.attr['aria-describedby'] = '';
+    return validity;
+  }
+
   checkComponentValidity(data, dirty, row, options = {}) {
     let updatedOptions = {...options};
     if (this.component.validate.plugins && this.component.validate.plugins.length) {