- Source: https://github.com/reach/reach-ui/tree/master/packages/alert
- WAI ARIA: https://www.w3.org/TR/wai-aria-practices-1.1/#alert
Screenreader friendly alert messages. In many apps developers add "alert" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.
The Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screenreader on you won't notice a difference between rendering
<Alert> vs. a
npm install @reach/alert # or yarn add @reach/alert
And then import the components you need:
import Alert from "@reach/alert";
|type||enum "assertive" or "polite"||false|
Alert element props
Any props not listed above will be spread onto the underlying
"assertive" | "polite" default:
Controls whether the assistive technology should read immediately ("assertive") or wait until the user is idle ("polite").
<Alert type="polite"> This is the default </Alert> <Alert type="assertive"> If a screenreader is currently reading something and you render this, it will interrupt the user and read this immediately. </Alert>
You should probably stick with polite most of the time.
Regular React children.
<Alert> <p>Whatever you want here</p> <p>Is fine.</p> </Alert>