carbon-react 140.0.1 → 140.1.1

package/esm/__internal__/character-count/character-count.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface CharacterCountProps {
+    ariaLive?: "off" | "polite";
     value: number;
     debouncedValue?: number;
     limit: number;
@@ -7,5 +8,5 @@ interface CharacterCountProps {
     isOverLimit: boolean;
     visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

package/esm/__internal__/character-count/character-count.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint } from "./character-count.style";
 import useLocale from "../../hooks/__internal__/useLocale";
 const CharacterCount = ({
+  ariaLive = "off",
   value,
   debouncedValue = value,
   limit,
@@ -25,7 +26,8 @@ const CharacterCount = ({
     "data-element": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
-    "aria-live": "polite"
+    "data-role": "visually-hidden-character-count",
+    "aria-live": ariaLive
   }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 export default CharacterCount;

package/esm/components/heading/heading.component.js

@@ -49,6 +49,7 @@ export const Heading = ({
   const getSubheader = () => {
     return /*#__PURE__*/React.createElement(StyledSubHeader, {
       "data-element": "subtitle",
+      "data-role": "subtitle",
       id: subtitleId,
       hasBackLink: !!backLink,
       hasSeparator: separator
@@ -74,7 +75,9 @@ export const Heading = ({
     variant: headingType,
     "data-element": "title",
     id: titleId
-  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
+  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, {
+    "data-role": "heading-separator"
+  }), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
     "data-element": "divider"
   }), children) : null;
 };

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** Specifies an aria label to the component */
+    /** (Deprecated) Specifies an aria label to the component */
     "aria-label"?: string;
-    /** Specifies the aria describedby for the component */
+    /** (Deprecated) Specifies the aria describedby for the component */
     "aria-describedby"?: string;
-    /** The value of progress to be read out to the user. */
+    /** (Deprecated) The value of progress to be read out to the user. */
     "aria-valuenow"?: number;
-    /** The minimum value of the progress tracker */
+    /** (Deprecated) The minimum value of the progress tracker */
     "aria-valuemin"?: number;
-    /** The maximum value of the progress tracker */
+    /** (Deprecated) The maximum value of the progress tracker */
     "aria-valuemax"?: number;
-    /** Prop to define the human readable text alternative of aria-valuenow
+    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
      * if aria-valuenow is not a number
      */
     "aria-valuetext"?: string;

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -5,12 +5,14 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel = "progress tracker",
+  "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin = 0,
-  "aria-valuemax": ariaValueMax = 100,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -25,6 +27,10 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
+  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
+    deprecatedAriaTagsWarnTriggered = true;
+    Logger.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
+  }
   const l = useLocale();
   const barRef = useRef(null);
   const [barLength, setBarLength] = useState("0px");
@@ -64,12 +70,14 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
+  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
+  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
+  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     length: length
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || "progress tracker",
     "aria-describedby": ariaDescribedBy,
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,

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

@@ -26,7 +26,8 @@ export const SettingsRow = ({
   };
   return /*#__PURE__*/React.createElement(StyledSettingsRow, _extends({
     className: className,
-    hasDivider: divider
+    hasDivider: divider,
+    "data-role": "settings-row"
   }, tagComponent("settings-row", rest), {
     m: 0
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledSettingsRowHeader, null, heading()), /*#__PURE__*/React.createElement(StyledSettingsRowInput, null, children));

package/esm/components/text-editor/text-editor.component.js

@@ -66,7 +66,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     info,
     label: labelText
   });
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(getContent(value).getPlainText(""), characterLimit);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(getContent(value).getPlainText(""), characterLimit, isFocused ? "polite" : "off");
   const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useEffect, useContext, useCallback } from "react";
+import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
@@ -28,6 +28,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   children,
   characterLimit,
   onChange,
+  onFocus,
+  onBlur,
   disabled = false,
   labelInline,
   labelAlign,
@@ -79,6 +81,21 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       ref(inputElement);
     }
   }, [ref]);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -120,7 +137,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit, characterCountAriaLive);
   useEffect(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -169,6 +186,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     value: value,
     ref: callbackRef,
     onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     placeholder: disabled ? "" : placeholder,

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext, useRef } from "react";
+import React, { useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
@@ -78,7 +78,22 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [uniqueId, uniqueName] = useUniqueId(id, name);
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit, characterCountAriaLive);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -137,11 +152,11 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     id: uniqueId,
     ref: ref,
     name: uniqueName,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
     onClick: disabled || readOnly ? undefined : onClick,
-    onFocus: onFocus,
+    onFocus: handleFocus,
     onMouseDown: disabled || readOnly ? undefined : onMouseDown,
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,

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

@@ -1,2 +1,2 @@
-declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
+declare const useCharacterCount: (value?: string, characterLimit?: number, characterCountAriaLive?: "off" | "polite") => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useEffect, useState } from "react";
 import CharacterCount from "../../../__internal__/character-count";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useDebounce from "../useDebounce";
-const useCharacterCount = (value = "", characterLimit) => {
+const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = useState(value);
   const debounceWaitTime = 2000;
@@ -28,6 +28,7 @@ const useCharacterCount = (value = "", characterLimit) => {
     return false;
   }, [debouncedValue, characterLimit, isCharacterLimitValid]);
   return [isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
+    ariaLive: characterCountAriaLive,
     isOverLimit: isOverLimit,
     isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,

package/lib/__internal__/character-count/character-count.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface CharacterCountProps {
+    ariaLive?: "off" | "polite";
     value: number;
     debouncedValue?: number;
     limit: number;
@@ -7,5 +8,5 @@ interface CharacterCountProps {
     isOverLimit: boolean;
     visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

package/lib/__internal__/character-count/character-count.component.js

@@ -10,6 +10,7 @@ var _characterCount = require("./character-count.style");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CharacterCount = ({
+  ariaLive = "off",
   value,
   debouncedValue = value,
   limit,
@@ -32,7 +33,8 @@ const CharacterCount = ({
     "data-element": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
-    "aria-live": "polite"
+    "data-role": "visually-hidden-character-count",
+    "aria-live": ariaLive
   }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 var _default = exports.default = CharacterCount;

package/lib/components/heading/heading.component.js

@@ -56,6 +56,7 @@ const Heading = ({
   const getSubheader = () => {
     return /*#__PURE__*/_react.default.createElement(_heading.StyledSubHeader, {
       "data-element": "subtitle",
+      "data-role": "subtitle",
       id: subtitleId,
       hasBackLink: !!backLink,
       hasSeparator: separator
@@ -81,7 +82,9 @@ const Heading = ({
     variant: headingType,
     "data-element": "title",
     id: titleId
-  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
+  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, {
+    "data-role": "heading-separator"
+  }), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
     "data-element": "divider"
   }), children) : null;
 };

package/lib/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** Specifies an aria label to the component */
+    /** (Deprecated) Specifies an aria label to the component */
     "aria-label"?: string;
-    /** Specifies the aria describedby for the component */
+    /** (Deprecated) Specifies the aria describedby for the component */
     "aria-describedby"?: string;
-    /** The value of progress to be read out to the user. */
+    /** (Deprecated) The value of progress to be read out to the user. */
     "aria-valuenow"?: number;
-    /** The minimum value of the progress tracker */
+    /** (Deprecated) The minimum value of the progress tracker */
     "aria-valuemin"?: number;
-    /** The maximum value of the progress tracker */
+    /** (Deprecated) The maximum value of the progress tracker */
     "aria-valuemax"?: number;
-    /** Prop to define the human readable text alternative of aria-valuenow
+    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
      * if aria-valuenow is not a number
      */
     "aria-valuetext"?: string;

package/lib/components/progress-tracker/progress-tracker.component.js

@@ -10,16 +10,18 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _progressTracker = require("./progress-tracker.style");
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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() { _extends = Object.assign ? Object.assign.bind() : 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); }
+let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel = "progress tracker",
+  "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin = 0,
-  "aria-valuemax": ariaValueMax = 100,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -34,6 +36,10 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
+  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
+    deprecatedAriaTagsWarnTriggered = true;
+    _logger.default.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
+  }
   const l = (0, _useLocale.default)();
   const barRef = (0, _react.useRef)(null);
   const [barLength, setBarLength] = (0, _react.useState)("0px");
@@ -73,12 +79,14 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
+  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
+  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
+  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     length: length
   }, rest, (0, _tags.default)("progress-bar", rest), {
     role: "progressbar",
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || "progress tracker",
     "aria-describedby": ariaDescribedBy,
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,

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

@@ -33,7 +33,8 @@ const SettingsRow = ({
   };
   return /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRow, _extends({
     className: className,
-    hasDivider: divider
+    hasDivider: divider,
+    "data-role": "settings-row"
   }, (0, _tags.default)("settings-row", rest), {
     m: 0
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRowHeader, null, heading()), /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRowInput, null, children));

package/lib/components/text-editor/text-editor.component.js

@@ -75,7 +75,7 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
     info,
     label: labelText
   });
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)((0, _utils.getContent)(value).getPlainText(""), characterLimit);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)((0, _utils.getContent)(value).getPlainText(""), characterLimit, isFocused ? "polite" : "off");
   const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console

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

@@ -37,6 +37,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   children,
   characterLimit,
   onChange,
+  onFocus,
+  onBlur,
   disabled = false,
   labelInline,
   labelAlign,
@@ -88,6 +90,21 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
       ref(inputElement);
     }
   }, [ref]);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = (0, _react.useState)("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -129,7 +146,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     label,
     fieldHelp
   });
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit, characterCountAriaLive);
   (0, _react.useEffect)(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -178,6 +195,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     value: value,
     ref: callbackRef,
     onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     placeholder: disabled ? "" : placeholder,

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

@@ -87,7 +87,22 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(characterCountValue, characterLimit);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = (0, _react.useState)("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(characterCountValue, characterLimit, characterCountAriaLive);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
@@ -146,11 +161,11 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     id: uniqueId,
     ref: ref,
     name: uniqueName,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
     onClick: disabled || readOnly ? undefined : onClick,
-    onFocus: onFocus,
+    onFocus: handleFocus,
     onMouseDown: disabled || readOnly ? undefined : onMouseDown,
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,

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

@@ -1,2 +1,2 @@
-declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
+declare const useCharacterCount: (value?: string, characterLimit?: number, characterCountAriaLive?: "off" | "polite") => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -11,7 +11,7 @@ var _useDebounce = _interopRequireDefault(require("../useDebounce"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
-const useCharacterCount = (value = "", characterLimit) => {
+const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
   const debounceWaitTime = 2000;
@@ -37,6 +37,7 @@ const useCharacterCount = (value = "", characterLimit) => {
     return false;
   }, [debouncedValue, characterLimit, isCharacterLimitValid]);
   return [isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+    ariaLive: characterCountAriaLive,
     isOverLimit: isOverLimit,
     isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "140.0.1",
+  "version": "140.1.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -88,6 +88,7 @@
     "@storybook/react": "^7.6.4",
     "@storybook/react-webpack5": "^7.6.4",
     "@storybook/theming": "^7.6.4",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -202,7 +203,8 @@
     "styled-system": "^5.1.5"
   },
   "overrides": {
-    "playwright-core": "$@playwright/experimental-ct-react17"
+    "playwright-core": "$@playwright/experimental-ct-react17",
+    "@testing-library/dom": "$@testing-library/dom"
   },
   "config": {
     "commitizen": {