carbon-react 117.1.1 → 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__/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/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/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,

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

@@ -95,11 +95,12 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
 
   const {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   } = useInputAccessibility({
     id: uniqueId,
+    validationRedesignOptIn,
     error,
     warning,
     info,
@@ -110,9 +111,8 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   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 hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
     disabled: disabled,
@@ -134,7 +134,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedByValue,
+    ariaDescribedBy: combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -151,7 +151,8 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,
     value: typeof formattedValue === "string" ? formattedValue : value,
-    maxLength: maxLength
+    maxLength: maxLength,
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }, props)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     align: align,
     disabled: disabled,
@@ -165,7 +166,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     size: size,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }));
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
@@ -193,7 +194,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
   }, filterStyledSystemMarginProps(props)), characterLimit || inputHint ? /*#__PURE__*/React.createElement(StyledInputHint, {
     id: hintIdValue,
@@ -202,6 +203,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
+    validationId: validationId,
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning)
@@ -262,6 +264,7 @@ Textbox.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,
@@ -733,6 +736,7 @@ Textbox.propTypes = {
   "translate": PropTypes.oneOf(["no", "yes"]),
   "typeof": PropTypes.string,
   "unselectable": PropTypes.oneOf(["off", "on"]),
+  "validationIconId": PropTypes.string,
   "validationOnLabel": PropTypes.bool,
   "value": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
   "vocab": PropTypes.string,

package/esm/hooks/__internal__/useInputAccessibility/useInputAccessibility.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export default function useInputAccessibility({ id, error, warning, info, label, fieldHelp, }: {
+export default function useInputAccessibility({ id, validationRedesignOptIn, error, warning, info, label, fieldHelp, }: {
     id: string;
+    validationRedesignOptIn?: boolean;
     error?: string | boolean;
     warning?: string | boolean;
     info?: string | boolean;
@@ -8,7 +9,7 @@ export default function useInputAccessibility({ id, error, warning, info, label,
     fieldHelp?: React.ReactNode;
 }): {
     labelId?: string;
-    validationIconId?: string;
+    validationId?: string;
     fieldHelpId?: string;
     ariaDescribedBy?: string;
 };

package/esm/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -1,5 +1,6 @@
 export default function useInputAccessibility({
   id,
+  validationRedesignOptIn,
   error,
   warning,
   info,
@@ -7,12 +8,18 @@ export default function useInputAccessibility({
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const validationIconId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation-icon` : undefined;
+  const validationId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
-  const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
+  const descriptionList = fieldHelpId ? [fieldHelpId] : [];
+
+  if (validationRedesignOptIn && validationId) {
+    descriptionList.push(validationId);
+  }
+
+  const ariaDescribedBy = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   };

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

@@ -65,7 +65,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   const {
     labelId,
     fieldHelpId,
-    validationIconId,
+    validationId,
     ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
     id,
@@ -91,17 +91,16 @@ const CheckableInput = /*#__PURE__*/_react.default.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,
@@ -116,6 +115,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     onFocus,
     required,
     ref,
+    validationIconId: validationId,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInputWrapper, {
@@ -183,6 +183,7 @@ CheckableInput.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaDescribedBy": _propTypes.default.string,
   "ariaLabelledBy": _propTypes.default.string,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
@@ -482,6 +483,7 @@ CheckableInput.propTypes = {
   "type": _propTypes.default.string.isRequired,
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
+  "validationIconId": _propTypes.default.string,
   "validationOnLabel": _propTypes.default.bool,
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,

package/lib/__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/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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); }
 
 const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
+  ariaDescribedBy,
   ariaLabelledBy,
   name,
   checked,
@@ -30,19 +31,24 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   autoFocus,
   role,
+  validationIconId,
   ...props
 }, ref) => {
   const {
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    hasFocus,
+    hasMouseOver
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
   const {
     onBlur: onBlurGroup,
     onFocus: onFocusGroup,
     onMouseEnter: onMouseEnterGroup,
-    onMouseLeave: onMouseLeaveGroup
+    onMouseLeave: onMouseLeaveGroup,
+    hasFocus: hasGroupFocus,
+    hasMouseOver: hasGroupMouseOver
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
 
   const handleFocus = ev => {
@@ -69,7 +75,16 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.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.default.createElement(_hiddenCheckableInput.default, _extends({
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
     "aria-checked": checked,
@@ -141,6 +156,7 @@ HiddenCheckableInput.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaDescribedBy": _propTypes.default.string,
   "ariaLabelledBy": _propTypes.default.string,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
@@ -377,6 +393,7 @@ HiddenCheckableInput.propTypes = {
   "type": _propTypes.default.string.isRequired,
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
+  "validationIconId": _propTypes.default.string,
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])

package/lib/__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/lib/__internal__/input/input.component.js

@@ -46,6 +46,7 @@ function selectTextOnFocus(input) {
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
   "aria-labelledby": ariaLabelledBy,
+  ariaDescribedBy,
   placeholder,
   disabled,
   readOnly,
@@ -61,6 +62,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   type = "text",
   id,
   name,
+  validationIconId,
   ...rest
 }, ref) => {
   const context = (0, _react.useContext)(_inputBehaviour.InputContext);
@@ -161,7 +163,16 @@ const Input = /*#__PURE__*/_react.default.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.default.createElement(_input2.default, _extends({}, rest, {
+    "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,
     align: align,
     placeholder: placeholder,
@@ -233,6 +244,7 @@ Input.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaDescribedBy": _propTypes.default.string,
   "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
@@ -525,6 +537,7 @@ Input.propTypes = {
   "type": _propTypes.default.string,
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
+  "validationIconId": _propTypes.default.string,
   "value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
   "vocab": _propTypes.default.string,
   "width": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])

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

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

package/lib/__internal__/label/label.component.js

@@ -104,8 +104,7 @@ const Label = ({
         inline
       });
       return /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-        iconId: validationIconId,
-        tooltipId: tooltipId,
+        tooltipId: validationIconId,
         error: error,
         warning: warning,
         info: info,

package/lib/__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/lib/__internal__/validation-message/validation-message.component.js

@@ -15,17 +15,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ValidationMessage = ({
   error,
+  validationId,
   warning
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    id: validationId,
     isWarning: !!(!error && warning)
   }, validation) : null;
 };
 
 ValidationMessage.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "validationId": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = ValidationMessage;

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

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _invariant = _interopRequireDefault(require("invariant"));
 
+var _guid = _interopRequireDefault(require("../utils/helpers/guid"));
+
 var _icon = _interopRequireDefault(require("../../components/icon"));
 
 var _validationIcon = _interopRequireDefault(require("./validation-icon.style"));
@@ -54,6 +56,7 @@ const ValidationIcon = ({
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const validationTooltipId = (0, _react.useRef)(tooltipId || (0, _guid.default)());
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
 
   if (tooltipFlipOverrides) {
@@ -95,10 +98,11 @@ const ValidationIcon = ({
     },
     isPartOfInput: isPartOfInput
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    "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,
@@ -106,7 +110,6 @@ const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    ariaLabel: validationMessage,
     focusable: tabIndex !== -1
   }));
 };

package/lib/components/checkbox/checkbox.component.js

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

package/lib/components/decimal/decimal.component.js

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

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

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

package/lib/components/number/number.component.js

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

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

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

package/lib/components/switch/switch.component.js

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

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

@@ -136,11 +136,12 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
 
   const {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
     id,
+    validationRedesignOptIn,
     error,
     warning,
     info,
@@ -174,13 +175,12 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
       }
     };
   }, [expandable]);
-  const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = (0, _react.useRef)((0, _guid.default)());
   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.default.createElement(_input.InputPresentation, {
     size: size,
@@ -194,7 +194,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedByValue,
+    ariaDescribedBy: combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -208,7 +208,8 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     cols: cols,
     id: id,
     as: "textarea",
-    inputRef: inputRef
+    inputRef: inputRef,
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }, rest)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     disabled: disabled,
     readOnly: readOnly,
@@ -217,7 +218,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     error: error,
     warning: warning,
     info: info,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationIconId: validationRedesignOptIn ? undefined : validationId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
 
@@ -257,6 +258,7 @@ const Textarea = /*#__PURE__*/_react.default.forwardRef(({
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
+    validationId: validationId,
     warning: warning
   }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
@@ -319,6 +321,7 @@ Textarea.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaDescribedBy": _propTypes.default.string,
   "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
@@ -784,6 +787,7 @@ Textarea.propTypes = {
   "translate": _propTypes.default.oneOf(["no", "yes"]),
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
+  "validationIconId": _propTypes.default.string,
   "validationOnLabel": _propTypes.default.bool,
   "value": _propTypes.default.string,
   "vocab": _propTypes.default.string,

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

@@ -129,11 +129,12 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
 
   const {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
     id: uniqueId,
+    validationRedesignOptIn,
     error,
     warning,
     info,
@@ -144,9 +145,8 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
   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 hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
+  const combinedAriaDescribedBy = [ariaDescribedBy, hintIdValue].filter(Boolean).join(" ");
+  const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
 
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
@@ -169,7 +169,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedByValue,
+    ariaDescribedBy: combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -186,7 +186,8 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,
     value: typeof formattedValue === "string" ? formattedValue : value,
-    maxLength: maxLength
+    maxLength: maxLength,
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }, props)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     align: align,
     disabled: disabled,
@@ -200,7 +201,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     size: size,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId
+    validationIconId: validationRedesignOptIn ? undefined : validationId
   }));
 
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -229,7 +230,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationIconId: validationRedesignOptIn ? undefined : validationId,
     validationRedesignOptIn: validationRedesignOptIn
   }, (0, _utils.filterStyledSystemMarginProps)(props)), characterLimit || inputHint ? /*#__PURE__*/_react.default.createElement(_textbox.StyledInputHint, {
     id: hintIdValue,
@@ -238,6 +239,7 @@ const Textbox = /*#__PURE__*/_react.default.forwardRef(({
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
+    validationId: validationId,
     warning: warning
   }), !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning)
@@ -300,6 +302,7 @@ Textbox.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaDescribedBy": _propTypes.default.string,
   "as": _propTypes.default.elementType,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
@@ -771,6 +774,7 @@ Textbox.propTypes = {
   "translate": _propTypes.default.oneOf(["no", "yes"]),
   "typeof": _propTypes.default.string,
   "unselectable": _propTypes.default.oneOf(["off", "on"]),
+  "validationIconId": _propTypes.default.string,
   "validationOnLabel": _propTypes.default.bool,
   "value": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
   "vocab": _propTypes.default.string,

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export default function useInputAccessibility({ id, error, warning, info, label, fieldHelp, }: {
+export default function useInputAccessibility({ id, validationRedesignOptIn, error, warning, info, label, fieldHelp, }: {
     id: string;
+    validationRedesignOptIn?: boolean;
     error?: string | boolean;
     warning?: string | boolean;
     info?: string | boolean;
@@ -8,7 +9,7 @@ export default function useInputAccessibility({ id, error, warning, info, label,
     fieldHelp?: React.ReactNode;
 }): {
     labelId?: string;
-    validationIconId?: string;
+    validationId?: string;
     fieldHelpId?: string;
     ariaDescribedBy?: string;
 };

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -7,6 +7,7 @@ exports.default = useInputAccessibility;
 
 function useInputAccessibility({
   id,
+  validationRedesignOptIn,
   error,
   warning,
   info,
@@ -14,12 +15,18 @@ function useInputAccessibility({
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const validationIconId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation-icon` : undefined;
+  const validationId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
-  const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
+  const descriptionList = fieldHelpId ? [fieldHelpId] : [];
+
+  if (validationRedesignOptIn && validationId) {
+    descriptionList.push(validationId);
+  }
+
+  const ariaDescribedBy = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return {
     labelId,
-    validationIconId,
+    validationId,
     fieldHelpId,
     ariaDescribedBy
   };

package/package.json

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