fix(input, radio, checkbox): assosiate fields with error messages

ZopaPublic · May 26, 2023 · 8d1012d · 8d1012d
1 parent 0ee88c0
commit 8d1012d
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 8 deletions.
diff --git a/src/components/atoms/ErrorMessage/ErrorMessage.tsx b/src/components/atoms/ErrorMessage/ErrorMessage.tsx
@@ -39,12 +39,13 @@ const IconWrapper = styled.span`
 type ErrorMessageProps = {
   children?: React.ReactNode;
   className?: string;
+  id?: string;
 };
 
-const ErrorMessage = ({ children, className, ...rest }: ErrorMessageProps) => {
+const ErrorMessage = ({ children, className, id, ...rest }: ErrorMessageProps) => {
   const theme = useThemeContext();
   return (
-    <StyledErrorMessage className={className} {...rest} theme={theme}>
+    <StyledErrorMessage className={className} {...rest} theme={theme} id={id}>
       {theme.errorMessage.icon ? (
         <IconWrapper>
           <Icon color={colors.alert} className="pr-2" variant={faMinusCircle} />

diff --git a/src/components/molecules/CheckboxField/CheckboxField.tsx b/src/components/molecules/CheckboxField/CheckboxField.tsx
@@ -168,12 +168,17 @@ const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>((props, r
           hideControl={hideControl}
           {...rest}
           theme={theme}
+          aria-describedby={props['aria-describedby'] ? props['aria-describedby'] : `checkbox-field-error-${name}`}
         />
         <Label htmlFor={`checkbox-id-${name}`} hasError={hasError} isValid={isValid} theme={theme}>
           {label}
         </Label>
       </SizedContainer>
-      {errorMessage && <ErrorMessage className="mt-1">{errorMessage}</ErrorMessage>}
+      {errorMessage && (
+        <ErrorMessage className="mt-1" id={`checkbox-field-error-${name}`}>
+          {errorMessage}
+        </ErrorMessage>
+      )}
     </>
   );
 });

diff --git a/src/components/molecules/CheckboxGroupField/CheckboxGroupField.tsx b/src/components/molecules/CheckboxGroupField/CheckboxGroupField.tsx
@@ -90,6 +90,7 @@ const CheckboxGroupField = <Val extends Record<string, boolean>>({
               <CheckboxWrapper>
                 <CheckboxField
                   name={item.name.toString()}
+                  aria-describedby={`error-group-checkbox-${label}`}
                   disabled={disabled}
                   onChange={handleChange(item.name)}
                   onBlur={onBlur}
@@ -104,7 +105,11 @@ const CheckboxGroupField = <Val extends Record<string, boolean>>({
           );
         })}
       </FlexRow>
-      {errorMessage && <ErrorMessage className="mt-1">{errorMessage}</ErrorMessage>}
+      {errorMessage && (
+        <ErrorMessage id={`error-group-checkbox-${label}`} className="mt-1">
+          {errorMessage}
+        </ErrorMessage>
+      )}
     </Fieldset>
   );
 };

diff --git a/src/components/molecules/DropdownField/DropdownField.tsx b/src/components/molecules/DropdownField/DropdownField.tsx
@@ -48,10 +48,15 @@ const DropdownField = forwardRef<HTMLSelectElement, DropdownFieldProps>(
           aria-label={label ? undefined : name}
           size={htmlSelectSize}
           ref={ref}
+          aria-describedby={`error-dropdown-${name}`}
           {...rest}
         />
       </SizedContainer>
-      {errorMessage && <FieldError data-automation={`ZA.error-${name}`}>{errorMessage}</FieldError>}
+      {errorMessage && (
+        <FieldError id={`error-dropdown-${name}`} data-automation={`ZA.error-${name}`}>
+          {errorMessage}
+        </FieldError>
+      )}
     </>
   ),
 );

diff --git a/src/components/molecules/DropdownFiltered/DropdownFiltered.tsx b/src/components/molecules/DropdownFiltered/DropdownFiltered.tsx
@@ -114,6 +114,7 @@ const DropdownFiltered = (props: DropdownFilteredProps) => {
                   })}
                   name={name}
                   id={`text-id-${name}`}
+                  aria-describedby={`error-dropdown-filtered-${name}`}
                   isValid={isValid}
                   hasError={showError}
                   isOpen={isOpen && !!filteredResults.length}
@@ -174,7 +175,11 @@ const DropdownFiltered = (props: DropdownFilteredProps) => {
                   </Options>
                 )}
               </SearchInputWrap>
-              {showError && <FieldError data-automation={`ZA.error-${name}`}>{errorMessage}</FieldError>}
+              {showError && (
+                <FieldError id={`error-dropdown-filtered-${name}`} data-automation={`ZA.error-${name}`}>
+                  {errorMessage}
+                </FieldError>
+              )}
             </div>
           );
         }}

diff --git a/src/components/molecules/RadioGroupField/RadioGroupField.tsx b/src/components/molecules/RadioGroupField/RadioGroupField.tsx
@@ -77,6 +77,7 @@ const RadioGroupField = ({
               <RadioWrapper>
                 <RadioField
                   disabled={disabled}
+                  aria-describedby={`error-radio-group-${label}`}
                   value={item.value}
                   onChange={handleChange(item.value)}
                   onBlur={onBlur}
@@ -93,7 +94,11 @@ const RadioGroupField = ({
           );
         })}
       </FlexRow>
-      {errorMessage && <ErrorMessage className="mt-1">{errorMessage}</ErrorMessage>}
+      {errorMessage && (
+        <ErrorMessage id={`error-radio-group-${label}`} className="mt-1">
+          {errorMessage}
+        </ErrorMessage>
+      )}
     </Fieldset>
   );
 };

diff --git a/src/components/molecules/TextField/TextField.tsx b/src/components/molecules/TextField/TextField.tsx
@@ -74,6 +74,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         aria-label={label ? undefined : name}
         ref={ref}
         name={name}
+        aria-describedby={`error-text-field-${name}`}
         {...rest}
       />
     );
@@ -87,7 +88,11 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         )}
         {helpText && <HelpText size="small">{helpText}</HelpText>}
         <SizedContainer size={inputSize}>{prefix ? <Prefix prefix={prefix}>{input}</Prefix> : input}</SizedContainer>
-        {errorMessage && <FieldError data-automation={`ZA.error-${name}`}>{errorMessage}</FieldError>}
+        {errorMessage && (
+          <FieldError id={`error-text-field-${name}`} data-automation={`ZA.error-${name}`}>
+            {errorMessage}
+          </FieldError>
+        )}
       </>
     );
   },