fix: add area-describedby to components that use helperText

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -550,6 +550,11 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   {...readOnlyEventHandlers}
                   readOnly={readOnly}
                   ref={mergeRefs(textInput, ref)}
+                  aria-describedby={
+                    helperText && !invalid && !warn && !isFluid
+                      ? comboBoxHelperId
+                      : undefined
+                  }
                 />
                 {invalid && (
                   <WarningFilled

packages/react/src/components/DatePicker/DatePicker.stories.js

@@ -318,4 +318,10 @@ Playground.argTypes = {
       category: 'DatePickerInput',
     },
   },
+  helperText: {
+    control: { type: 'text' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
 };

packages/react/src/components/DatePickerInput/DatePickerInput.js

@@ -11,6 +11,9 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   const {
@@ -34,6 +37,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
   } = props;
   const prefix = usePrefix();
   const { isFluid } = useContext(FormContext);
+  const datePickerInputInstanceId = getInstanceId();
   const datePickerInputProps = {
     id,
     onChange: (event) => {
@@ -73,12 +77,17 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
     [`${prefix}--date-picker--fluid--warn`]: isFluid && warn,
   });
 
+  const datePickerInputHelperId = !helperText
+    ? undefined
+    : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+
   const inputProps = {
     ...rest,
     ...datePickerInputProps,
     className: inputClasses,
     disabled,
     ref,
+    ['aria-describedby']: helperText ? datePickerInputHelperId : undefined,
   };
   if (invalid) {
     inputProps['data-invalid'] = true;
@@ -113,7 +122,11 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(props, ref) {
           <div className={`${prefix}--form-requirement`}>{warnText}</div>
         </>
       )}
-      {helperText && <div className={helperTextClasses}>{helperText}</div>}
+      {helperText && (
+        <div id={datePickerInputHelperId} className={helperTextClasses}>
+          {helperText}
+        </div>
+      )}
     </div>
   );
 });

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -33,6 +33,9 @@ import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ReactAttr } from '../../types/common';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const defaultItemToString = <ItemType,>(item?: ItemType): string => {
   if (typeof item === 'string') {
@@ -248,6 +251,7 @@ const Dropdown = React.forwardRef(
       initialSelectedItem,
       onSelectedItemChange,
     };
+    const { current: dropdownInstanceId } = useRef(getInstanceId());
 
     // only set selectedItem if the prop is defined. Setting if it is undefined
     // will overwrite default selected items from useSelect
@@ -311,12 +315,18 @@ const Dropdown = React.forwardRef(
       }
     );
 
+    const helperId = !helperText
+      ? undefined
+      : `dropdown-helper-text-${dropdownInstanceId}`;
+
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     const toggleButtonProps = getToggleButtonProps();
     const helper =
       helperText && !isFluid ? (
-        <div className={helperClasses}>{helperText}</div>
+        <div id={helperId} className={helperClasses}>
+          {helperText}
+        </div>
       ) : null;
 
     function onSelectedItemChange({
@@ -389,6 +399,9 @@ const Dropdown = React.forwardRef(
             className={`${prefix}--list-box__field`}
             disabled={disabled}
             aria-disabled={readOnly ? true : undefined} // aria-disabled to remain focusable
+            aria-describedby={
+              !inline && !invalid && !warn && helper ? helperId : undefined
+            }
             title={
               selectedItem && itemToString !== undefined
                 ? itemToString(selectedItem)

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -565,6 +565,9 @@ const MultiSelect = React.forwardRef(function MultiSelect<ItemType>(
             className={`${prefix}--list-box__field`}
             disabled={disabled}
             aria-disabled={disabled || readOnly}
+            aria-describedby={
+              !inline && !invalid && !warn && helperText ? helperId : undefined
+            }
             {...toggleButtonProps}
             ref={mergedRef}
             onKeyDown={onKeyDown}

packages/react/src/components/NumberInput/NumberInput.tsx

@@ -292,6 +292,9 @@ const NumberInput = React.forwardRef(function NumberInput(
   if (normalizedProps.warn) {
     ariaDescribedBy = normalizedProps.warnId;
   }
+  if (!normalizedProps.validation) {
+    ariaDescribedBy = helperText ? normalizedProps.helperId : undefined;
+  }
 
   function handleOnChange(event) {
     if (disabled) {
@@ -441,7 +444,11 @@ const NumberInput = React.forwardRef(function NumberInput(
         {normalizedProps.validation ? (
           normalizedProps.validation
         ) : (
-          <HelperText disabled={disabled} description={helperText} />
+          <HelperText
+            id={normalizedProps.helperId}
+            disabled={disabled}
+            description={helperText}
+          />
         )}
       </div>
     </div>
@@ -619,24 +626,30 @@ Label.propTypes = {
 };
 
 interface HelperTextProps {
+  id?: string;
   description?: ReactNode;
   disabled?: boolean;
 }
-function HelperText({ disabled, description }: HelperTextProps) {
+function HelperText({ disabled, description, id }: HelperTextProps) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
   });
 
   if (description) {
-    return <div className={className}>{description}</div>;
+    return (
+      <div id={id} className={className}>
+        {description}
+      </div>
+    );
   }
   return null;
 }
 
 HelperText.propTypes = {
   description: PropTypes.node,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
 };
 
 /**

packages/react/src/components/ProgressBar/ProgressBar.js

@@ -26,6 +26,7 @@ function ProgressBar({
 }) {
   const labelId = useId('progress-bar');
   const helperId = useId('progress-bar-helper');
+  const helperTextId = useId('progress-bar-helper-text');
   const prefix = usePrefix();
 
   const isFinished = status === 'finished';
@@ -101,13 +102,16 @@ function ProgressBar({
         aria-busy={!isFinished}
         aria-invalid={isError}
         aria-labelledby={labelId}
+        aria-describedby={helperText ? helperTextId : undefined}
         aria-valuemin={!indeterminate ? 0 : null}
         aria-valuemax={!indeterminate ? max : null}
         aria-valuenow={!indeterminate ? cappedValue : null}>
         <div className={`${prefix}--progress-bar__bar`} ref={ref} />
       </div>
       {helperText && (
-        <div className={`${prefix}--progress-bar__helper-text`}>
+        <div
+          id={helperTextId}
+          className={`${prefix}--progress-bar__helper-text`}>
           {helperText}
           <div
             className={`${prefix}--visually-hidden`}

packages/react/src/components/Select/Select.tsx

@@ -12,6 +12,7 @@ import React, {
   ForwardedRef,
   ReactNode,
   useContext,
+  useRef,
   useState,
 } from 'react';
 import classNames from 'classnames';
@@ -24,6 +25,9 @@ import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 type ExcludedAttributes = 'size';
 
@@ -153,6 +157,7 @@ const Select = React.forwardRef(function Select(
   const enabled = useFeatureFlag('enable-v11-release');
   const { isFluid } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
+  const { current: selectInstanceId } = useRef(getInstanceId());
 
   const selectClasses = classNames(
     {
@@ -194,12 +199,21 @@ const Select = React.forwardRef(function Select(
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
   });
+
+  const helperId = !helperText
+    ? undefined
+    : `select-helper-text-${selectInstanceId}`;
+
   const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
+    <div id={helperId} className={helperTextClasses}>
+      {helperText}
+    </div>
   ) : null;
   const ariaProps = {};
   if (invalid) {
     ariaProps['aria-describedby'] = errorId;
+  } else if (!inline && !isFluid) {
+    ariaProps['aria-describedby'] = helper ? helperId : undefined;
   }
 
   const handleFocus = (evt) => {

packages/react/src/components/TextArea/TextArea.tsx

@@ -16,6 +16,9 @@ import { FormContext } from '../FluidForm';
 import { useAnnouncer } from '../../internal/useAnnouncer';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { useMergedRefs } from '../../internal/useMergedRefs';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 export interface TextAreaProps
   extends React.InputHTMLAttributes<HTMLTextAreaElement> {
@@ -157,6 +160,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
   const [textCount, setTextCount] = useState(
     defaultValue?.toString().length || value?.toString().length || 0
   );
+  const { current: textAreaInstanceId } = useRef(getInstanceId());
 
   const textareaProps: {
     id: TextAreaProps['id'];
@@ -207,8 +211,14 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     [`${prefix}--form__helper-text--disabled`]: other.disabled,
   });
 
+  const helperId = !helperText
+    ? undefined
+    : `text-area-helper-text-${textAreaInstanceId}`;
+
   const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
+    <div id={helperId} className={helperTextClasses}>
+      {helperText}
+    </div>
   ) : null;
 
   const errorId = id + '-error-msg';
@@ -257,14 +267,22 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     }
   }, [other.cols]);
 
+  let ariaDescribedBy;
+
+  if (invalid) {
+    ariaDescribedBy = errorId;
+  } else if (!invalid && !warn && !isFluid && helperText) {
+    ariaDescribedBy = helperId;
+  }
+
   const input = (
     <textarea
       {...other}
       {...textareaProps}
       placeholder={placeholder}
       className={textareaClasses}
       aria-invalid={invalid}
-      aria-describedby={invalid ? errorId : undefined}
+      aria-describedby={ariaDescribedBy}
       disabled={other.disabled}
       readOnly={other.readOnly}
       ref={ref}

packages/react/src/components/TextInput/ControlledPasswordInput.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { View, ViewOff, WarningFilled } from '@carbon/icons-react';
 import { textInputProps } from './util';
 import { warning } from '../../internal/warning';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 let didWarnAboutDeprecation = false;
 
@@ -37,6 +40,7 @@ const ControlledPasswordInput = React.forwardRef(
     ref
   ) {
     const prefix = usePrefix();
+    const { current: controlledPasswordInstanceId } = useRef(getInstanceId());
 
     if (__DEV__) {
       warning(
@@ -109,13 +113,20 @@ const ControlledPasswordInput = React.forwardRef(
         [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment,
       }
     );
+
+    const helperId = !helperText
+      ? undefined
+      : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
+
     const input = (
       <>
         <input
           {...textInputProps({
             invalid,
             sharedTextInputProps,
             invalidId: errorId,
+            hasHelper: !error && helperText,
+            helperId,
           })}
           data-toggle-password-visibility={type === 'password'}
         />
@@ -130,8 +141,11 @@ const ControlledPasswordInput = React.forwardRef(
         </button>
       </>
     );
+
     const helper = helperText ? (
-      <div className={helperTextClasses}>{helperText}</div>
+      <div id={helperId} className={helperTextClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     return (

packages/react/src/components/TextInput/PasswordInput.js

@@ -126,7 +126,9 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     </label>
   ) : null;
   const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
+    <div id={normalizedProps.helperId} className={helperTextClasses}>
+      {helperText}
+    </div>
   ) : null;
 
   const passwordIsVisible = inputType === 'text';
@@ -156,6 +158,11 @@ const PasswordInput = React.forwardRef(function PasswordInput(
           invalidId: normalizedProps.invalidId,
           warn: normalizedProps.warn,
           warnId: normalizedProps.warnId,
+          hasHelper:
+            helperText &&
+            !isFluid &&
+            (inline || (!inline && !normalizedProps.validation)),
+          helperId: normalizedProps.helperId,
         })}
         disabled={disabled}
         data-toggle-password-visibility={inputType === 'password'}