diff --git a/src/webchat-ui/components/presentational/ScreenReaderLiveRegion.tsx b/src/webchat-ui/components/presentational/ScreenReaderLiveRegion.tsx index 9352336e..ccf18c39 100644 --- a/src/webchat-ui/components/presentational/ScreenReaderLiveRegion.tsx +++ b/src/webchat-ui/components/presentational/ScreenReaderLiveRegion.tsx @@ -59,10 +59,27 @@ const ScreenReaderLiveRegion: React.FC = ({ liveCon } // Use live content if available, otherwise extract from DOM - const rawText = liveContent[id] || getTextFromDOM(id); - const text = cleanUpText(rawText || "A new message"); + let text = ""; + if (liveContent[id]) { + text = cleanUpText(liveContent[id]); + } else { + const domResult = getTextFromDOM(id); + if (domResult.elementExists) { + // Element exists in DOM but may have no accessible text + // For visible elements without text (like images), provide a generic announcement + text = cleanUpText(domResult.text || "A new message"); + } else { + // Element doesn't exist - this is a data-only message that shouldn't be announced + text = ""; + } + } - setLiveMessage({ id, text }); + // Only announce if we have meaningful content + if (text.trim()) { + setLiveMessage({ id, text }); + } else { + setLiveMessage(null); // Stay silent for data-only messages + } }, 100); return () => clearTimeout(timeout); diff --git a/src/webchat-ui/utils/live-region-announcement.ts b/src/webchat-ui/utils/live-region-announcement.ts index 38e8738a..69b59de1 100644 --- a/src/webchat-ui/utils/live-region-announcement.ts +++ b/src/webchat-ui/utils/live-region-announcement.ts @@ -84,11 +84,15 @@ export const extractTextForScreenReader = (root: HTMLElement): string => { * - Using the extractTextForScreenReader function to get the text content * * @param id - The message ID to extract text for - * @returns The extracted text or a default message if not found + * @returns An object with the extracted text and whether the element exists */ -export const getTextFromDOM = (id: string): string => { +export const getTextFromDOM = (id: string): { text: string; elementExists: boolean } => { const messageElement = document.querySelector(`[data-message-id="${id}"]`); - return messageElement - ? extractTextForScreenReader(messageElement as HTMLElement) - : "A new message"; + if (!messageElement) { + return { text: "", elementExists: false }; // Element doesn't exist - data-only message + } + + const extractedText = extractTextForScreenReader(messageElement as HTMLElement); + return { text: extractedText, elementExists: true }; // Element exists }; +