carbon-react 101.3.1 → 101.4.1

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

@@ -19,6 +19,8 @@ var _hiddenCheckableInput = _interopRequireDefault(require("./hidden-checkable-i
 
 var _guid = _interopRequireDefault(require("../utils/helpers/guid"));
 
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -26,6 +28,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const CheckableInput = ({
+  ariaLabelledBy: externalAriaLabelledBy,
   autoFocus,
   checked,
   children,
@@ -58,16 +61,28 @@ const CheckableInput = ({
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
-  const labelId = label ? `${id}-label` : undefined;
-  const helpId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-help` : undefined;
-  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
+  const {
+    labelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    labelHelp,
+    fieldHelp
+  });
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
     error,
     fieldHelp,
     fieldHelpInline,
-    helpId,
+    tooltipId,
     fieldHelpId,
     id,
     info,
@@ -87,16 +102,16 @@ const CheckableInput = ({
     useValidationIcon: validationOnLabel
   };
   const inputProps = {
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": externalAriaLabelledBy || ariaLabelledBy,
+    "aria-invalid": !!error,
     autoFocus,
     checked,
     disabled,
-    helpId,
-    fieldHelpId,
     id,
     inputRef,
     type,
     value,
-    labelId,
     name,
     onBlur,
     onChange,
@@ -202,7 +217,10 @@ CheckableInput.propTypes = {
   })]),
 
   /** When true, displays validation icon on label */
-  validationOnLabel: _propTypes.default.bool
+  validationOnLabel: _propTypes.default.bool,
+
+  /** The id of the element that labels the input */
+  ariaLabelledBy: _propTypes.default.string
 };
 CheckableInput.defaultProps = {
   reverse: false,

package/lib/__internal__/checkable-input/checkable-input.d.ts

@@ -33,6 +33,8 @@ export interface CommonCheckableInputProps
   reverse?: boolean;
   /** Size of the component */
   size?: "small" | "large";
+  /** The id of the element that labels the input */
+  ariaLabelledBy?: string;
 }
 
 export interface CheckableInputProps extends CommonCheckableInputProps {

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

@@ -22,9 +22,6 @@ 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 = ({
-  helpId,
-  fieldHelpId,
-  labelId,
   name,
   checked,
   type,
@@ -32,7 +29,6 @@ const HiddenCheckableInput = ({
   inputRef,
   onChange,
   autoFocus,
-  ariaLabelledBy,
   ...props
 }) => {
   const {
@@ -72,13 +68,10 @@ const HiddenCheckableInput = ({
     if (onMouseLeaveGroup) onMouseLeaveGroup(ev);
   };
 
-  const ariaDescribedBy = [fieldHelpId, helpId].filter(Boolean).join(" ");
   return /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, _extends({
     autoFocus: autoFocus,
     "aria-checked": checked,
     checked: checked,
-    "aria-labelledby": ariaLabelledBy || labelId,
-    "aria-describedby": ariaDescribedBy,
     name: name,
     role: type,
     type: type,
@@ -100,12 +93,6 @@ HiddenCheckableInput.propTypes = {
   /** Checked state of the input */
   checked: _propTypes.default.bool,
 
-  /** Element id for aria-describedby */
-  helpId: _propTypes.default.string,
-
-  /** Element id for aria-describedby */
-  fieldHelpId: _propTypes.default.string,
-
   /** Input name */
   name: _propTypes.default.string,
 
@@ -124,9 +111,6 @@ HiddenCheckableInput.propTypes = {
   /** OnMouseEnter event handler */
   onMouseEnter: _propTypes.default.func,
 
-  /** Element id for aria-labelledby */
-  labelId: _propTypes.default.string,
-
   /** HTML type attribute of the input */
   type: _propTypes.default.string.isRequired,
 
@@ -136,10 +120,7 @@ HiddenCheckableInput.propTypes = {
   /** A callback to retrieve the input reference */
   inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.instanceOf(Element)
-  })]),
-
-  /** The id of the element that labels the input */
-  ariaLabelledBy: _propTypes.default.string
+  })])
 };
 
 var _default = /*#__PURE__*/_react.default.memo(HiddenCheckableInput);

package/lib/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -31,14 +31,6 @@ export interface HiddenCheckableInputProps
   extends CommonHiddenCheckableInputProps {
   /** HTML type attribute of the input */
   type: string;
-  /** Element id for aria-describedby */
-  helpId?: string;
-  /** Element id for aria-describedby */
-  fieldHelpId?: string;
-  /** Element id for aria-labelledby */
-  labelId?: string;
-  /** The id of the element that labels the input */
-  ariaLabelledBy?: string;
 }
 
 declare function HiddenCheckableInput(

package/lib/__internal__/date/date.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _moment = _interopRequireDefault(require("moment"));
 
+require("moment/min/locales");
+
 var _lodash = require("lodash");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -161,14 +163,12 @@ const DateHelper = {
    * formats - given accepted formats
    * locale - current locale
    * strict - moment js strict mode
-   * sanitize - should value be sanitized before parsing
    */
   _defaultMomentOptions: (locale, formats) => {
     return {
       locale,
       formats,
-      strict: true,
-      sanitize: true
+      strict: true
     };
   },
 
@@ -185,7 +185,7 @@ const DateHelper = {
     value,
     options,
     locale,
-    formats,
+    formats = [],
     format
   }) {
     const opts = (0, _lodash.merge)(DateHelper._defaultMomentOptions(locale, formats), options, {
@@ -193,8 +193,7 @@ const DateHelper = {
       formats,
       format
     });
-    const val = opts.sanitize ? DateHelper.sanitizeDateInput(value) : value;
-    return (0, _moment.default)(val, [format, ...opts.formats], opts.locale, opts.strict);
+    return (0, _moment.default)(value, [format, isoDateFormat, ...opts.formats], opts.locale, opts.strict);
   },
 
   formatDateToCurrentLocale({
@@ -206,9 +205,6 @@ const DateHelper = {
     return DateHelper.formatValue({
       value,
       formatTo: format,
-      options: {
-        formats: [format]
-      },
       locale,
       formats,
       format

package/lib/__internal__/form-field/form-field.component.js

@@ -43,7 +43,7 @@ const FormField = ({
   error,
   warning,
   info,
-  helpId,
+  tooltipId,
   fieldHelpId,
   helpTabIndex,
   label,
@@ -93,7 +93,7 @@ const FormField = ({
     warning: warning,
     info: info,
     help: labelHelp,
-    helpId: helpId,
+    tooltipId: tooltipId,
     helpTabIndex: helpTabIndex,
     htmlFor: id,
     helpIcon: labelHelpIcon,
@@ -128,7 +128,7 @@ FormField.propTypes = {
   error: errorPropType,
   warning: errorPropType,
   info: errorPropType,
-  helpId: _propTypes.default.string,
+  tooltipId: _propTypes.default.string,
   fieldHelpId: _propTypes.default.string,
   helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   id: _propTypes.default.string.isRequired,

package/lib/__internal__/form-field/form-field.d.ts

@@ -9,8 +9,8 @@ export interface CommonFormFieldPropTypes
   disabled?: boolean;
   /** Help content to be displayed under an input */
   fieldHelp?: React.ReactNode;
-  /** The unique id of the Help component */
-  helpId?: string;
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId?: string;
   /** The unique id of the FieldHelp component */
   fieldHelpId?: string;
   /** Overrides the default tabindex of the Help component */

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

@@ -40,7 +40,8 @@ const InputIconToggle = ({
   info,
   useValidationIcon,
   align,
-  iconTabIndex
+  iconTabIndex,
+  tooltipId
 }) => {
   if (useValidationIcon && !disabled && shouldDisplayValidationIcon({
     error,
@@ -59,6 +60,7 @@ const InputIconToggle = ({
       onBlur: onBlur,
       isPartOfInput: true,
       tabIndex: iconTabIndex,
+      tooltipId: tooltipId,
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }
@@ -72,7 +74,8 @@ const InputIconToggle = ({
       onMouseDown: onMouseDown,
       tabIndex: iconTabIndex
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: type
+      type: type,
+      tooltipId: tooltipId
     }));
   }
 
@@ -93,7 +96,8 @@ InputIconToggle.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
   align: _propTypes.default.oneOf(["left", "right"]),
   useValidationIcon: _propTypes.default.bool,
-  iconTabIndex: _propTypes.default.number
+  iconTabIndex: _propTypes.default.number,
+  tooltipId: _propTypes.default.string
 };
 var _default = InputIconToggle;
 exports.default = _default;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.d.ts

@@ -15,6 +15,7 @@ export interface InputIconToggleProps {
   align?: "left" | "right";
   useValidationIcon?: boolean;
   iconTabIndex?: number;
+  tooltipId?: string;
 }
 declare function InputIconToggle(props: InputIconToggleProps): JSX.Element;
 

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

@@ -51,7 +51,7 @@ const Label = ({
   width,
   optional,
   labelId,
-  helpId,
+  tooltipId,
   children,
   error,
   warning,
@@ -104,7 +104,7 @@ const Label = ({
         inline
       });
       return /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-        iconId: helpId,
+        tooltipId: tooltipId,
         error: error,
         warning: warning,
         info: info,
@@ -114,7 +114,7 @@ const Label = ({
     }
 
     return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
-      helpId: helpId,
+      tooltipId: tooltipId,
       tabIndex: helpTabIndex,
       type: helpIcon,
       isFocused: isFocused
@@ -158,8 +158,8 @@ Label.propTypes = {
   /** The unique id of the label element */
   labelId: _propTypes.default.string,
 
-  /** The unique id of the Help component */
-  helpId: _propTypes.default.string,
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId: _propTypes.default.string,
 
   /** Children elements */
   children: _propTypes.default.node,

package/lib/__internal__/label/label.d.ts

@@ -16,8 +16,8 @@ export interface LabelPropTypes extends ValidationPropTypes {
   optional?: boolean;
   /** The unique id of the label element */
   labelId?: string;
-  /** The unique id of the Help component */
-  helpId?: string;
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId?: string;
   /** Children elements */
   children?: React.ReactNode;
   /** A message that the Help component will display */

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

@@ -48,6 +48,7 @@ const ValidationIcon = ({
   onFocus,
   onBlur,
   iconId,
+  tooltipId,
   isPartOfInput,
   tabIndex,
   onClick,
@@ -95,6 +96,7 @@ const ValidationIcon = ({
     key: `${validationType}-icon`,
     type: validationType,
     tabIndex: tabIndex,
+    tooltipId: tooltipId,
     tooltipMessage: validationMessage,
     tooltipPosition: tooltipPosition,
     tooltipVisible: hasFocus || hasMouseOver || groupHasFocus || groupHasMouseOver || triggeredByIcon,
@@ -130,6 +132,9 @@ ValidationIcon.propTypes = { ...marginPropTypes,
     `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
   },
 
+  /** Id passed to the tooltip container, used for accessibility purposes. */
+  tooltipId: _propTypes.default.string,
+
   /** An onClick handler */
   onClick: _propTypes.default.func,
 

package/lib/__internal__/validations/validation-icon.d.ts

@@ -15,6 +15,8 @@ export interface ValidationIconProps extends ValidationPropTypes {
    * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
    */
   tooltipFlipOverrides?: ["top" | "bottom" | "left" | "right"];
+  /** Id passed to the tooltip container, used for accessibility purposes */
+  tooltipId?: string;
   /** An onClick handler */
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
   /** An onBlur handler */

package/lib/components/date/date.component.js

@@ -167,13 +167,11 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         _this.reformatVisibleDate();
 
         if (_this.props.onBlur && !_this.state.isDatePickerOpen) {
-          const dateWithSlashes = _date.default.sanitizeDateInput(_this.state.visibleValue);
-
           const event = _this.buildCustomEvent({
             target: _this.input,
             type: "blur"
           }, _date.default.formatValue({
-            value: dateWithSlashes,
+            value: _this.state.visibleValue,
             ..._this.localeData
           }));
 
@@ -365,10 +363,8 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
       } = _this.props;
       const value = ev.target.value.formattedValue || ev.target.value;
 
-      const dateWithSlashes = _date.default.sanitizeDateInput(value);
-
       const isValidDate = _date.default.isValidDate({
-        value: dateWithSlashes,
+        value,
         ..._this.localeData
       });
 
@@ -378,7 +374,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
 
       if (isValidDate || _this.canBeEmptyValues(value)) {
         isoDateString = _date.default.formatValue({
-          value: dateWithSlashes,
+          value,
           ..._this.localeData
         });
 
@@ -440,9 +436,6 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "buildCustomEvent", (ev, isoFormattedValue) => {
-      const {
-        type
-      } = ev;
       const {
         id,
         name,
@@ -477,7 +470,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
           ...(validRawValue && {
             rawValue: isoFormattedValue
           }),
-          ...(type === "blur" && {
+          ...(!validRawValue && {
             formattedValue: value,
             rawValue: value
           })
@@ -488,15 +481,19 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderDatePicker", dateRangeProps => {
       if (!_this.state.isDatePickerOpen) return null;
-      let {
+      const {
         visibleValue
       } = _this.state;
+      let isoValue = "";
 
-      if (!_date.default.isValidDate({
+      if (_date.default.isValidDate({
         value: visibleValue,
         ..._this.localeData
       })) {
-        visibleValue = "";
+        isoValue = _date.default.formatValue({
+          value: visibleValue,
+          ..._this.localeData
+        });
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -506,7 +503,7 @@ let BaseDateInput = /*#__PURE__*/function (_React$Component) {
         inputElement: _this.inputPresentationRef,
         selectedDate: _this.state.selectedDate,
         handleDateSelect: _this.handleDateSelect,
-        inputDate: visibleValue,
+        inputDate: isoValue,
         disablePortal: _this.props.disablePortal
       }, dateRangeProps)));
     });
@@ -642,7 +639,7 @@ function generateAdjustedValue({
   formats,
   format
 }) {
-  if (value !== undefined && canReturnValue(value, allowEmptyValue, locale, formats, format)) {
+  if (value !== undefined && canReturnValue(value, allowEmptyValue)) {
     return _date.default.formatDateToCurrentLocale({
       value,
       locale,
@@ -651,7 +648,7 @@ function generateAdjustedValue({
     });
   }
 
-  if (canReturnValue(defaultValue, allowEmptyValue, locale, formats, format)) {
+  if (canReturnValue(defaultValue, allowEmptyValue)) {
     return _date.default.formatDateToCurrentLocale({
       value: defaultValue,
       locale,
@@ -668,25 +665,20 @@ function generateAdjustedValue({
   });
 }
 
-function isValidInitialFormat(value, locale, formats, format) {
+function isValidInitialFormat(value) {
   return _date.default.isValidDate({
     value,
-    options: {
-      defaultValue: hiddenDateFormat
-    },
-    locale,
-    formats,
-    format
+    format: hiddenDateFormat
   });
 }
 
-function canReturnValue(value, allowEmptyValue, locale, formats, format) {
+function canReturnValue(value, allowEmptyValue) {
   if (!allowEmptyValue && value && value.length) {
     const message = "The Date component must be initialised with a value in the iso (YYYY-MM-DD) format";
-    (0, _invariant.default)(isValidInitialFormat(value, locale, formats, format), message);
+    (0, _invariant.default)(isValidInitialFormat(value), message);
   }
 
-  return isValidInitialFormat(value, locale, formats, format) || allowEmptyValue && !value;
+  return isValidInitialFormat(value) || allowEmptyValue && !value;
 }
 
 const DateInput = (0, _withUniqueIdProps.default)(BaseDateInput);

package/lib/components/help/help.component.js

@@ -45,6 +45,7 @@ const Help = ({
   tooltipPosition,
   isFocused,
   type,
+  tooltipId,
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
@@ -107,6 +108,7 @@ const Help = ({
     tooltipFontColor: tooltipFontColor,
     tooltipFlipOverrides: tooltipFlipOverrides,
     focusable: false,
+    tooltipId: tooltipId,
     "aria-hidden": "true"
   }, href && {
     role: "tooltip",
@@ -122,7 +124,7 @@ Help.propTypes = { ...marginPropTypes,
   /** Message to display in tooltip */
   children: _propTypes.default.node,
 
-  /** The unique id of the component (used with aria-describedby for accessibility) */
+  /** The unique id of the component */
   helpId: _propTypes.default.string,
 
   /** Overrides the default tabindex of the component */
@@ -166,6 +168,9 @@ Help.propTypes = { ...marginPropTypes,
     `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
   },
 
+  /** Id passed to the tooltip container, used for accessibility purposes. */
+  tooltipId: _propTypes.default.string,
+
   /** Aria label */
   ariaLabel: _propTypes.default.string
 };

package/lib/components/help/help.d.ts

@@ -28,6 +28,8 @@ export interface HelpProps extends MarginProps {
   tooltipFlipOverrides?: ["top" | "bottom" | "left" | "right"];
   /** Position of tooltip relative to target */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Id passed to the tooltip container, used for accessibility purposes */
+  tooltipId?: string;
   /** Help Icon type */
   type?: IconType;
   /** Aria label */

package/lib/components/icon/icon.component.js

@@ -48,6 +48,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
+  tooltipId,
   tabIndex,
   isPartOfInput,
   inputSize,
@@ -122,6 +123,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,
       type: type,
+      id: tooltipId,
       isVisible: visible,
       isPartOfInput: isPartOfInput,
       inputSize: inputSize,
@@ -186,6 +188,9 @@ Icon.propTypes = { ...marginPropTypes,
   /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor: _propTypes.default.string,
 
+  /** Id passed to the tooltip container, used for accessibility purposes. */
+  tooltipId: _propTypes.default.string,
+
   /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"].
    *
    *  See the Popper [documentation](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) for more information

package/lib/components/icon/icon.d.ts

@@ -233,6 +233,8 @@ export interface IconProps extends MarginProps {
   tooltipFontColor?: string;
   /** Overrides the default flip behaviour of the Tooltip */
   tooltipFlipOverrides?: TooltipPositions[];
+  /** Id passed to the tooltip container, used for accessibility purposes */
+  tooltipId?: string;
 }
 
 declare function Icon(

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

@@ -21,6 +21,8 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _themes = require("../../style/themes");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -48,6 +50,8 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
+  const l = (0, _useLocale.default)();
+
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
   const tabIndex = tabbable && !disabled ? "0" : "-1";
@@ -110,7 +114,7 @@ const Link = /*#__PURE__*/_react.default.forwardRef(({
       ...(type === "button" && {
         role: "link"
       })
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? "Skip to main content" : children), renderLinkIcon("right")));
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
 
   return /*#__PURE__*/_react.default.createElement(_link.StyledLink, _extends({

package/lib/components/search/search.component.js

@@ -54,6 +54,7 @@ const Search = ({
   variant = "default",
   "aria-label": ariaLabel = "search",
   inputRef,
+  tabIndex,
   ...rest
 }) => {
   const isControlled = value !== undefined;
@@ -173,7 +174,8 @@ const Search = ({
     onBlur: onBlur,
     onChange: onChange,
     onKeyDown: onKeyDown,
-    inputRef: assignInput
+    inputRef: assignInput,
+    tabIndex: tabIndex
   }), searchButton && /*#__PURE__*/_react.default.createElement(_search.StyledSearchButton, null, Boolean(isFocused || (!isControlled ? searchValue.length : value.length)) && /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     tabIndex: iconTabIndex,
     size: "medium",
@@ -249,7 +251,10 @@ Search.propTypes = {
    */
   inputRef: _propTypes.default.shape({
     current: _propTypes.default.instanceOf(Element)
-  })
+  }),
+
+  /** Input tabindex */
+  tabIndex: _propTypes.default.number
 };
 var _default = Search;
 exports.default = _default;

package/lib/components/search/search.d.ts

@@ -40,6 +40,8 @@ export interface SearchProps extends MarginProps {
   variant?: string;
   /** A callback to retrieve the input reference */
   inputRef?: React.RefObject<HTMLInputElement>;
+  /** Input tabindex */
+  tabIndex?: number;
 }
 
 declare function Search(props: SearchProps): JSX.Element;

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

@@ -33,6 +33,8 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -101,6 +103,21 @@ const Textarea = ({
     }
   };
 
+  const {
+    labelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    labelHelp,
+    fieldHelp
+  });
   (0, _react.useEffect)(() => {
     if (expandable) {
       expandTextarea();
@@ -146,10 +163,12 @@ const Textarea = ({
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
     fieldHelp: fieldHelp,
+    fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
     info: info,
     label: label,
+    labelId: labelId,
     disabled: disabled,
     id: id,
     labelInline: labelInline,
@@ -157,6 +176,7 @@ const Textarea = ({
     labelWidth: labelWidth,
     labelHelp: labelHelp,
     labelSpacing: labelSpacing,
+    tooltipId: tooltipId,
     isRequired: props.required,
     useValidationIcon: validationOnLabel,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
@@ -169,9 +189,11 @@ const Textarea = ({
     warning: warning,
     info: info
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
+    "aria-invalid": !!error,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
-    "aria-invalid": !!error,
     ref: inputRef,
     maxLength: enforceCharacterLimit && characterLimit ? characterLimit : undefined,
     onChange: onChange,

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

@@ -29,6 +29,8 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
 
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
+
 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); }
@@ -42,7 +44,7 @@ const Textbox = ({
   disabled,
   inputIcon,
   leftChildren,
-  labelId,
+  labelId: externalLabelId,
   label,
   labelAlign,
   labelHelp,
@@ -90,12 +92,29 @@ const Textbox = ({
   ...props
 }) => {
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
+  const {
+    labelId: internalLabelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id,
+    error,
+    warning,
+    info,
+    label,
+    labelHelp,
+    fieldHelp
+  });
+  const labelId = externalLabelId || internalLabelId;
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
+    tooltipId: tooltipId,
     disabled: disabled,
     fieldHelp: fieldHelp,
+    fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
     info: info,
@@ -132,6 +151,8 @@ const Textbox = ({
   }, {
     align: align,
     "aria-invalid": !!error,
+    "aria-labelledby": labelId,
+    "aria-describedby": ariaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -160,7 +181,8 @@ const Textbox = ({
     readOnly: readOnly,
     size: size,
     useValidationIcon: !validationOnLabel,
-    warning: warning
+    warning: warning,
+    tooltipId: tooltipId
   }))), characterCount));
 };
 

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

@@ -0,0 +1,24 @@
+interface InputAccessibilityProperties {
+  labelId?: string;
+  tooltipId?: string;
+  fieldHelpId?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+}
+
+export default function useInputAccessibility(
+  /** Input id -  */
+  id: string,
+  /** Error validation message */
+  error?: string,
+  /** Warning validation message */
+  warning?: string,
+  /** Info validation message */
+  info?: string,
+  /** Label */
+  label?: string,
+  /** labelHelp message */
+  labelHelp?: string,
+  /** fieldHelp message */
+  fieldHelp?: string
+): void;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useInputAccessibility.default;
+  }
+});
+
+var _useInputAccessibility = _interopRequireDefault(require("./useInputAccessibility"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useInputAccessibility;
+
+function useInputAccessibility({
+  id,
+  error,
+  warning,
+  info,
+  label,
+  labelHelp,
+  fieldHelp
+}) {
+  const labelId = label ? `${id}-label` : undefined;
+  const tooltipId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-tooltip` : undefined;
+  const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
+  const ariaDescribedBy = [fieldHelpId, tooltipId].filter(Boolean).join(" ");
+  const ariaLabelledBy = labelId;
+  return {
+    labelId,
+    tooltipId,
+    fieldHelpId,
+    ariaDescribedBy,
+    ariaLabelledBy
+  };
+}

package/lib/locales/en-gb.js

@@ -83,6 +83,9 @@ var _default = {
     placeholder: () => "Please Select...",
     noResultsForTerm: term => `No results for "${term}"`
   },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
   switch: {
     on: () => "ON",
     off: () => "OFF"

package/lib/locales/pl-pl.js

@@ -75,6 +75,9 @@ var _default = {
     placeholder: () => "Proszę wybierz...",
     noResultsForTerm: term => `Brak wyników dla "${term}"`
   },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
   switch: {
     on: () => "WŁ",
     off: () => "WYŁ"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.3.1",
+  "version": "101.4.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -62,18 +62,18 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^6.3.6",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-controls": "^6.3.7",
-    "@storybook/addon-docs": "^6.3.6",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-controls": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/addon-toolbars": "^6.3.8",
-    "@storybook/addon-viewport": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/components": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-toolbars": "^6.3.12",
+    "@storybook/addon-viewport": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/components": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/theming": "^6.3.12",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",