carbon-react 152.5.0 → 152.6.0

package/esm/__internal__/input/input.component.d.ts

@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
 export declare type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
-    /** The id of the element that describe the input. */
+    /**
+     * Set the ID of the input's description.
+     * @deprecated Please use `aria-describedby` instead.
+     */
     ariaDescribedBy?: string;
+    /** The ID of the input's description, is set along with hint text and error message. */
+    "aria-describedby"?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */

package/esm/__internal__/input/input.component.js

@@ -27,7 +27,8 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/React.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
-  ariaDescribedBy,
+  "aria-describedby": ariaDescribedBy,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   placeholder,
   disabled,
   readOnly,
@@ -126,7 +127,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
     handleDeferred(ev);
   };
   const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
-  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+  const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
   if (hasValidationPart) {
     descriptionList.push(validationIconId);
   }

package/esm/components/link/link.component.js

@@ -36,6 +36,13 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     batchSelectionDisabled
   } = useContext(BatchSelectionContext);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = React.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
@@ -59,7 +66,7 @@ export const Link = /*#__PURE__*/React.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/esm/components/menu/menu-item/menu-item.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect, useContext, useState, useLayoutEffect } from "react";
 import invariant from "invariant";
 import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
@@ -63,8 +63,14 @@ export const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = useRef(null);
-  const firstFocusableChild = ref.current?.querySelector(focusableSelectors) ?? null;
+  const [ref, setRef] = useState(null);
+  const [firstFocusableChild, setFirstFocusableChild] = useState(null);
+  useLayoutEffect(() => {
+    const firstFocusable = ref?.querySelector(focusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -85,7 +91,7 @@ export const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -99,7 +105,7 @@ export const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (Events.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -114,7 +120,7 @@ export const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -153,7 +159,7 @@ export const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

package/esm/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -72,7 +72,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
       isInputInSelect: true
     }
   }, /*#__PURE__*/React.createElement(Textbox, _extends({
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "data-element": "select-input",
     "data-role": "select-textbox",

package/esm/components/select/simple-select/simple-select.component.js

@@ -342,7 +342,7 @@ export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     ariaLabelledby: ariaLabelledby,
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     isOpen: isOpen
   }, getTextboxProps()))), selectList);
 });

package/esm/components/textarea/textarea.component.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useContext, useCallback, useState } from "rea
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
-import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
+import useCharacterCount from "../../hooks/useCharacterCount";
 import Input from "../../__internal__/input/input.component";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
@@ -19,9 +19,12 @@ import Logger from "../../__internal__/utils/logger";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 export const Textarea = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByPropDeprecated,
   autoFocus,
   inputHint,
   fieldHelp,
@@ -103,6 +106,10 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    Logger.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
     // eslint-disable-next-line no-console
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
@@ -172,7 +179,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = useRef(guid());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     disabled: disabled,
     readOnly: readOnly,
@@ -186,7 +193,7 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,

package/esm/components/textbox/textbox.component.js

@@ -12,7 +12,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
 import Logger from "../../__internal__/utils/logger";
-import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
+import useCharacterCount from "../../hooks/useCharacterCount";
 import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import guid from "../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
@@ -23,8 +23,11 @@ export const SIZE_DEFAULT = "medium";
 export const LABEL_WIDTH_DEFAULT = 30;
 export const LABEL_VALIDATION_DEFAULT = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 export const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   align = ALIGN_DEFAULT,
   autoFocus,
   children,
@@ -106,6 +109,10 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    Logger.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   const {
     labelId,
     validationId,
@@ -122,7 +129,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
   });
   const hintId = useRef(guid());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
@@ -146,7 +153,7 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,

package/esm/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef, useEffect, useState } from "react";
-import CharacterCount from "../../../__internal__/character-count";
-import guid from "../../../__internal__/utils/helpers/guid";
-import useDebounce from "../useDebounce";
+import CharacterCount from "../../__internal__/character-count";
+import guid from "../../__internal__/utils/helpers/guid";
+import useDebounce from "../__internal__/useDebounce";
 const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = useState(value);

package/lib/__internal__/input/input.component.d.ts

@@ -3,8 +3,13 @@ import { BorderRadiusType } from "../../components/box/box.component";
 export declare type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
-    /** The id of the element that describe the input. */
+    /**
+     * Set the ID of the input's description.
+     * @deprecated Please use `aria-describedby` instead.
+     */
     ariaDescribedBy?: string;
+    /** The ID of the input's description, is set along with hint text and error message. */
+    "aria-describedby"?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */

package/lib/__internal__/input/input.component.js

@@ -36,7 +36,8 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
-  ariaDescribedBy,
+  "aria-describedby": ariaDescribedBy,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   placeholder,
   disabled,
   readOnly,
@@ -135,7 +136,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
     handleDeferred(ev);
   };
   const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
-  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+  const descriptionList = ariaDescribedBy || ariaDescribedByDeprecated ? [ariaDescribedBy || ariaDescribedByDeprecated] : [];
   if (hasValidationPart) {
     descriptionList.push(validationIconId);
   }

package/lib/components/link/link.component.js

@@ -45,6 +45,13 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     batchSelectionDisabled
   } = (0, _react.useContext)(_batchSelection.default);
   const isDisabled = disabled || batchSelectionDisabled;
+  const setRefs = _react.default.useCallback(reference => {
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") {
+      ref(reference);
+    }
+  }, [ref]);
   const renderLinkIcon = (currentAlignment = "left") => {
     const hasProperAlignment = icon && iconAlign === currentAlignment;
     return hasProperAlignment ? /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -68,7 +75,7 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
     onClick,
     disabled: isDisabled,
     target,
-    ref,
+    ref: setRefs,
     href,
     rel,
     "aria-label": ariaLabel,

package/lib/components/menu/menu-item/menu-item.component.js

@@ -72,8 +72,14 @@ const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = (0, _react.useRef)(null);
-  const firstFocusableChild = ref.current?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+  const [ref, setRef] = (0, _react.useState)(null);
+  const [firstFocusableChild, setFirstFocusableChild] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    const firstFocusable = ref?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -94,7 +100,7 @@ const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -108,7 +114,7 @@ const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (_events.default.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -123,7 +129,7 @@ const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -162,7 +168,7 @@ const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

package/lib/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -79,7 +79,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
       isInputInSelect: true
     }
   }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "data-element": "select-input",
     "data-role": "select-textbox",

package/lib/components/select/simple-select/simple-select.component.js

@@ -351,7 +351,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     ariaLabelledby: ariaLabelledby,
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     isOpen: isOpen
   }, getTextboxProps()))), selectList);
 });

package/lib/components/textarea/textarea.component.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _input = require("../../__internal__/input");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
-var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
 var _input2 = _interopRequireDefault(require("../../__internal__/input/input.component"));
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
@@ -28,9 +28,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByPropDeprecated,
   autoFocus,
   inputHint,
   fieldHelp,
@@ -112,6 +115,10 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    _logger.default.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
     // eslint-disable-next-line no-console
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
@@ -181,7 +188,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     disabled: disabled,
     readOnly: readOnly,
@@ -195,7 +202,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,

package/lib/components/textbox/textbox.component.js

@@ -17,7 +17,7 @@ var _utils = require("../../style/utils");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _numeralDate = _interopRequireDefault(require("../numeral-date/__internal__/numeral-date.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
 var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
@@ -32,8 +32,11 @@ const SIZE_DEFAULT = exports.SIZE_DEFAULT = "medium";
 const LABEL_WIDTH_DEFAULT = exports.LABEL_WIDTH_DEFAULT = 30;
 const LABEL_VALIDATION_DEFAULT = exports.LABEL_VALIDATION_DEFAULT = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   align = ALIGN_DEFAULT,
   autoFocus,
   children,
@@ -115,6 +118,10 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    _logger.default.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   const {
     labelId,
     validationId,
@@ -131,7 +138,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   });
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
@@ -155,7 +162,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,

package/lib/hooks/useCharacterCount/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/hooks/useCharacterCount/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/{__internal__/useCharacterCount → useCharacterCount}/useCharacterCount.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useDebounce = _interopRequireDefault(require("../useDebounce"));
+var _characterCount = _interopRequireDefault(require("../../__internal__/character-count"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _useDebounce = _interopRequireDefault(require("../__internal__/useDebounce"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.5.0",
+  "version": "152.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

package/lib/hooks/__internal__/useCharacterCount/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "../../../../esm/hooks/__internal__/useCharacterCount/index.js",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}