Use live region to announce characterCountText.

Author: avinashbot

src/file-upload/internal.tsx

@@ -13,7 +13,7 @@ import InternalFileDropzone from '../file-dropzone/internal';
 import { useFilesDragging } from '../file-dropzone/use-files-dragging';
 import InternalFileInput from '../file-input/internal';
 import InternalFileTokenGroup from '../file-token-group/internal';
-import { ConstraintTextArea, FormFieldError, FormFieldWarning } from '../form-field/internal';
+import { ConstraintTextRegion, FormFieldError, FormFieldWarning } from '../form-field/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { fireNonCancelableEvent } from '../internal/events';
@@ -167,9 +167,9 @@ function InternalFileUpload(
               </FormFieldWarning>
             )}
             {constraintText && (
-              <ConstraintTextArea id={constraintTextId} hasValidationText={!!errorText || !!warningText}>
+              <ConstraintTextRegion id={constraintTextId} hasValidationText={!!errorText || !!warningText}>
                 {constraintText}
-              </ConstraintTextArea>
+              </ConstraintTextRegion>
             )}
           </div>
         )}

src/form-field/__tests__/form-field-rendering.test.tsx

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 import FormField, { FormFieldProps } from '../../../lib/components/form-field';
 import createWrapper, { FormFieldWrapper } from '../../../lib/components/test-utils/dom';
 
-import screenreaderOnlyStyles from '../../../lib/components/internal/components/screenreader-only/styles.css.js';
+import formFieldStyles from '../../../lib/components/form-field/styles.css.js';
 import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 function renderFormField(props: FormFieldProps = {}) {
@@ -16,7 +16,7 @@ function renderFormField(props: FormFieldProps = {}) {
 }
 
 function findDebouncedCharacterCount(wrapper: FormFieldWrapper): HTMLElement | undefined {
-  return wrapper.findByClassName(screenreaderOnlyStyles.root)?.getElement();
+  return wrapper.findByClassName(formFieldStyles.constraint)?.findByClassName(liveRegionStyles.root)?.getElement();
 }
 
 describe('FormField component', () => {

src/form-field/internal.tsx

@@ -19,7 +19,6 @@ import {
   getTextFromSelector,
 } from '../internal/analytics/selectors';
 import { getBaseProps } from '../internal/base-component';
-import ScreenreaderOnly from '../internal/components/screenreader-only';
 import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
 import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
@@ -92,7 +91,7 @@ export function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFie
   );
 }
 
-export function ConstraintTextArea({
+export function ConstraintTextRegion({
   id,
   hasValidationText,
   children,
@@ -291,7 +290,7 @@ export default function InternalFormField({
             </FormFieldWarning>
           )}
           {(constraintText || characterCountText) && (
-            <ConstraintTextArea hasValidationText={!!errorText || !!warningText}>
+            <ConstraintTextRegion hasValidationText={!!errorText || !!warningText}>
               {constraintText && (
                 <span id={slotIds.constraint} className={testStyles.constraint}>
                   {constraintText}
@@ -303,10 +302,12 @@ export default function InternalFormField({
                   <span className={testStyles['character-count']} aria-hidden={true}>
                     {characterCountText}
                   </span>
-                  <ScreenreaderOnly id={slotIds.characterCount}>{debouncedCharacterCountText}</ScreenreaderOnly>
+                  <InternalLiveRegion hidden={true} delay={0}>
+                    <span id={slotIds.characterCount}>{debouncedCharacterCountText}</span>
+                  </InternalLiveRegion>
                 </>
               )}
-            </ConstraintTextArea>
+            </ConstraintTextRegion>
           )}
         </div>
       )}