liveAnnouncer direct DOM manipulation and issues with react-testing-library

[alirezamirian]

We faced an issue in some test suites written using react-testing-library, and it seems not like an issue specific to our setup, so sharing it here.
The issue was test cases affecting each other, and after lots of tracing, and debugging, it turned out it was due to liveAnnouncer leaving behind some role="log" elements, with a content that was matching some of our test selectors in the subsequent test cases.
After looking at LiveAnnouncer code, we realized it directly manipulates DOM, for some technical reason:

react-spectrum/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx

Lines 54 to 59 in 73d8be4

	// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
	// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
	// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.
	// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer
	// is simple enough to implement without React, so that's what we do here.
	// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638

The issue can be worked around, by calling destroyAnnouncer in a beforeEach block, (or just finding all role="logs" and removing them), but it's a very obscure issue, and maybe you want to document it or consider changing the live announcer implementation to be react-aware, despite the explained challenges regarding react-dom 18 API differences.

[reidbarber]

@LFDanLu has an RFC for some testing utilities, so this seems like a great fit for there (or in our docs until then.)