♿ [open-formulieren/open-forms#4716] Connect input to error message u…

…sing aria-describedby
open-formulieren · Oct 23, 2024 · 608b1dc · 608b1dc
1 parent 96a39a5
commit 608b1dc
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = '', 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>
   );
 };
 
 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
@@ -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) {