refactor: rewrite useAnnouncer in typescript (#18941)

* refactor: rewrite useAnnouncer in typescript

* refactor: rename useAnnouncer to getAnnouncement

Author: adamalston

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

@@ -19,7 +19,7 @@ import deprecate from '../../prop-types/deprecate';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
-import { useAnnouncer } from '../../internal/useAnnouncer';
+import { getAnnouncement } from '../../internal/getAnnouncement';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 import { useId } from '../../internal/useId';
@@ -181,7 +181,7 @@ const TextArea = frFn((props, forwardRef) => {
     light,
     placeholder = '',
     enableCounter = false,
-    maxCount = undefined,
+    maxCount,
     counterMode = 'character',
     warn = false,
     warnText = '',
@@ -427,9 +427,10 @@ const TextArea = frFn((props, forwardRef) => {
 
   const announcerRef = useRef<HTMLSpanElement>(null);
   const [prevAnnouncement, setPrevAnnouncement] = useState('');
-  const ariaAnnouncement = useAnnouncer(
+  const ariaAnnouncement = getAnnouncement(
     textCount,
     maxCount,
+    counterMode === 'word' ? 'word' : undefined,
     counterMode === 'word' ? 'words' : undefined
   );
   useEffect(() => {

packages/react/src/components/TextInput/TextInput.tsx

@@ -19,7 +19,7 @@ import deprecate from '../../prop-types/deprecate';
 import { textInputProps } from './util';
 import { FormContext } from '../FluidForm';
 import { usePrefix } from '../../internal/usePrefix';
-import { useAnnouncer } from '../../internal/useAnnouncer';
+import { getAnnouncement } from '../../internal/getAnnouncement';
 import { Text } from '../Text';
 
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
@@ -324,7 +324,7 @@ const TextInput = React.forwardRef(function TextInput(
   const { isFluid } = useContext(FormContext);
   const announcerRef = useRef<HTMLSpanElement>(null);
   const [prevAnnouncement, setPrevAnnouncement] = useState('');
-  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const ariaAnnouncement = getAnnouncement(textCount, maxCount);
   useEffect(() => {
     if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
       const announcer = announcerRef.current as HTMLSpanElement | null;

packages/react/src/internal/__tests__/useAnnouncer-test.js renamed to packages/react/src/internal/__tests__/getAnnouncement-test.js

@@ -1,20 +1,20 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { render } from '@testing-library/react';
 import React from 'react';
-import { useAnnouncer } from '../useAnnouncer';
+import { getAnnouncement } from '../getAnnouncement';
 
-describe('useAnnouncer', () => {
+describe('getAnnouncement', () => {
   it('should emit announcement for characters', () => {
     let value = null;
 
     function TestComponent() {
-      value = useAnnouncer(9, 10);
+      value = getAnnouncement(9, 10);
       return null;
     }
 
@@ -26,7 +26,7 @@ describe('useAnnouncer', () => {
     let value = null;
 
     function TestComponent() {
-      value = useAnnouncer(9, 10, 'words');
+      value = getAnnouncement(9, 10, 'word', 'words');
       return null;
     }
 
@@ -38,7 +38,7 @@ describe('useAnnouncer', () => {
     let value = null;
 
     function TestComponent() {
-      value = useAnnouncer(10, 10, 'words');
+      value = getAnnouncement(10, 10, 'word', 'words');
       return null;
     }
 
@@ -50,7 +50,7 @@ describe('useAnnouncer', () => {
     let value = null;
 
     function TestComponent() {
-      value = useAnnouncer(10, 10, 'characters');
+      value = getAnnouncement(10, 10, 'character', 'characters');
       return null;
     }
 

packages/react/src/internal/getAnnouncement.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** Returns an announcement message when the remaining count is low. */
+export const getAnnouncement = (
+  count: number,
+  maxCount?: number,
+  singularEntityName = 'character',
+  pluralEntityName = 'characters'
+) => {
+  if (typeof maxCount === 'undefined') return null;
+
+  const remaining = maxCount - count;
+
+  if (remaining <= 10 && remaining > 0) {
+    const entityName = remaining === 1 ? singularEntityName : pluralEntityName;
+    return `${remaining} ${entityName} left.`;
+  }
+
+  if (remaining <= 0) {
+    return `Maximum ${pluralEntityName} reached.`;
+  }
+
+  return null;
+};