fix: backport v10 aria-describedby to components with helperText

packages/react/src/components/ComboBox/ComboBox.js

@@ -334,6 +334,11 @@ const ComboBox = React.forwardRef((props, ref) => {
                   {...inputProps}
                   {...rest}
                   ref={mergeRefs(textInput, ref)}
+                  aria-describedby={
+                    helperText && !invalid && !warn
+                      ? comboBoxHelperId
+                      : undefined
+                  }
                 />
                 {invalid && (
                   <WarningFilled16

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

@@ -15,6 +15,7 @@ import {
   WarningAltFilled16,
 } from '@carbon/icons-react';
 import { PrefixContext } from '../../internal/usePrefix';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 export default class DatePickerInput extends Component {
   static propTypes = {
@@ -163,6 +164,13 @@ export default class DatePickerInput extends Component {
       ...other
     } = this.props;
 
+    const getInstanceId = setupGetInstanceId();
+    const datePickerInputInstanceId = getInstanceId();
+
+    const datePickerInputHelperId = !helperText
+      ? undefined
+      : `detepicker-input-helper-text-${datePickerInputInstanceId}`;
+
     const datePickerInputProps = {
       id,
       onChange: (evt) => {
@@ -178,6 +186,7 @@ export default class DatePickerInput extends Component {
       placeholder,
       type,
       pattern,
+      ['aria-describedby']: helperText ? datePickerInputHelperId : undefined,
     };
 
     return (
@@ -245,7 +254,9 @@ export default class DatePickerInput extends Component {
           ) : null;
 
           const helper = helperText ? (
-            <div className={helperTextClasses}>{helperText}</div>
+            <div id={datePickerInputHelperId} className={helperTextClasses}>
+              {helperText}
+            </div>
           ) : null;
 
           let error = null;

packages/react/src/components/Dropdown/Dropdown.js

@@ -20,6 +20,9 @@ import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const defaultItemToString = (item) => {
   if (typeof item === 'string') {
@@ -68,6 +71,11 @@ const Dropdown = React.forwardRef(function Dropdown(
     initialSelectedItem,
     onSelectedItemChange,
   });
+  const { current: dropdownInstanceId } = useRef(getInstanceId());
+
+  const helperId = !helperText
+    ? undefined
+    : `dropdown-helper-text-${dropdownInstanceId}`;
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
@@ -129,7 +137,9 @@ const Dropdown = React.forwardRef(function Dropdown(
   const ItemToElement = itemToElement;
   const toggleButtonProps = getToggleButtonProps();
   const helper = helperText ? (
-    <div className={helperClasses}>{helperText}</div>
+    <div id={helperId} className={helperClasses}>
+      {helperText}
+    </div>
   ) : null;
 
   function onSelectedItemChange({ selectedItem }) {
@@ -171,6 +181,9 @@ const Dropdown = React.forwardRef(function Dropdown(
           className={`${prefix}--list-box__field`}
           disabled={disabled}
           aria-disabled={disabled}
+          aria-describedby={
+            !inline && !invalid && !warn && helper ? helperId : undefined
+          }
           title={selectedItem ? itemToString(selectedItem) : label}
           {...toggleButtonProps}
           ref={mergeRefs(toggleButtonProps.ref, ref)}>

packages/react/src/components/MultiSelect/MultiSelect.js

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

packages/react/src/components/NumberInput/NumberInput.js

@@ -435,7 +435,9 @@ class NumberInput extends Component {
           });
 
           const helper = helperText ? (
-            <div className={helperTextClasses}>{helperText}</div>
+            <div className={helperTextClasses} id={normalizedProps.helperId}>
+              {helperText}
+            </div>
           ) : null;
 
           const labelClasses = classNames(`${prefix}--label`, {
@@ -475,6 +477,9 @@ class NumberInput extends Component {
           if (normalizedProps.warn) {
             ariaDescribedBy = normalizedProps.warnId;
           }
+          if (!normalizedProps.validation) {
+            ariaDescribedBy = helperText ? normalizedProps.helperId : undefined;
+          }
 
           return (
             <div

packages/react/src/components/Select/Select.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import {
   ChevronDown16,
@@ -17,6 +17,9 @@ import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
 import * as FeatureFlags from '@carbon/feature-flags';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const Select = React.forwardRef(function Select(
   {
@@ -44,6 +47,7 @@ const Select = React.forwardRef(function Select(
 ) {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
+  const { current: selectInstanceId } = useRef(getInstanceId());
 
   const selectClasses = classNames(
     {
@@ -82,12 +86,19 @@ 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) {
+    ariaProps['aria-describedby'] = helper ? helperId : undefined;
   }
   const input = (() => {
     return (

packages/react/src/components/TextArea/TextArea.js

@@ -6,11 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
 import { WarningFilled16 } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
 import { usePrefix } from '../../internal/usePrefix';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const TextArea = React.forwardRef(function TextArea(
   {
@@ -38,6 +41,8 @@ const TextArea = React.forwardRef(function TextArea(
     defaultValue?.length || value?.length || 0
   );
 
+  const { current: textAreaInstanceId } = useRef(getInstanceId());
+
   const textareaProps = {
     id,
     onChange: (evt) => {
@@ -82,8 +87,14 @@ const TextArea = React.forwardRef(function TextArea(
     [`${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';
@@ -103,14 +114,22 @@ const TextArea = React.forwardRef(function TextArea(
     }
   );
 
+  let ariaDescribedBy;
+
+  if (invalid) {
+    ariaDescribedBy = errorId;
+  } else if (!invalid && helperText) {
+    ariaDescribedBy = helperId;
+  }
+
   const input = (
     <textarea
       {...other}
       {...textareaProps}
       placeholder={placeholder || null}
       className={textareaClasses}
       aria-invalid={invalid || null}
-      aria-describedby={invalid ? errorId : null}
+      aria-describedby={ariaDescribedBy}
       disabled={other.disabled}
     />
   );

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

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { View16, ViewOff16, WarningFilled16 } from '@carbon/icons-react';
 import { textInputProps } from './util';
 import { warning } from '../../internal/warning';
 import { usePrefix } from '../../internal/usePrefix';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 let didWarnAboutDeprecation = false;
 
@@ -36,6 +39,7 @@ const ControlledPasswordInput = React.forwardRef(
     ref
   ) {
     const prefix = usePrefix();
+    const { current: controlledPasswordInstanceId } = useRef(getInstanceId());
 
     if (__DEV__) {
       warning(
@@ -108,13 +112,18 @@ 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,7 +139,9 @@ const ControlledPasswordInput = React.forwardRef(
       </>
     );
     const helper = helperText ? (
-      <div className={helperTextClasses}>{helperText}</div>
+      <div id={helperId} className={helperTextClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     return (

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

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

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

@@ -8,14 +8,21 @@ const warnProps = (warnId) => ({
   'aria-describedby': warnId,
 });
 
+const helperProps = (helperId) => ({
+  'aria-describedby': helperId,
+});
+
 export const textInputProps = ({
   sharedTextInputProps,
   invalid,
   invalidId,
   warn,
   warnId,
+  hasHelper,
+  helperId,
 }) => ({
   ...sharedTextInputProps,
   ...(invalid ? invalidProps(invalidId) : {}),
   ...(warn ? warnProps(warnId) : {}),
+  ...(hasHelper ? helperProps(helperId) : {}),
 });