Update Alert role
#132
Labels
scope: a11y
Threads for addressing accessibility issues.
status: discussing
Under discussion threads. Closed as stale after 60 days of inactivity.
Description
The
Alert
component always has thealert
role:ui/src/alert/alert.tsx
Line 36 in 46150e7
However, the
alert
role is quite disruptive to non-sighted users. The role is equivalent to settingaria-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
isalert
if the variant isdanger
role
isstatus
if the variant isinfo
,success
, orwarning
Additionally, we should consider creating a separate component for callout boxes:
Screenshots
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
The text was updated successfully, but these errors were encountered: