Add support for role="alertdialog" to <Dialog> component

[thecrypticace]

Our <Dialog> component in React and Vue unconditionally sets the role to dialog. However, there are situations when a role of alertdialog would be more appropriate. This PR allows the user to choose between the two and will fallback to dialog if passed a role that is invalid or otherwise not suitable for use by the <Dialog> component.

The alertdialog role can be used when:

• The message or action being presented is important enough that it needs to interrupt the user's workflow; AND
• The dialog requires user interaction, confirmation, acknowledgement, etc…

For example, a confirmation dialog when deleting a user would be a suitable use case for role="alertdialog".

Take a look at the MDN docs for more details about the role and when it should be used.

Please note that a properly accessible alert dialog also requires the use of our Dialog Title and Dialog Description components — we do not currently warn if they are missing but may decide to do so in the future.

Fixes #2701

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	Aug 28, 2023 5:32pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	Aug 28, 2023 5:32pm