fix(TextArea): adds character counter alert (#12411)

* feat: add counter alert

* feat: visually hide alert

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/TextArea/TextArea.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import classNames from 'classnames';
 import deprecate from '../../prop-types/deprecate';
 import { WarningFilled } from '@carbon/icons-react';
@@ -40,6 +40,7 @@ const TextArea = React.forwardRef(function TextArea(
   const [textCount, setTextCount] = useState(
     defaultValue?.length || value?.length || 0
   );
+  const [ariaAnnouncement, setAriaAnnouncement] = useState('');
 
   const textareaProps = {
     id,
@@ -61,6 +62,15 @@ const TextArea = React.forwardRef(function TextArea(
     textareaProps.maxLength = maxCount;
   }
 
+  useEffect(() => {
+    const lastTen = maxCount - 10;
+    if (textCount >= lastTen) {
+      setAriaAnnouncement(`${maxCount - textCount} characters left.`);
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
+
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
     [`${prefix}--label--disabled`]: disabled,
@@ -139,6 +149,9 @@ const TextArea = React.forwardRef(function TextArea(
           <WarningFilled className={`${prefix}--text-area__invalid-icon`} />
         )}
         {input}
+        <span className={`${prefix}--text-area__counter-alert`} role="alert">
+          {ariaAnnouncement}
+        </span>
         {isFluid && <hr className={`${prefix}--text-area__divider`} />}
         {isFluid && invalid ? error : null}
       </div>

packages/styles/scss/components/text-area/_text-area.scss

@@ -72,6 +72,17 @@
     fill: $support-error;
   }
 
+  .#{$prefix}--text-area__counter-alert {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------