bug: ensure Announce components work without pre-existing text node (#…

…5568)

* bug: ensure mutation observer is triggered when content is added to Announce without pre-existing text.

* Comment change out and add tests

* Set childList: true

* Remove unused

* Create afraid-pianos-invent.md

.changeset/afraid-pianos-invent.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+bug: ensure Announce components work without pre-existing text node

packages/react/src/live-region/Announce.tsx

@@ -108,6 +108,7 @@ export function Announce({
     observer.observe(container, {
       subtree: true,
       characterData: true,
+      childList: true,
     })
 
     return () => {

packages/react/src/live-region/__tests__/AriaAlert.test.tsx

@@ -1,6 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import React from 'react'
 import {AriaAlert} from '../AriaAlert'
+import {userEvent} from '@testing-library/user-event'
 import {getLiveRegion} from '../../utils/testing'
 
 describe('AriaAlert', () => {
@@ -46,4 +47,32 @@ describe('AriaAlert', () => {
     )
     expect(screen.getByTestId('container').tagName).toBe('SPAN')
   })
+
+  it('should update live-region element when AriaAlert goes from empty to populated', async () => {
+    function TestComponent() {
+      const [show, setShow] = React.useState(false)
+      return (
+        <>
+          <AriaAlert>{show ? 'Failed to export data!' : null}</AriaAlert>
+          <button
+            type="button"
+            onClick={() => {
+              setShow(true)
+            }}
+          >
+            Export data
+          </button>
+        </>
+      )
+    }
+    const user = userEvent.setup()
+
+    render(<TestComponent />)
+
+    const liveRegion = getLiveRegion()
+    expect(liveRegion.getMessage('assertive')).toBe('')
+
+    await user.click(screen.getByText('Export data'))
+    expect(liveRegion.getMessage('assertive')).toBe('Failed to export data!')
+  })
 })

packages/react/src/live-region/__tests__/AriaStatus.test.tsx

@@ -83,4 +83,32 @@ describe('AriaStatus', () => {
     )
     expect(screen.getByTestId('container').tagName).toBe('SPAN')
   })
+
+  it('should update live-region element when AriaStatus goes from empty to populated', async () => {
+    function TestComponent() {
+      const [show, setShow] = React.useState(false)
+      return (
+        <>
+          <AriaStatus>{show ? 'Export completed' : null}</AriaStatus>
+          <button
+            type="button"
+            onClick={() => {
+              setShow(true)
+            }}
+          >
+            Export data
+          </button>
+        </>
+      )
+    }
+    const user = userEvent.setup()
+
+    render(<TestComponent />)
+
+    const liveRegion = getLiveRegion()
+    expect(liveRegion.getMessage('polite')).toBe('')
+
+    await user.click(screen.getByText('Export data'))
+    expect(liveRegion.getMessage('polite')).toBe('Export completed')
+  })
 })