[Alert]: Make the Alert itself aria-live to dedupe screen reader announcement

[hchiam]

This pull request fixes bug #394 in an existing package (Alert):

• Visually hidden or not, content that dynamically changes can be used as an aria-live region.
• I tested http://localhost:9001/iframe.html?id=alert--basic-ts-ts&viewMode=story with VoiceOver on macOS (I was able to repro the bug before my changes, and after my changes I didn't hear the duplicated announcement). Also tested on Firefox and on Chrome. control+option+a to read whole page

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 74c0329:

Sandbox	Source
reach-ui-template	Configuration

[hchiam]

Ready for review.

[TimKolberger]

I think this might solve #916, because it removes the usage of ReactDOM.render.

[chaance]

I think the better solution (for now) is to add aria-hidden to the visible container as suggested in #394. I think the reason it didn't work in your testing is because cloning the child component clones that property to the announcement node, which we obviously don't want. A little refactoring to ensure it's only added to the visible container should do the trick.

Removing the mirror effects and changing the alert so that each item is its own live region changes how the alerts are read. I'd prefer not to change that behavior since a lot of apps likely depend on it as-is.

I think this might solve #916, because it removes the usage of ReactDOM.render.

Yes, we will need to rethink this for React 18, but it doesn't resolve the issue for the rest of the lib.