Probably we should use `status` and `alert` role instead of `alertdialog` role for `useToast` and `Toast` component

[mehm8128]

Provide your feedback here.

Hi, I found the issue about useToast (in React Aria) and Toast component (in React Spectrum).
I'm not so skilled about a11y, so if there is any mistake I'd like you to let me know.
Currently useToast returns alertdialog role as toastProps, but this is not ideal.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/toast/src/useToast.ts#L77

In ARIA: alertdialog role - Accessibility | MDN, there are such explanations.

The alertdialog role is used to notify users of urgent information that demands the user's immediate attention.

Because of its urgent nature, interrupting the user's workflow, alert dialogs must always be modal.

But it seems that useToast is intended to be used for more casual usage and Toast component is not modal, so I think we should not use alertdialog role for useToast.

And Taking a look at Accessible Rich Internet Applications (WAI-ARIA) 1.1 - alertdialog, there is the same explanation.

Content authors SHOULD make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog. See aria-modal.

info:
In Chakra-UI, Toast has status role
https://github.com/chakra-ui/zag/blob/main/packages/machines/toast/src/toast.connect.ts#L59

and also in Vercel, Toast has status role (I was not able to source code).
https://vercel.com/geist/toast

So I think it is good to use status role and remove alertdialog role, and also we should be cautious to pass alert as contentProps (because it is also used for important, and time-sensitive information, MDN says).
ARIA: status role - Accessibility | MDN
ARIA: alert role - Accessibility | MDN

And I found another one issue that alertdialog element should have aria-describedby but at least the demo in our document useToeast – React Aria and Toast – React Spectrum, accessible description is not provided for alertdialog.

In MDN

The alert dialog text must have an accessible description using aria-describedby.

In WAI-ARIA

Authors SHOULD use aria-describedby on an alertdialog to reference the alert message element in the dialog.

Thank you for reading this feedback, I'm happy if you will consider about it.

🔦 Context

No response

💻 Code Sample

No response

Version

No response

What browsers are you seeing the problem on?

No response

If other, please specify

No response

What operating system are you using?

No response

[devongovett]

I believe we changed to use alertdialog because toasts may contain interactive elements such as buttons, and toasts may also be focused by the user. These features are not supported by the alert or status roles, and using a dialog resulted in better screen reader experience in our testing. See this comment and overall PR for more context: #6223 (comment)

[majornista]

Just to add to my comment on the original PR: #6223 (comment).

I implemented Toasts using alertdialog to provide a better experience when displaying more than one Toast in a Toast region; we render them as a list of alert dialogs. Also, to provide a better experience when dismissing a Toast from the list of more than one. Rather than focus the dismiss button for a Toast adjacent to the one being removed, which doesn’t provide much context, we focus the adjacent alert dialog, which announces the Toast message and the number of notifications remaining in the list.

mdn/content#37653