fix: removing unnecessary div from error message

example/src/components/FormInputDemo.tsx

@@ -30,6 +30,7 @@ export const FormInputDemo = () => {
         inputProps={{
           placeholder: 'enter your email',
         }}
+        hiddenErrorText=""
       />
       <h1>Label</h1>
       <FormInput
@@ -39,12 +40,12 @@ export const FormInputDemo = () => {
         onChange={handleChange}
         inputProps={{
           placeholder: 'enter your email',
-          htmlFor: 'input-id',
         }}
         label="this is a label"
         labelProps={{
           htmlFor: 'input-id',
         }}
+        hiddenErrorText=""
       />
       <h1>Prefix</h1>
       <FormInput
@@ -64,6 +65,7 @@ export const FormInputDemo = () => {
           },
           content: <FontAwesomeIcon icon={faAt} />,
         }}
+        hiddenErrorText=""
       />
       <h1>Prefix Label</h1>
       <FormInput
@@ -88,6 +90,7 @@ export const FormInputDemo = () => {
           },
           content: <FontAwesomeIcon icon={faAt} />,
         }}
+        hiddenErrorText=""
       />
       <h1>Suffix</h1>
       <FormInput
@@ -107,6 +110,7 @@ export const FormInputDemo = () => {
           },
           content: <FontAwesomeIcon icon={faAt} />,
         }}
+        hiddenErrorText=""
       />
       <h1>Prefix and suffix</h1>
       <FormInput
@@ -135,6 +139,7 @@ export const FormInputDemo = () => {
           },
           content: <FontAwesomeIcon icon={faAt} />,
         }}
+        hiddenErrorText=""
       />
       <h1>Prefix and suffix with label</h1>
       <FormInput
@@ -167,6 +172,7 @@ export const FormInputDemo = () => {
         labelProps={{
           htmlFor: 'input-id',
         }}
+        hiddenErrorText=""
       />
       <h1>Validation</h1>
       <FormInput
@@ -211,6 +217,7 @@ export const FormInputDemo = () => {
           },
           content: <FontAwesomeIcon icon={faAt} />,
         }}
+        hiddenErrorText=""
       />
       <div>isValid:{showValid.toString()}</div>
     </>

package.json

@@ -2,7 +2,7 @@
   "name": "@capgeminiuk/dcx-react-library",
   "author": "Capgemini UK",
   "license": "MIT",
-  "version": "1.0.0-rc-4",
+  "version": "1.0.0-rc5",
   "source": "src/index.ts",
   "main": "dist/dcx-react-library.js",
   "module": "dist/dcx-react-library.module.js",

src/autocomplete/Autocomplete.tsx

@@ -515,6 +515,7 @@ export const Autocomplete = ({
           'aria-activedescendant': getActivedescendantId(),
         }}
         tabIndex={tabIndex}
+        hiddenErrorText=""
       />
       {showPrompt && (
         <div className={promptClassName} id={promptId}>

src/design-system/form-input.css

@@ -107,6 +107,8 @@
     font-size: token('font-formcontrol_error-size');
     line-height: token('font-formcontrol_error-line-height');
     color: token('color-text-formcontrol_error');
+    margin-block-start: 0;
+    margin-block-end: 0;
   }
 
   & .dcx-form-input__suffix {

src/formInput/FormInput.tsx

@@ -49,7 +49,7 @@ type FormInputProps = {
   /**
    * allow to customise the error message with all the properites needed
    **/
-  errorProps?: any;
+  errorProps?: React.AllHTMLAttributes<HTMLDivElement>;
   /**
    * allow to customise the input with all the properites needed
    **/
@@ -96,10 +96,6 @@ type FormInputProps = {
    * function that will check if is vald or not based on the validation rules
    **/
   isValid?: (valid: boolean, errorMessageVisible?: boolean) => void;
-  /**
-   * error message
-   **/
-  errorMessage?: any;
   /**
    * allow to specify an error message coming from another source
    */
@@ -136,6 +132,14 @@ type FormInputProps = {
    * if a variant floating is specified it will add a class 'dcx-floating-label' for supporting a floating label feature
    */
   variant?: 'floating' | 'floating-filled' | 'normal';
+  /**
+   * visually hidden text for screen readers
+   */
+  hiddenErrorText: string;
+  /**
+   * visually hidden span attributes
+   */
+  hiddenErrorTextProps?: React.HTMLAttributes<HTMLSpanElement>;
 };
 
 const floatVariants = ['floating', 'floating-filled'];
@@ -162,7 +166,6 @@ export const FormInput = ({
   onFocus,
   onBlur,
   isValid,
-  errorMessage,
   staticErrorMessage,
   errorPosition,
   ariaLabel,
@@ -177,6 +180,8 @@ export const FormInput = ({
   variant = 'normal',
   inputDivProps = { style: { display: 'flex' } },
   tabIndex = 0,
+  hiddenErrorText = '',
+  hiddenErrorTextProps,
 }: FormInputProps) => {
   const { validity, onValueChange } = useValidationOnChange(validation, value);
 
@@ -209,24 +214,43 @@ export const FormInput = ({
   const isStaticMessageValid = (): boolean =>
     typeof staticErrorMessage === 'string' && !isEmpty(staticErrorMessage);
 
-  const ErrorMessage = () => (
-    <div
-      {...{
-        ...errorProps,
-        className: classNames(['dcx-error-message', errorProps?.className]),
-      }}
-    >
-      {isStaticMessageValid() ? (
-        <div role={Roles.alert} {...errorMessage}>
+  const ErrorMessage = () => {
+    if (isStaticMessageValid()) {
+      return (
+        <p
+          {...{
+            ...errorProps,
+            className: classNames(['dcx-error-message', errorProps?.className]),
+            role: Roles.alert,
+          }}
+        >
+          {!isEmpty(hiddenErrorText) && (
+            <span {...hiddenErrorTextProps}>{hiddenErrorText + ' '}</span>
+          )}
           {staticErrorMessage}
-        </div>
-      ) : validity && !validity.valid && showError ? (
-        <div role={Roles.alert} {...errorMessage}>
+        </p>
+      );
+    }
+
+    if (validity && !validity.valid && showError) {
+      return (
+        <p
+          {...{
+            ...errorProps,
+            className: classNames(['dcx-error-message', errorProps?.className]),
+            role: Roles.alert,
+          }}
+        >
+          {!isEmpty(hiddenErrorText) && (
+            <span {...hiddenErrorTextProps}>{hiddenErrorText + ' '}</span>
+          )}
           {validity.message}
-        </div>
-      ) : null}
-    </div>
-  );
+        </p>
+      );
+    }
+
+    return null;
+  };
 
   const isStaticOrDynamicError = (): boolean =>
     isStaticMessageValid() || (validity && !validity.valid) || false;