carbon-react 117.1.0 → 117.1.2

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

@@ -44,7 +44,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   const {
     labelId,
     fieldHelpId,
-    validationIconId,
+    validationId,
     ariaDescribedBy
   } = useInputAccessibility({
     id,
@@ -70,17 +70,16 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     labelId,
     labelInline,
     labelSpacing,
-    name: id,
     reverse,
     warning,
-    validationIconId,
+    validationIconId: validationId,
     // We don't want an asterisk on each radio control, only the legend
     // However, we still want the input element to receive the required prop
     isRequired: isRadio ? undefined : required,
     useValidationIcon: validationOnLabel
   };
   const inputProps = {
-    "aria-describedby": ariaDescribedBy,
+    ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     "aria-invalid": !!error,
     autoFocus,
@@ -95,6 +94,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     onFocus,
     required,
     ref,
+    validationIconId: validationId,
     ...props
   };
   return /*#__PURE__*/React.createElement(StyledCheckableInputWrapper, {
@@ -161,6 +161,7 @@ CheckableInput.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -460,6 +461,7 @@ CheckableInput.propTypes = {
   "type": PropTypes.string.isRequired,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "type"> {
+    /** The id of the element that describe the input. */
+    ariaDescribedBy?: string;
     /** Prop to specify the aria-labelledby attribute of the input */
     ariaLabelledBy?: string;
     /** If true the Component will be focused when page load */
@@ -18,6 +20,8 @@ export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAtt
     onMouseLeave?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** OnMouseEnter event handler */
     onMouseEnter?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Id of the validation icon */
+    validationIconId?: string;
     /** Value of the input */
     value?: string;
 }

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
+  ariaDescribedBy,
   ariaLabelledBy,
   name,
   checked,
@@ -13,19 +14,24 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
   onChange,
   autoFocus,
   role,
+  validationIconId,
   ...props
 }, ref) => {
   const {
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    hasFocus,
+    hasMouseOver
   } = useContext(InputContext);
   const {
     onBlur: onBlurGroup,
     onFocus: onFocusGroup,
     onMouseEnter: onMouseEnterGroup,
-    onMouseLeave: onMouseLeaveGroup
+    onMouseLeave: onMouseLeaveGroup,
+    hasFocus: hasGroupFocus,
+    hasMouseOver: hasGroupMouseOver
   } = useContext(InputGroupContext);
 
   const handleFocus = ev => {
@@ -52,7 +58,16 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
     if (onMouseLeaveGroup) onMouseLeaveGroup();
   };
 
+  const hasValidationPart = (hasFocus || hasGroupFocus || hasMouseOver || hasGroupMouseOver) && validationIconId;
+  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+
+  if (hasValidationPart) {
+    descriptionList.push(validationIconId);
+  }
+
+  const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(HiddenCheckableInputStyle, _extends({
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
     "aria-checked": checked,
@@ -123,6 +138,7 @@ HiddenCheckableInput.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -359,6 +375,7 @@ HiddenCheckableInput.propTypes = {
   "type": PropTypes.string.isRequired,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "value": PropTypes.string,
   "vocab": PropTypes.string,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])

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

@@ -1,6 +1,8 @@
 import React from "react";
 export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     align?: "right" | "left";
+    /** The id of the element that describe the input. */
+    ariaDescribedBy?: string;
     /** Override the variant component */
     as?: React.ElementType;
     /** If true the Component will be focused when rendered */
@@ -29,6 +31,8 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     readOnly?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
 }
 export interface InputProps extends CommonInputProps {
     /** The visible width of the text control, in average character widths */

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

@@ -30,6 +30,7 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/React.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
+  ariaDescribedBy,
   placeholder,
   disabled,
   readOnly,
@@ -45,6 +46,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   type = "text",
   id,
   name,
+  validationIconId,
   ...rest
 }, ref) => {
   const context = useContext(InputContext);
@@ -145,7 +147,16 @@ const Input = /*#__PURE__*/React.forwardRef(({
     handleDeferred(ev);
   };
 
+  const hasValidationPart = (context.hasFocus || groupContext.hasFocus || context.hasMouseOver || groupContext.hasMouseOver) && validationIconId;
+  const descriptionList = ariaDescribedBy ? [ariaDescribedBy] : [];
+
+  if (hasValidationPart) {
+    descriptionList.push(validationIconId);
+  }
+
+  const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     align: align,
     placeholder: placeholder,
@@ -216,6 +227,7 @@ Input.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -508,6 +520,7 @@ Input.propTypes = {
   "type": PropTypes.string,
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
   "vocab": PropTypes.string,
   "width": PropTypes.oneOfType([PropTypes.number, PropTypes.string])

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -47,7 +47,7 @@ const InputIconToggle = ({
       onBlur: onBlur,
       isPartOfInput: true,
       tabIndex: iconTabIndex,
-      iconId: validationIconId,
+      tooltipId: validationIconId,
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }

package/esm/__internal__/label/label.component.js

@@ -85,8 +85,7 @@ const Label = ({
         inline
       });
       return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
-        iconId: validationIconId,
-        tooltipId: tooltipId,
+        tooltipId: validationIconId,
         error: error,
         warning: warning,
         info: info,

package/esm/__internal__/sticky-footer/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./sticky-footer.component";
+export type { StickyFooterProps } from "./sticky-footer.component";

package/esm/__internal__/sticky-footer/sticky-footer.component.d.ts

@@ -1,15 +1,11 @@
-export default StickyFooter;
-declare function StickyFooter({ children, containerRef, disableSticky, ...rest }: {
-    [x: string]: any;
-    children: any;
-    containerRef: any;
-    disableSticky: any;
-}): JSX.Element;
-declare namespace StickyFooter {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const containerRef: PropTypes.Validator<any>;
-        const disableSticky: PropTypes.Requireable<boolean>;
-    }
+import React from "react";
+export interface StickyFooterProps {
+    /** child elements */
+    children: React.ReactNode;
+    /** Ref of the container the footer should be sticky on */
+    containerRef: React.RefObject<HTMLElement>;
+    /** Disable the sticky behaviour manually */
+    disableSticky?: boolean;
 }
-import PropTypes from "prop-types";
+declare const StickyFooter: ({ children, containerRef, disableSticky, ...rest }: StickyFooterProps) => JSX.Element;
+export default StickyFooter;

package/esm/__internal__/sticky-footer/sticky-footer.component.js

@@ -13,18 +13,29 @@ const StickyFooter = ({
   ...rest
 }) => {
   const [isSticky, setIsSticky] = useState(true);
-  const footerRef = useRef();
+  const footerRef = useRef(null);
   const checkFooterPosition = useCallback(throttle(() => {
     const content = containerRef.current;
-    const stickyOffset = footerRef.current.clientHeight / 2;
-    const fullyScrolled = content.scrollHeight - content.scrollTop - stickyOffset <= content.clientHeight;
+    /* Fallback to 0 to satisfy the TypeScript compiler */
+
+    /* footerRef will never be null in this method */
+
+    /* istanbul ignore next */
+
+    const stickyOffset = footerRef.current ? footerRef.current.clientHeight / 2 : 0;
+    let fullyScrolled; // istanbul ignore else
+
+    if (content) {
+      fullyScrolled = content.scrollHeight - content.scrollTop - stickyOffset <= content.clientHeight;
+    }
+
     setIsSticky(!fullyScrolled);
   }, SCROLL_THROTTLE), []);
   useEffect(() => {
     const content = containerRef.current;
-    content.addEventListener("scroll", checkFooterPosition, false);
+    content === null || content === void 0 ? void 0 : content.addEventListener("scroll", checkFooterPosition, false);
     return () => {
-      content.removeEventListener("scroll", checkFooterPosition, false);
+      content === null || content === void 0 ? void 0 : content.removeEventListener("scroll", checkFooterPosition, false);
     };
   }, [checkFooterPosition, containerRef]);
   return /*#__PURE__*/React.createElement(StyledStickyFooter, _extends({
@@ -35,13 +46,16 @@ const StickyFooter = ({
 };
 
 StickyFooter.propTypes = {
-  /** child elements */
-  children: PropTypes.node.isRequired,
-
-  /** Ref of the container the footer should be sticky on */
-  containerRef: PropTypes.any.isRequired,
-
-  /** Disable the sticky behaviour manually */
-  disableSticky: PropTypes.bool
+  "children": PropTypes.node,
+  "containerRef": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
+  }).isRequired,
+  "disableSticky": PropTypes.bool
 };
 export default StickyFooter;

package/esm/__internal__/sticky-footer/sticky-footer.style.d.ts

@@ -1,2 +1,4 @@
+declare const StyledStickyFooter: import("styled-components").StyledComponent<"div", any, {
+    sticky: boolean;
+}, never>;
 export default StyledStickyFooter;
-declare const StyledStickyFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -3,9 +3,11 @@ export interface ValidationMessageProps {
     /** Indicate that error has occurred
     Pass string to display hint with error */
     error?: boolean | string;
+    /** Id of the component, to be used for accessibility purposes */
+    validationId?: string;
     /** Indicate that warning has occurred
     Pass string to display hint with warning */
     warning?: boolean | string;
 }
-declare const ValidationMessage: ({ error, warning }: ValidationMessageProps) => JSX.Element | null;
+declare const ValidationMessage: ({ error, validationId, warning, }: ValidationMessageProps) => JSX.Element | null;
 export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -4,17 +4,20 @@ import StyledValidationMessage from "./validation-message.style";
 
 const ValidationMessage = ({
   error,
+  validationId,
   warning
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
+    id: validationId,
     isWarning: !!(!error && warning)
   }, validation) : null;
 };
 
 ValidationMessage.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "validationId": PropTypes.string,
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default ValidationMessage;

package/esm/__internal__/validations/validation-icon.component.js

@@ -1,8 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+import guid from "../utils/helpers/guid";
 import Icon from "../../components/icon";
 import ValidationIconStyle from "./validation-icon.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
@@ -35,6 +36,7 @@ const ValidationIcon = ({
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const validationTooltipId = useRef(tooltipId || guid());
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
@@ -76,10 +78,11 @@ const ValidationIcon = ({
     },
     isPartOfInput: isPartOfInput
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Icon, {
+    "aria-describedby": validationTooltipId.current,
     key: `${validationType}-icon`,
     type: validationType,
     tabIndex: tabIndex,
-    tooltipId: tooltipId,
+    tooltipId: validationTooltipId.current,
     tooltipMessage: validationMessage,
     tooltipPosition: tooltipPosition,
     tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
@@ -87,7 +90,6 @@ const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    ariaLabel: validationMessage,
     focusable: tabIndex !== -1
   }));
 };

package/esm/components/checkbox/checkbox.component.js

@@ -165,6 +165,7 @@ Checkbox.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -625,6 +626,7 @@ Checkbox.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/date/date.d.ts

@@ -45,6 +45,8 @@ export interface DateInputProps
   pickerProps?: DayPickerProps;
 }
 
-declare function DateInput(props: DateInputProps): JSX.Element;
+declare function DateInput(
+  props: SimpleSelectProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
 
 export default DateInput;

package/esm/components/decimal/decimal.component.js

@@ -268,6 +268,7 @@ Decimal.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -737,6 +738,7 @@ Decimal.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/drawer/drawer.component.js

@@ -154,8 +154,7 @@ const Drawer = ({
     }
   }, sidebar), footer && /*#__PURE__*/React.createElement(StickyFooter, {
     containerRef: scrollableContentRef,
-    disableSticky: !stickyFooter,
-    isExpanded: isExpanded
+    disableSticky: !stickyFooter
   }, footer))), /*#__PURE__*/React.createElement(StyledDrawerChildren, null, children));
 };
 

package/esm/components/grouped-character/grouped-character.component.js

@@ -183,6 +183,7 @@ GroupedCharacter.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -656,6 +657,7 @@ GroupedCharacter.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/number/number.component.js

@@ -108,6 +108,7 @@ Number.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -579,6 +580,7 @@ Number.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

package/esm/components/radio-button/radio-button.component.js

@@ -161,6 +161,7 @@ RadioButton.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -621,6 +622,7 @@ RadioButton.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string.isRequired,
   "vocab": PropTypes.string,

package/esm/components/switch/switch.component.js

@@ -169,6 +169,7 @@ Switch.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -630,6 +631,7 @@ Switch.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,

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

@@ -103,11 +103,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
 
   const {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   } = useInputAccessibility({
     id,
+    validationRedesignOptIn,
     error,
     warning,
     info,
@@ -141,13 +142,12 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, [expandable]);
-  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = useRef(guid());
   const characterCountHintIdValue = characterCount ? characterCountHintId : undefined;
   const inputHintIdValue = inputHint ? hintId.current : undefined;
   const hintIdValue = characterLimit ? characterCountHintIdValue : inputHintIdValue;
-  const ariaDescribedByValues = [validationRedesignOptIn ? undefined : ariaDescribedBy, hintIdValue];
-  const ariaDescribedByValue = ariaDescribedByValues.filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
@@ -160,7 +160,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedByValue,
+    ariaDescribedBy: combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -174,7 +174,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     cols: cols,
     id: id,
     as: "textarea",
-    inputRef: inputRef
+    inputRef: inputRef,
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }, rest)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     disabled: disabled,
     readOnly: readOnly,
@@ -183,7 +184,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     error: error,
     warning: warning,
     info: info,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
   const marginProps = useFormSpacing(rest);
@@ -222,6 +223,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
+    validationId: validationId,
     warning: warning
   }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
@@ -282,6 +284,7 @@ Textarea.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaDescribedBy": PropTypes.string,
   "as": PropTypes.elementType,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
@@ -747,6 +750,7 @@ Textarea.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.string,
   "vocab": PropTypes.string,