fix: LiveRegion text extraction (#3417)

Co-authored-by: Boris Serdiuk <[email protected]>

Author: georgylobko

src/live-region/__integ__/live-region.test.ts

@@ -26,7 +26,7 @@ describe('Live region', () => {
     setupTest(async page => {
       // Wait for live region to debounce after page load
       await new Promise(resolve => setTimeout(resolve, 2000));
-      await expect(page.getInnerHTML('[aria-live]')).resolves.toBe('<p>Testing</p>Testing');
+      await expect(page.getInnerHTML('[aria-live]')).resolves.toBe('<p>Testing</p> Testing');
     })
   );
 });

src/live-region/__tests__/live-region.test.tsx

@@ -3,7 +3,10 @@
 import React, { createRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 
-import InternalLiveRegion, { InternalLiveRegionRef } from '../../../lib/components/live-region/internal.js';
+import InternalLiveRegion, {
+  extractTextContent,
+  InternalLiveRegionRef,
+} from '../../../lib/components/live-region/internal.js';
 
 import styles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
@@ -128,3 +131,34 @@ describe('LiveRegion', () => {
     expect(politeRegion).toHaveTextContent('Announcement');
   });
 });
+
+describe('text extractor', () => {
+  it('extracts text from an empty element', () => {
+    const el = document.createElement('div');
+    expect(extractTextContent(el)).toBe('');
+  });
+
+  it('extracts text from an empty element with a comment', () => {
+    const el = document.createElement('div');
+    el.innerHTML = '<!-- comment -->';
+    expect(extractTextContent(el)).toBe('');
+  });
+
+  it('extracts text from a single element', () => {
+    const el = document.createElement('div');
+    el.textContent = 'Hello';
+    expect(extractTextContent(el)).toBe('Hello');
+  });
+
+  it('extracts text from nested elements', () => {
+    const el = document.createElement('article');
+    el.innerHTML = `
+        <h1>Hello</h1>
+        <p>World</p>
+        <span>inline</span>
+        <span>content</span>
+        <span></span>
+    `;
+    expect(extractTextContent(el)).toBe('Hello World inline content');
+  });
+});

src/live-region/internal.tsx

@@ -116,12 +116,28 @@ export default React.forwardRef(function InternalLiveRegion(
   );
 });
 
-function extractTextContent(node: HTMLElement): string {
+const processNode = (childNode: Node): string => {
+  if (childNode.nodeType === Node.TEXT_NODE) {
+    return childNode.textContent || '';
+  }
+
+  if (childNode.nodeType === Node.ELEMENT_NODE) {
+    return extractTextContent(childNode as HTMLElement);
+  }
+
+  return '';
+};
+
+export function extractTextContent(node: HTMLElement): string {
   // We use the text content of the node as the announcement text.
   // This only extracts text content from the node including all its children which is enough for now.
   // To make it more powerful, it is possible to create a more sophisticated extractor with respect to
   // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
-  return (node.textContent || '').replace(/\s+/g, ' ').trim();
+  if (!node || !node?.childNodes?.length) {
+    return '';
+  }
+
+  return Array.from(node.childNodes, processNode).join(' ').replace(/\s+/g, ' ').trim();
 }
 
 function getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {