[alert] Screen reader sees and reads both alerts when full page read is requested

[mareksuscak]

🐛 Bug report

Current Behavior

Right now, the screen reader sees both the visible alert and the live region due to the fact that we're essentially duplicating Alert's children and none of them is hidden from the screen reader by applying a role="none" or aria-hidden="true".

See the example below.

Expected behavior

When the full page read is requested (on iOS use two fingers and swipe from top to bottom)

Reproducible example

CodeSandbox Example

Suggested solution(s)

One of the following:

1. Do not render children twice (see WAI-ARIA authoring practices example).
2. Hide the visible content from the screen reader (not quite sure if there's a use case that requires both to be visible) with role="none" or aria-hidden="true"

Additional context

Your environment

Software	Name/Version(s)
Package Name	@reach/alert
React	16.x.x
Browser	Safari on iOS
Assistive tech	VoiceOver on iOS
Node	10.17.0
npm/yarn	1.19.2
Operating System	iOS 13

[mareksuscak]

Can we reopen please? This is definitely still an issue.