Steps to reproduce:

1. Open any project.
2. Activate the "Create" button from the banner region.
3. Type some alphabets in "Summary" field.
4. With "JAWS" screen reader software running, navigate to and activate the "Cancel" button present in modal.

Screen recording:

https://a11y-internal.atlassian.net/secure/attachment/16530/Screen+Recording+2021-12-29+at+1.10.33+AM.mov

Actual behaviour:

When the users activate the "Cancel" button, an alert dialog is displayed showing the confirmation message. Although this message was received by sighted users but screen reader users were unaware about the occurrence of the modal and the alert message was not announced for screen readers using the website using JAWS screen reader.

Expected result:

1. The accessible label for the alert dialog should be provided in the form of heading (For eg: Confirmation).
2. Appropriate role of "alertdialog" should be provided along with aria-modal="true" to the parent <div> element of dialog and the heading should be referenced via aria-labelledby to ensure that screen reader users are aware that a dialog has appeared on page and what is the purpose of dialog.
3. The dialog's prompt ("You have entered new data on this page...?") should be referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
4. Focus should be automatically set to the first focusable element inside the dialog, which is the "Cancel" button. This is the least destructive action, so focusing "Cancel" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.

Recommendation:

Refer the following link for more details on implementaion- https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/alertdialog.html

AXQA Ref:AXQA-69