fix(TextInput): link helper text to input in default state (#9873)

Co-authored-by: Alessandra Davila <aledavila@ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 5, 2021 · 6656a63 · 6656a63
1 parent b0a79ab
commit 6656a63
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -85,6 +85,7 @@ const TextInput = React.forwardRef(function TextInput(
     title: placeholder,
     disabled: normalizedProps.disabled,
     readOnly,
+    ['aria-describedby']: normalizedProps.helperId,
     ...other,
   };
   const inputWrapperClasses = classNames(
@@ -134,8 +135,11 @@ const TextInput = React.forwardRef(function TextInput(
       {labelText}
     </label>
   ) : null;
+
   const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
+    <div id={normalizedProps.helperId} className={helperTextClasses}>
+      {helperText}
+    </div>
   ) : null;
 
   const input = (

diff --git a/packages/react/src/internal/useNormalizedInputProps.js b/packages/react/src/internal/useNormalizedInputProps.js
@@ -67,6 +67,7 @@ export function useNormalizedInputProps({
     warnId: `${id}-warn-msg`,
     validation: null,
     icon: null,
+    helperId: `${id}-helper-text`,
   };
 
   if (readOnly) {