carbon-react 147.8.0 → 147.9.0

package/esm/__internal__/fieldset/fieldset.component.js

@@ -7,6 +7,7 @@ import NewValidationContext from "../../components/carbon-provider/__internal__/
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import Help from "../../components/help";
+import Typography from "../../components/typography";
 const Fieldset = ({
   legend,
   children,
@@ -41,12 +42,13 @@ const Fieldset = ({
   }, [ref, isRequired]);
   const tooltipIcon = () => {
     if (error || warning || info) {
-      return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(ValidationIcon, {
+      return /*#__PURE__*/React.createElement(StyledIconWrapper, {
+        "aria-hidden": "true"
+      }, /*#__PURE__*/React.createElement(ValidationIcon, {
         error: error,
         warning: warning,
         info: info,
-        tooltipFlipOverrides: ["top", "bottom"],
-        tooltipId: validationId
+        tooltipFlipOverrides: ["top", "bottom"]
       }));
     }
     const helpProps = {
@@ -90,6 +92,9 @@ const Fieldset = ({
     isRequired: isRequired,
     isOptional: isOptional,
     isDisabled: isDisabled
-  }, legend, !validationRedesignOptIn && tooltipIcon()))), children));
+  }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true,
+    id: validationId
+  }, error || warning || info), children));
 };
 export default Fieldset;

package/esm/components/accordion/accordion.component.js

@@ -86,11 +86,11 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   }, headerSpacing), /*#__PURE__*/React.createElement(StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
     hasValidationIcon: showValidationIcon
-  }, /*#__PURE__*/React.createElement(StyledAccordionTitle, {
+  }, typeof title === "string" ? /*#__PURE__*/React.createElement(StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size,
     variant: variant
-  }, getTitle()), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
+  }, isExpanded ? openTitle || title : title) : getTitle(), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
     error: error,
     warning: warning,
     info: info,

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
@@ -31,7 +36,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     inline?: boolean;
 }
 export declare const CheckboxGroup: {
-    (props: CheckboxGroupProps): React.JSX.Element;
+    ({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, ...rest }: CheckboxGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CheckboxGroup;

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

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
@@ -12,50 +12,69 @@ import ValidationMessage from "../../../__internal__/validation-message/validati
 import Box from "../../box";
 import { ErrorBorder } from "../../textbox/textbox.style";
 import CheckboxGroupContext from "./__internal__/checkbox-group.context";
-export const CheckboxGroup = props => {
+import guid from "../../../__internal__/utils/helpers/guid";
+import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
+export const CheckboxGroup = ({
+  children,
+  legend,
+  error,
+  warning,
+  info,
+  required,
+  isOptional,
+  legendInline,
+  legendWidth,
+  legendAlign = "left",
+  legendSpacing,
+  legendHelp,
+  tooltipPosition,
+  inline,
+  id,
+  ...rest
+}) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const internalId = useRef(guid());
+  const uniqueId = id || internalId.current;
+  const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
   const {
-    children,
-    legend,
+    validationId,
+    ariaDescribedBy
+  } = useInputAccessibility({
+    id: uniqueId,
+    validationRedesignOptIn: true,
     error,
     warning,
-    info,
-    required,
-    isOptional,
-    legendInline,
-    legendWidth,
-    legendAlign = "left",
-    legendSpacing,
-    legendHelp,
-    tooltipPosition,
-    inline
-  } = props;
+    info
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
+    id: uniqueId,
     legend: legend,
-    inline: legendInline,
-    legendWidth: legendWidth,
     legendAlign: legendAlign,
-    legendSpacing: legendSpacing,
     error: error,
     warning: warning,
     isRequired: required,
     isOptional: isOptional
-  }, tagComponent("checkboxgroup", props), {
+  }, combinedAriaDescribedBy && {
+    "aria-describedby": combinedAriaDescribedBy
+  }, tagComponent("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+  }, filterStyledSystemMarginProps(rest)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+    id: inputHintId
+  }, legendHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
-    warning: warning
+    warning: warning,
+    validationId: validationId
   }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!error && warning),
     inline: inline
   }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
@@ -67,6 +86,7 @@ export const CheckboxGroup = props => {
   }, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
+    id: uniqueId,
     legend: legend,
     inline: legendInline,
     legendWidth: legendWidth,
@@ -76,10 +96,12 @@ export const CheckboxGroup = props => {
     warning: warning,
     info: info,
     isRequired: required,
-    isOptional: isOptional
-  }, tagComponent("checkboxgroup", props), {
+    isOptional: isOptional,
+    "aria-describedby": ariaDescribedBy,
+    validationId: validationId
+  }, tagComponent("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning || info)
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
     legendInline: legendInline

package/esm/components/numeral-date/numeral-date.component.js

@@ -312,7 +312,7 @@ export const NumeralDate = ({
       legendWidth: labelWidth,
       legendSpacing: labelSpacing,
       validationId: validationId,
-      "aria-describedby": ariaDescribedBy
+      "aria-describedby": validationOnLabel ? ariaDescribedBy : fieldHelpId
     }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Box, {
       display: "flex",
       flexDirection: "column",

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../../__internal__/validations";
 export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLegendBreakpoint?: number;
     /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
@@ -12,7 +17,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     inline?: boolean;
     /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
-    /** The content for the RadioGroup Legend */
+    /** The content for the RadioButtonGroup Legend */
     legend?: string;
     /**
      * The content for the RadioButtonGroup hint text,
@@ -43,7 +48,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare const RadioButtonGroup: {
-    (props: RadioButtonGroupProps): React.JSX.Element;
+    ({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, ...rest }: RadioButtonGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default RadioButtonGroup;

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

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../../__internal__/fieldset";
@@ -13,43 +13,48 @@ import NewValidationContext from "../../carbon-provider/__internal__/new-validat
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
 import { ErrorBorder } from "../../textbox/textbox.style";
+import guid from "../../../__internal__/utils/helpers/guid";
+import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
-export const RadioButtonGroup = props => {
-  const {
-    children,
-    name,
-    legend,
-    legendHelp,
-    error,
-    warning,
-    info,
-    onBlur,
-    onChange,
-    value,
-    inline = false,
-    legendInline = false,
-    legendWidth,
-    legendAlign = "left",
-    legendSpacing,
-    labelSpacing = 1,
-    adaptiveLegendBreakpoint,
-    adaptiveSpacingBreakpoint,
-    required,
-    isOptional,
-    tooltipPosition
-  } = props;
+export const RadioButtonGroup = ({
+  children,
+  id,
+  name,
+  legend,
+  legendHelp,
+  error,
+  warning,
+  info,
+  onBlur,
+  onChange,
+  value,
+  inline = false,
+  legendInline = false,
+  legendWidth,
+  legendAlign = "left",
+  legendSpacing,
+  labelSpacing = 1,
+  adaptiveLegendBreakpoint,
+  adaptiveSpacingBreakpoint,
+  required,
+  isOptional,
+  tooltipPosition,
+  ...rest
+}) => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
-  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
+  const internalId = useRef(guid());
+  const uniqueId = id || internalId.current;
+  const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const marginProps = filterStyledSystemMarginProps(props);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInlineWithNewValidation;
+  let inlineLegend = legendInline;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }
@@ -57,24 +62,37 @@ export const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
+  const {
+    validationId,
+    ariaDescribedBy
+  } = useInputAccessibility({
+    id: uniqueId,
+    validationRedesignOptIn: true,
+    error,
+    warning,
+    info
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
     error: error,
     warning: warning,
-    inline: inlineLegend,
-    legendWidth: legendWidth,
     legendAlign: legendAlign,
-    legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
-  }, tagComponent("radiogroup", props), marginProps, {
+  }, tagComponent("radiogroup", rest), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)
-  }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+  }, combinedAriaDescribedBy && {
+    "aria-describedby": combinedAriaDescribedBy
+  }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, {
+    id: inputHintId
+  }, legendHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
-    warning: warning
+    warning: warning,
+    validationId: validationId
   }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
     "data-role": "radio-error-border",
     inline: inline,
@@ -113,9 +131,11 @@ export const RadioButtonGroup = props => {
     legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
-  }, tagComponent("radiogroup", props), marginProps, {
+  }, tagComponent("radiogroup", rest), marginProps, {
     ml: marginLeft,
-    blockGroupBehaviour: !(error || warning || info)
+    blockGroupBehaviour: !(error || warning || info),
+    "aria-describedby": ariaDescribedBy,
+    validationId: validationId
   }), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
     "data-component": "radio-button-group",
     role: "radiogroup",

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

@@ -84,7 +84,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     readOnly?: boolean;
     /** Flag to configure component as optional */
     isOptional?: boolean;
-    /** The number of visible text lines for the control */
+    /** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
     rows?: number;
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
@@ -102,7 +102,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     borderRadius?: BorderRadiusType | BorderRadiusType[];
     /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
     hideBorders?: boolean;
-    /** Specify the minimum height */
+    /** Specify the minimum height. This property is only applied if rows is not set. */
     minHeight?: number;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/__internal__/fieldset/fieldset.component.js

@@ -12,6 +12,7 @@ var _newValidation = _interopRequireDefault(require("../../components/carbon-pro
 var _inputBehaviour = require("../input-behaviour");
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _help = _interopRequireDefault(require("../../components/help"));
+var _typography = _interopRequireDefault(require("../../components/typography"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -50,12 +51,13 @@ const Fieldset = ({
   }, [ref, isRequired]);
   const tooltipIcon = () => {
     if (error || warning || info) {
-      return /*#__PURE__*/_react.default.createElement(_fieldset.StyledIconWrapper, null, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
+      return /*#__PURE__*/_react.default.createElement(_fieldset.StyledIconWrapper, {
+        "aria-hidden": "true"
+      }, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
         error: error,
         warning: warning,
         info: info,
-        tooltipFlipOverrides: ["top", "bottom"],
-        tooltipId: validationId
+        tooltipFlipOverrides: ["top", "bottom"]
       }));
     }
     const helpProps = {
@@ -99,6 +101,9 @@ const Fieldset = ({
     isRequired: isRequired,
     isOptional: isOptional,
     isDisabled: isDisabled
-  }, legend, !validationRedesignOptIn && tooltipIcon()))), children));
+  }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true,
+    id: validationId
+  }, error || warning || info), children));
 };
 var _default = exports.default = Fieldset;

package/lib/components/accordion/accordion.component.js

@@ -95,11 +95,11 @@ const Accordion = exports.Accordion = /*#__PURE__*/_react.default.forwardRef(({
   }, headerSpacing), /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
     hasValidationIcon: showValidationIcon
-  }, /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_accordion.StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size,
     variant: variant
-  }, getTitle()), variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
+  }, isExpanded ? openTitle || title : title) : getTitle(), variant !== "subtle" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showValidationIcon && /*#__PURE__*/_react.default.createElement(_validations.default, {
     error: error,
     warning: warning,
     info: info,

package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
@@ -31,7 +36,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     inline?: boolean;
 }
 export declare const CheckboxGroup: {
-    (props: CheckboxGroupProps): React.JSX.Element;
+    ({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, ...rest }: CheckboxGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CheckboxGroup;

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

@@ -17,54 +17,73 @@ var _validationMessage = _interopRequireDefault(require("../../../__internal__/v
 var _box = _interopRequireDefault(require("../../box"));
 var _textbox = require("../../textbox/textbox.style");
 var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-group.context"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CheckboxGroup = props => {
+const CheckboxGroup = ({
+  children,
+  legend,
+  error,
+  warning,
+  info,
+  required,
+  isOptional,
+  legendInline,
+  legendWidth,
+  legendAlign = "left",
+  legendSpacing,
+  legendHelp,
+  tooltipPosition,
+  inline,
+  id,
+  ...rest
+}) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const internalId = (0, _react.useRef)((0, _guid.default)());
+  const uniqueId = id || internalId.current;
+  const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
   const {
-    children,
-    legend,
+    validationId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id: uniqueId,
+    validationRedesignOptIn: true,
     error,
     warning,
-    info,
-    required,
-    isOptional,
-    legendInline,
-    legendWidth,
-    legendAlign = "left",
-    legendSpacing,
-    legendHelp,
-    tooltipPosition,
-    inline
-  } = props;
+    info
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    id: uniqueId,
     legend: legend,
-    inline: legendInline,
-    legendWidth: legendWidth,
     legendAlign: legendAlign,
-    legendSpacing: legendSpacing,
     error: error,
     warning: warning,
     isRequired: required,
     isOptional: isOptional
-  }, (0, _tags.default)("checkboxgroup", props), {
+  }, combinedAriaDescribedBy && {
+    "aria-describedby": combinedAriaDescribedBy
+  }, (0, _tags.default)("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning)
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, {
+    id: inputHintId
+  }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
-    warning: warning
+    warning: warning,
+    validationId: validationId
   }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     warning: !!(!error && warning),
     inline: inline
   }), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/_react.default.createElement(_checkboxGroup2.default.Provider, {
     value: {
@@ -76,6 +95,7 @@ const CheckboxGroup = props => {
   }, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    id: uniqueId,
     legend: legend,
     inline: legendInline,
     legendWidth: legendWidth,
@@ -85,10 +105,12 @@ const CheckboxGroup = props => {
     warning: warning,
     info: info,
     isRequired: required,
-    isOptional: isOptional
-  }, (0, _tags.default)("checkboxgroup", props), {
+    isOptional: isOptional,
+    "aria-describedby": ariaDescribedBy,
+    validationId: validationId
+  }, (0, _tags.default)("checkboxgroup", rest), {
     blockGroupBehaviour: !(error || warning || info)
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
     legendInline: legendInline

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

@@ -321,7 +321,7 @@ const NumeralDate = ({
       legendWidth: labelWidth,
       legendSpacing: labelSpacing,
       validationId: validationId,
-      "aria-describedby": ariaDescribedBy
+      "aria-describedby": validationOnLabel ? ariaDescribedBy : fieldHelpId
     }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_box.default, {
       display: "flex",
       flexDirection: "column",

package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -2,6 +2,11 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../../__internal__/validations";
 export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
+    /**
+     * Unique identifier for the component.
+     * Will use a randomly generated GUID if none is provided.
+     */
+    id?: string;
     /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLegendBreakpoint?: number;
     /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
@@ -12,7 +17,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     inline?: boolean;
     /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
-    /** The content for the RadioGroup Legend */
+    /** The content for the RadioButtonGroup Legend */
     legend?: string;
     /**
      * The content for the RadioButtonGroup hint text,
@@ -43,7 +48,7 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare const RadioButtonGroup: {
-    (props: RadioButtonGroupProps): React.JSX.Element;
+    ({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, ...rest }: RadioButtonGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default RadioButtonGroup;

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

@@ -18,47 +18,52 @@ var _newValidation = _interopRequireDefault(require("../../carbon-provider/__int
 var _validationMessage = _interopRequireDefault(require("../../../__internal__/validation-message/validation-message.component"));
 var _box = _interopRequireDefault(require("../../box"));
 var _textbox = require("../../textbox/textbox.style");
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
-const RadioButtonGroup = props => {
-  const {
-    children,
-    name,
-    legend,
-    legendHelp,
-    error,
-    warning,
-    info,
-    onBlur,
-    onChange,
-    value,
-    inline = false,
-    legendInline = false,
-    legendWidth,
-    legendAlign = "left",
-    legendSpacing,
-    labelSpacing = 1,
-    adaptiveLegendBreakpoint,
-    adaptiveSpacingBreakpoint,
-    required,
-    isOptional,
-    tooltipPosition
-  } = props;
+const RadioButtonGroup = ({
+  children,
+  id,
+  name,
+  legend,
+  legendHelp,
+  error,
+  warning,
+  info,
+  onBlur,
+  onChange,
+  value,
+  inline = false,
+  legendInline = false,
+  legendWidth,
+  legendAlign = "left",
+  legendSpacing,
+  labelSpacing = 1,
+  adaptiveLegendBreakpoint,
+  adaptiveSpacingBreakpoint,
+  required,
+  isOptional,
+  tooltipPosition,
+  ...rest
+}) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
-  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
+  const internalId = (0, _react.useRef)((0, _guid.default)());
+  const uniqueId = id || internalId.current;
+  const inputHintId = legendHelp ? `${uniqueId}-hint` : undefined;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const isAboveLegendBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInlineWithNewValidation;
+  let inlineLegend = legendInline;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }
@@ -66,24 +71,37 @@ const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
+  const {
+    validationId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id: uniqueId,
+    validationRedesignOptIn: true,
+    error,
+    warning,
+    info
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId].filter(Boolean).join(" ");
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: legend,
     error: error,
     warning: warning,
-    inline: inlineLegend,
-    legendWidth: legendWidth,
     legendAlign: legendAlign,
-    legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
-  }, (0, _tags.default)("radiogroup", props), marginProps, {
+  }, (0, _tags.default)("radiogroup", rest), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)
-  }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+  }, combinedAriaDescribedBy && {
+    "aria-describedby": combinedAriaDescribedBy
+  }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, {
+    id: inputHintId
+  }, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
-    warning: warning
+    warning: warning,
+    validationId: validationId
   }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
     "data-role": "radio-error-border",
     inline: inline,
@@ -122,9 +140,11 @@ const RadioButtonGroup = props => {
     legendSpacing: legendSpacing,
     isRequired: required,
     isOptional: isOptional
-  }, (0, _tags.default)("radiogroup", props), marginProps, {
+  }, (0, _tags.default)("radiogroup", rest), marginProps, {
     ml: marginLeft,
-    blockGroupBehaviour: !(error || warning || info)
+    blockGroupBehaviour: !(error || warning || info),
+    "aria-describedby": ariaDescribedBy,
+    validationId: validationId
   }), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
     "data-component": "radio-button-group",
     role: "radiogroup",

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

@@ -84,7 +84,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     readOnly?: boolean;
     /** Flag to configure component as optional */
     isOptional?: boolean;
-    /** The number of visible text lines for the control */
+    /** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
     rows?: number;
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
@@ -102,7 +102,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     borderRadius?: BorderRadiusType | BorderRadiusType[];
     /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
     hideBorders?: boolean;
-    /** Specify the minimum height */
+    /** Specify the minimum height. This property is only applied if rows is not set. */
     minHeight?: number;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "carbon-react",
-  "version": "147.8.0",
+  "version": "147.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
-    "esm",
-    "scripts/check_rfcs/check_rfcs.js",
-    "scripts/check_rfcs/index.js"
+    "esm"
   ],
   "scripts": {
     "start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
@@ -18,7 +16,6 @@
     "copy-files": "node ./scripts/copy-files.js",
     "precompile": "npm run type-check && npm run clean-lib && npm run build && npm run build:types && npm run copy-files",
     "prepublishOnly": "npm run precompile",
-    "postinstall": "node ./scripts/check_rfcs/index.js",
     "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "dotenvx run -- storybook build -c .storybook",
     "build-storybook:prod": "dotenvx run -f .env.production -- storybook build -c .storybook",
@@ -120,7 +117,7 @@
     "chromatic": "^6.17.4",
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
-    "conventional-changelog-conventionalcommits": "^4.6.3",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
     "core-js": "^3.33.3",
     "css-loader": "^6.8.1",
     "cz-conventional-changelog": "^3.3.0",
@@ -165,7 +162,7 @@
     "react-test-renderer": "^17.0.2",
     "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^22.0.8",
+    "semantic-release": "^24.2.3",
     "semver": "^7.5.4",
     "sprintf-js": "^1.1.3",
     "storybook": "^8.3.3",
@@ -179,12 +176,10 @@
   "dependencies": {
     "@floating-ui/dom": "~1.2.9",
     "@floating-ui/react-dom": "~1.3.0",
-    "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tanstack/react-virtual": "3.10.1",
     "@types/styled-system": "^5.1.22",
     "chalk": "^4.1.2",
-    "ci-info": "^3.8.0",
     "classnames": "~2.3.2",
     "crypto-js": "^4.2.0",
     "date-fns": "^2.30.0",

package/scripts/check_rfcs/check_rfcs.js

@@ -1,70 +0,0 @@
-/* eslint-disable no-console */
-const { Octokit } = require("@octokit/rest");
-const chalk = require("chalk");
-const ci = require("ci-info");
-
-const octokit = new Octokit({
-  baseUrl: "https://api.github.com",
-});
-
-const method = "GET";
-const owner = "sage";
-const path = "pulls";
-const repo = "carbon";
-const url = "/repos/{owner}/{repo}/{path}";
-
-const getOpenRfcs = async () => {
-  const { data } = await octokit.request({
-    owner,
-    repo,
-    url,
-    method,
-    path,
-  });
-
-  return data.filter((item) => {
-    const labels = item.labels.filter((label) => label.name === "RFC");
-
-    return labels.length > 0;
-  });
-};
-
-const getTitle = (rfc) => rfc.title.split(": ")[1];
-
-const checkRfcs = async () => {
-  if (ci.isCI && process.env.NODE_ENV !== "test") {
-    return;
-  }
-
-  try {
-    const openRfcs = await getOpenRfcs();
-
-    if (!openRfcs.length) return;
-
-    const header = chalk.bold.inverse.white(
-      " ".repeat(20),
-      "Open RFCs for carbon-react",
-      " ".repeat(20),
-    );
-
-    const rfcText = openRfcs
-      .map((item) => {
-        const title = getTitle(item);
-        return `- ${chalk.bold(title)}: ${chalk.cyan.italic(item.html_url)}`;
-      })
-      .join("\n\n");
-
-    console.log(`${header}\n\n${rfcText}\n`);
-  } catch (error) {
-    const rfcLink =
-      "https://github.com/Sage/carbon/pulls?q=is%3Aopen+is%3Apr+label%3ARFC";
-    const message = `Failed to retrieve open RFCs for carbon-react. Go to ${chalk.cyan.italic(
-      rfcLink,
-    )} to view current RFCs.`;
-    console.log(
-      `${chalk.yellow.inverse(" WARN ")}\n${chalk.yellow(message)}\n`,
-    );
-  }
-};
-
-module.exports = checkRfcs;

package/scripts/check_rfcs/index.js

@@ -1,3 +0,0 @@
-const checkRfcs = require("./check_rfcs");
-
-checkRfcs();