You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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
The text was updated successfully, but these errors were encountered:
mehm8128
changed the title
Should not use alertdialog role for useToast and Toast component
Probably we should not use alertdialog role for useToast and Toast component
Nov 5, 2024
Provide your feedback here.
Hi, I found the issue about
useToast
(in React Aria) andToast
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
returnsalertdialog
role astoastProps
, 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.
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 usealertdialog
role foruseToast
.And Taking a look at Accessible Rich Internet Applications (WAI-ARIA) 1.1 - alertdialog, there is the same explanation.
info:
In Chakra-UI, Toast has
status
rolehttps://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 removealertdialog
role, and also we should be cautious to passalert
ascontentProps
(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 havearia-describedby
but at least the demo in our document useToeast – React Aria and Toast – React Spectrum, accessible description is not provided foralertdialog
.In MDN
In WAI-ARIA
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
The text was updated successfully, but these errors were encountered: