Implsible to use @reach/alert with React Context

🐛 Bug report

Current Behavior

The accessible div with role="alert|status" doesn’t have any content.

It’s is not anywhere that you’re not supposed to pass as children anything that relies on a react context. This makes it impossible to use your awesome accessible alert component with most of css-in-js libraries.

Expected behavior

To render alert without throwing the errors.

Reproducible example

Notice how alert gets fired for the second time with undefined as a value CodeSandbox example

Suggested solution(s)

To either specify that you can’t use context consumers as children of @reach/alert component or to somehow prevent cloning passed children.

Additional context

The error occurs because of this render call https://github.com/reach/reach-ui/blob/a376daec462ccb53d33f4471306dff35383a03a5/packages/alert/src/index.tsx#L145-L149

Your environment

Software	Name(s)	Version
Reach Package	Alert	0.10.0
React		16.12.0
Browser		Any
Assistive tech		none
Node		any
npm/yarn		any
Operating System		any

[chaance]

Developers can’t read from context inside of an Alert because we aren’t using ReactDOM.createPortal(), we’re actually creating a couple of brand new React roots. We could use createPortal but then apps would need to render the entire app tree in an <AlertProvider>, or maybe there’s a way with default context to do it, but we haven’t explored that yet. So, we’ll see how this goes. If it becomes a problem we can introduce a portal later.

[necinc]

Then could you please tell if there were any limitations that did not allow us to use portals in the first place? In case somebody (maybe even myself) will stumble upon this issue and would like to open an MR with the fix so they have some context.