fix: a11y word limit announcement bug (#21191)

Author: riddhybansal

packages/react/src/components/TextArea/TextArea.tsx

@@ -397,9 +397,13 @@ const TextArea = frFn((props, forwardRef) => {
     (counterMode === 'character' || counterMode === 'word') ? (
       <Text
         as="div"
-        className={counterClasses}>{`${textCount}/${maxCount}`}</Text>
+        className={counterClasses}
+        aria-hidden="true">{`${textCount}/${maxCount}`}</Text>
     ) : null;
 
+  const counterDescriptionId =
+    enableCounter && maxCount ? `${id}-counter-desc` : undefined;
+
   const helperId = !helperText
     ? undefined
     : `text-area-helper-text-${textAreaInstanceId}`;
@@ -451,8 +455,13 @@ const TextArea = frFn((props, forwardRef) => {
   let ariaDescribedBy;
   if (invalid) {
     ariaDescribedBy = errorId;
-  } else if (!invalid && !warn && !isFluid && helperText) {
-    ariaDescribedBy = helperId;
+  } else if (warn && !isFluid) {
+    ariaDescribedBy = warnId;
+  } else {
+    const ids: string[] = [];
+    if (!isFluid && helperText && helperId) ids.push(helperId);
+    if (counterDescriptionId) ids.push(counterDescriptionId);
+    ariaDescribedBy = ids.length > 0 ? ids.join(' ') : undefined;
   }
 
   if (enableCounter) {
@@ -527,6 +536,15 @@ const TextArea = frFn((props, forwardRef) => {
         {label}
         {counter}
       </div>
+      {enableCounter && maxCount && (
+        <span
+          id={counterDescriptionId}
+          className={`${prefix}--visually-hidden`}>
+          {counterMode === 'word'
+            ? `Word limit ${maxCount}`
+            : `Character limit ${maxCount}`}
+        </span>
+      )}
       <div
         ref={wrapperRef}
         className={textAreaWrapperClasses}