diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx index 8ffe932bf48f..fb0bbc1aadee 100644 --- a/packages/react/src/components/TextArea/TextArea.tsx +++ b/packages/react/src/components/TextArea/TextArea.tsx @@ -414,11 +414,41 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => { textareaProps.maxLength = maxCount; } } + + const announcerRef = useRef(null); + const [prevAnnouncement, setPrevAnnouncement] = useState(''); const ariaAnnouncement = useAnnouncer( textCount, maxCount, counterMode === 'word' ? 'words' : undefined ); + useEffect(() => { + if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) { + const announcer = announcerRef.current as HTMLSpanElement | null; + if (announcer) { + // Clear the content first + announcer.textContent = ''; + + // Set the new content after a small delay + const timeoutId = setTimeout( + () => { + if (announcer) { + announcer.textContent = ariaAnnouncement; + setPrevAnnouncement(ariaAnnouncement); + } + }, + counterMode === 'word' ? 2000 : 1000 + ); + + //clear the timeout + return () => { + if (timeoutId) { + clearTimeout(timeoutId); + } + }; + } + } + }, [ariaAnnouncement, prevAnnouncement, counterMode]); const input = (