Update Alert role

[huyenltnguyen]

Description

The Alert component always has the alert role:

ui/src/alert/alert.tsx

Line 36 in 46150e7

<div className={classes} role="alert" {...props}>

However, the alert role is quite disruptive to non-sighted users. The role is equivalent to setting aria-live="assertive", which interrupts the user's current task and announces the message immediately. For this reason, the role should only be used for time-sensitive messages, typically error messages.

I'd propose that we change the component's role as follows:

• role is alert if the variant is danger
• role is status if the variant is info, success, or warning

---

Additionally, we should consider creating a separate component for callout boxes:

Screenshots

Variant	Screenshot
Info
Danger

We're using Alert for those messages (to achieve consistent styles), but I think the content of those boxes should be read as part of the page content, rather than as a notification / alert.

The new callout component can have the same set of variants that Alert has, but renders its content in a plain div, without any roles.

References

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role