AB#120092 Screen-reader fix fo data-only messages

src/webchat-ui/components/presentational/ScreenReaderLiveRegion.tsx

@@ -59,10 +59,27 @@ const ScreenReaderLiveRegion: React.FC<ScreenReaderLiveRegionProps> = ({ 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);

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
 };
+