carbon-react 114.18.2 → 115.0.0

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

@@ -16,12 +16,14 @@ import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
+import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
   value,
   defaultValue,
   id,
+  label,
   name,
   disabled,
   readOnly,
@@ -57,7 +59,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
   const accessibilityLabelId = useRef(guid());
-  const labelId = useRef(guid());
   const containerRef = useRef();
   const listboxRef = useRef();
   const isInputFocused = useRef(false);
@@ -72,6 +73,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
+  const inputId = useRef(id || guid());
+  const {
+    labelId
+  } = useInputAccessibility({
+    id: inputId.current,
+    label
+  });
   const actualValue = isControlled.current ? value : selectedValue;
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
@@ -402,9 +410,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   function getTextboxProps() {
     return {
-      id,
+      id: inputId.current,
       name,
       disabled,
+      label,
       readOnly,
       placeholder: placeholderOverride,
       leftChildren: mapValuesToPills,
@@ -429,7 +438,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: labelId,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -471,7 +480,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     "aria-controls": selectListId.current,
     hasTextCursor: true,
     isOpen: isOpen,
-    labelId: labelId.current,
+    labelId: labelId,
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });

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

@@ -29,6 +29,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   value,
   disabled,
   isOpen,
+  id,
   readOnly,
   placeholder,
   size = "medium",
@@ -88,6 +89,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   function getTextboxProps() {
     return {
       disabled,
+      id,
       readOnly,
       required,
       onClick: handleTextboxClick,

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

@@ -14,11 +14,13 @@ import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
+import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
 const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   value,
   defaultValue,
   id,
+  label,
   name,
   disabled,
   readOnly,
@@ -49,7 +51,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   ...props
 }, ref) => {
   const selectListId = useRef(guid());
-  const labelId = useRef(guid());
   const containerRef = useRef();
   const listboxRef = useRef();
   const filterTimer = useRef();
@@ -63,6 +64,13 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   const [activeDescendantId, setActiveDescendantId] = useState();
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
+  const inputId = useRef(id || guid());
+  const {
+    labelId
+  } = useInputAccessibility({
+    id: inputId.current,
+    label
+  });
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -314,7 +322,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
 
   function getTextboxProps() {
     return {
-      id,
+      id: inputId.current,
       name,
       disabled,
       readOnly,
@@ -323,6 +331,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       formattedValue: textValue,
       onClick: handleTextboxClick,
       iconOnClick: handleDropdownIconClick,
+      label,
+      labelId,
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onKeyDown: handleTextboxKeydown,
@@ -337,7 +347,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   const selectList = /*#__PURE__*/React.createElement(SelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: labelId.current,
+    labelId: labelId,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onMouseDown: handleListMouseDown,
@@ -370,7 +380,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
-    labelId: labelId.current,
     isOpen: isOpen,
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);

package/esm/components/settings-row/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./settings-row";
+export { default } from "./settings-row.component";
+export type { SettingsRowProps } from "./settings-row.component";

package/esm/components/settings-row/settings-row.component.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { HeadingType } from "../heading";
+export interface SettingsRowProps extends MarginProps {
+    /**  A title for this group of settings. */
+    title?: string;
+    /** Defines the HTML heading element of the `title` within the component. */
+    headingType?: HeadingType;
+    /** Content to be rendered inside the component. */
+    children?: React.ReactNode;
+    /**  A string or JSX object that provides a short description about the group of settings. */
+    description?: React.ReactNode;
+    /** Shows a divider below the component. */
+    divider?: boolean;
+    /**  The CSS classes to apply to the component. */
+    className?: string;
+}
+export declare const SettingsRow: {
+    ({ title, headingType, children, description, divider, className, ...rest }: SettingsRowProps): JSX.Element;
+    displayName: string;
+};
+export default SettingsRow;

package/esm/components/settings-row/settings-row.component.js

@@ -2,20 +2,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Heading from "../heading";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const SettingsRow = ({
   title,
   headingType = "h3",
-  description,
   children,
-  className,
+  description,
   divider = true,
+  className,
   ...rest
 }) => {
   const heading = () => {
@@ -37,24 +35,168 @@ const SettingsRow = ({
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledSettingsRowHeader, null, heading()), /*#__PURE__*/React.createElement(StyledSettingsRowInput, null, children));
 };
 
-SettingsRow.propTypes = { ...marginPropTypes,
-
-  /**  This component supports children. */
-  children: PropTypes.node,
-
-  /**  The CSS classes to apply to the component. */
-  className: PropTypes.string,
-
-  /**  A title for this group of settings. */
-  title: PropTypes.string,
-
-  /** Defines the HTML heading element of the `title` within the component. */
-  headingType: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5"]),
-
-  /**  A string or JSX object that provides a short description about the group of settings. */
-  description: PropTypes.node,
-
-  /** Shows a divider below the component. */
-  divider: PropTypes.bool
+SettingsRow.propTypes = {
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "description": PropTypes.node,
+  "divider": PropTypes.bool,
+  "headingType": PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5"]),
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "title": PropTypes.string
 };
+export { SettingsRow };
+SettingsRow.displayName = "SettingsRow";
 export default SettingsRow;

package/esm/components/settings-row/settings-row.style.d.ts

@@ -0,0 +1,7 @@
+interface DividerProps {
+    hasDivider: boolean;
+}
+export declare const StyledSettingsRow: import("styled-components").StyledComponent<"div", any, DividerProps, never>;
+export declare const StyledSettingsRowHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSettingsRowInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/esm/components/textarea/textarea.component.d.ts

@@ -4,6 +4,8 @@ import { IconType } from "../icon";
 import { ValidationProps } from "../../__internal__/validations";
 import { CommonInputProps } from "../../__internal__/input";
 export interface TextareaProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */

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

@@ -21,6 +21,7 @@ import useFormSpacing from "../../hooks/__internal__/useFormSpacing"; // TODO: C
 
 let deprecateInputRefWarnTriggered = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
   autoFocus,
   fieldHelp,
   label,
@@ -105,8 +106,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     labelId,
     validationIconId,
     fieldHelpId,
-    ariaDescribedBy,
-    ariaLabelledBy
+    ariaDescribedBy
   } = useInputAccessibility({
     id,
     error,

package/esm/components/textbox/textbox.component.d.ts

@@ -4,6 +4,8 @@ import { CommonInputProps } from "../../__internal__/input";
 import { ValidationProps } from "../../__internal__/validations";
 import { IconType } from "../icon";
 export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<CommonInputProps, "size"> {
+    /** Prop to specify the aria-labelledby property of the component */
+    "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
@@ -21,7 +23,11 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
      * real value is an ID but you want to show a human-readable version.
      */
     formattedValue?: string;
-    /** Unique identifier for the input. Will use a randomly generated GUID if none is provided */
+    /**
+     * Unique identifier for the input.
+     * Label id will be based on it, using following pattern: <id>-label.
+     * Will use a randomly generated GUID if none is provided.
+     */
     id?: string;
     /** Type of the icon that will be rendered next to the input */
     inputIcon?: IconType;
@@ -84,8 +90,6 @@ export interface TextboxProps extends CommonTextboxProps {
     isOptional?: boolean;
     /** Container for DatePicker or SelectList components */
     positionedChildren?: React.ReactNode;
-    /** Label id passed from Select component */
-    labelId?: string;
     /** Character limit of the textarea */
     characterLimit?: string | number;
     /** Stop the user typing over the characterLimit */

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

@@ -20,13 +20,13 @@ import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 let deprecateInputRefWarnTriggered = false;
 const Textbox = /*#__PURE__*/React.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
   align = "left",
   autoFocus,
   children,
   disabled,
   inputIcon,
   leftChildren,
-  labelId: externalLabelId,
   label,
   labelAlign,
   labelHelp,
@@ -94,7 +94,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   }
 
   const {
-    labelId: internalLabelId,
+    labelId,
     validationIconId,
     fieldHelpId,
     ariaDescribedBy
@@ -106,7 +106,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const labelId = label ? externalLabelId || internalLabelId : "";
   const hasIconInside = !!(inputIcon || validationIconId && !validationOnLabel);
   const input = /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
@@ -128,7 +127,7 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   }, {
     align: align,
     "aria-invalid": !!error,
-    "aria-labelledby": labelId,
+    "aria-labelledby": ariaLabelledBy,
     "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
@@ -319,7 +318,6 @@ Textbox.propTypes = {
   "label": PropTypes.string,
   "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
-  "labelId": PropTypes.string,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),
   "labelWidth": PropTypes.number,

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

@@ -11,5 +11,4 @@ export default function useInputAccessibility({ id, error, warning, info, label,
     validationIconId?: string;
     fieldHelpId?: string;
     ariaDescribedBy?: string;
-    ariaLabelledBy?: string;
 };

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

@@ -10,12 +10,10 @@ export default function useInputAccessibility({
   const validationIconId = [error, warning, info].filter(validation => validation && typeof validation === "string").length ? `${id}-validation-icon` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
-  const ariaLabelledBy = labelId;
   return {
     labelId,
     validationIconId,
     fieldHelpId,
-    ariaDescribedBy,
-    ariaLabelledBy
+    ariaDescribedBy
   };
 }

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

@@ -29,7 +29,7 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     reverse?: boolean;
     /** Size of the component */
     size?: "small" | "large";
-    /** The id of the element that labels the input */
+    /** Prop to specify the aria-labelledby attribute of the input */
     ariaLabelledBy?: string;
     /** When true, displays validation icon on label */
     validationOnLabel?: boolean;

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

@@ -30,7 +30,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 CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
-  ariaLabelledBy: externalAriaLabelledBy,
+  ariaLabelledBy,
   autoFocus,
   checked,
   children,
@@ -66,8 +66,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     labelId,
     fieldHelpId,
     validationIconId,
-    ariaDescribedBy,
-    ariaLabelledBy
+    ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
     id,
     error,
@@ -103,7 +102,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   };
   const inputProps = {
     "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": externalAriaLabelledBy || ariaLabelledBy,
+    "aria-labelledby": ariaLabelledBy,
     "aria-invalid": !!error,
     autoFocus,
     checked,

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"> {
+    /** Prop to specify the aria-labelledby attribute of the input */
+    ariaLabelledBy?: string;
     /** If true the Component will be focused when page load */
     autoFocus?: boolean;
     /** Checked state of the input */

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(({
+  ariaLabelledBy,
   name,
   checked,
   type,
@@ -35,8 +36,7 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave,
-    ariaLabelledBy
+    onMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
   const {
     onBlur: onBlurGroup,
@@ -70,6 +70,7 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   return /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, _extends({
+    "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
     "aria-checked": checked,
     checked: checked,
@@ -77,9 +78,7 @@ const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     role: role || type,
     type: type,
     value: value
-  }, props, ariaLabelledBy && {
-    "aria-labelledby": ariaLabelledBy
-  }, {
+  }, props, {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onMouseEnter: handleMouseEnter,
@@ -142,6 +141,7 @@ HiddenCheckableInput.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
+  "ariaLabelledBy": _propTypes.default.string,
   "autoCapitalize": _propTypes.default.string,
   "autoComplete": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,

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

@@ -45,6 +45,7 @@ function selectTextOnFocus(input) {
 
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
+  "aria-labelledby": ariaLabelledBy,
   placeholder,
   disabled,
   readOnly,
@@ -161,7 +162,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   };
 
   return /*#__PURE__*/_react.default.createElement(_input2.default, _extends({}, rest, {
-    "aria-labelledby": context.ariaLabelledBy,
+    "aria-labelledby": ariaLabelledBy,
     align: align,
     placeholder: placeholder,
     disabled: disabled,