Notification component's role="alert" creates accessibility issue for screen reader users

Reproduction link

Steps to reproduce

1. Open example.
2. Click button to open notification box.

What is actually happening?

Since role="alert" is used, the notification interrupt whatever the user is doing. This also stops a screen reader from finishing whatever it was saying before the alert interrupted it (and will not pick up where it left off) which can make a user feel stranded. Toast-style notifications should be used for non-critical, non-interactive content so it’s inappropriate to use role="alert" which implicitly has an aria-live value of assertive.

What is expected?

Instead, role="status" is more appropriate as it allows for current screen reader announcements to be read before announcing the non-critical notification content. This requires the notification elements to be with an element with role="region" and aria-live="polite".

Environment	Info
antd	4.24.5
React	React
System	Windows 10
Browser	All

---

More information:

• https://www.scottohara.me/blog/2019/07/08/a-toast-to-a11y-toasts.html#inclusive-ux-of-a-toast
• https://adrianroselli.com/2020/01/defining-toast-messages.html#NeededFeatures

[Thulof]

Hi, @mellis481 @dgreene1 @MadCcc I have pushed a PR to add a role prop to notification component, please review it. https://github.com/ant-design/ant-design/pull/39611

[mellis481]

Cannot find anything different, could you provide more detail for role="alert"?

@MadCcc The difference is succinctly described in the “What is actually happening?” and “What is expected?” sections above.