carbon-react 117.1.1 → 117.2.0

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/esm/locales/en-gb.js

@@ -14,6 +14,9 @@ const enGB = {
   batchSelection: {
     selected: count => `${count} selected`
   },
+  breadcrumbs: {
+    ariaLabel: () => "breadcrumbs"
+  },
   confirm: {
     no: () => "No",
     yes: () => "Yes"

package/esm/locales/locale.d.ts

@@ -11,6 +11,9 @@ interface Locale {
     batchSelection: {
         selected: (count: number | string) => string;
     };
+    breadcrumbs: {
+        ariaLabel: () => string;
+    };
     characterCount: {
         hintString: () => string;
         tooManyCharacters: (count: number, formattedCount: string) => string;

package/esm/locales/pl-pl.js

@@ -25,6 +25,9 @@ const plPL = {
   batchSelection: {
     selected: count => `${count} wybrano`
   },
+  breadcrumbs: {
+    ariaLabel: () => "okruszki"
+  },
   confirm: {
     no: () => "Nie",
     yes: () => "Tak"

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/breadcrumbs/breadcrumbs.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BreadcrumbsProps extends TagProps {
+    /** Child crumbs to display */
+    children: React.ReactNode;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

package/lib/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Breadcrumbs = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+
+var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs.style"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const l = (0, _useLocale.default)();
+  return /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, _extends({
+    ref: ref,
+    role: "navigation"
+  }, (0, _tags.default)("breadcrumbs", rest), {
+    "aria-label": l.breadcrumbs.ariaLabel()
+  }), /*#__PURE__*/_react.default.createElement("ol", null, children));
+});
+
+exports.Breadcrumbs = Breadcrumbs;
+Breadcrumbs.propTypes = {
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+var _default = Breadcrumbs;
+exports.default = _default;

package/lib/components/breadcrumbs/breadcrumbs.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export default StyledBreadcrumbs;

package/lib/components/breadcrumbs/breadcrumbs.style.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledBreadcrumbs = _styledComponents.default.nav`
+  ol {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+var _default = StyledBreadcrumbs;
+exports.default = _default;

package/lib/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -0,0 +1,11 @@
+import { LinkProps } from "components/link/link.component";
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
+    /** This sets the Crumb to current, does not render Link */
+    isCurrent?: boolean;
+    /** The href string for Crumb Link */
+    href: string;
+}
+declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
+export default Crumb;