feat(modal): support alertdialog aria role

[FrivalszkyP]

Closes #5960

There is an alertdialog role in ARIA which is described as this:

Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal.

Much like role="alert", it will be read out by screen reader software immediately when displayed.

Changelog

New

• Added the alert prop to the react implementation of Modal.js
• Added a unit test covering it

Testing / Reviewing

See Carbon React Storybook where I added a knob for controlling the alert prop.

[FrivalszkyP]

My decision behind adding a new prop to control this behavior was that, although role="alertdialog" is closely related to danger, I assume there could be cases where a dialog has the alert=true prop but not the danger=true prop. Also, I did not want to introduce a breaking change for developers who already implemented a workaround for the lack of control of the role attribute.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 057618c

https://deploy-preview-5955--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit c43ea50

https://deploy-preview-5955--carbon-components-react.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 057618c

https://deploy-preview-5955--carbon-components-react.netlify.app

[emyarod]

this looks good to me, but is there a ticket associated with this PR? just trying to get some additional context for this change

[FrivalszkyP]

this looks good to me, but is there a ticket associated with this PR? just trying to get some additional context for this change

Sorry, I completely glanced over the note in the guidelines that I should have created an issue. I can create one to provide some example codes.

[FrivalszkyP]

@emyarod Added the issue and referenced it in my PR description! See here #5960

Hope I was able to provide enough context!

[asudoh]

Hi @FrivalszkyP thank you for jumping in! After comparing the purpose of alertdialog role and our modal usage guide, I'm inclined to believe that the alertdialog should be applied to all passiveModal variants. What do you think?

[dakahn]

@asudoh the attritbute role="alertdialog" should only be applied to dialogs that require the user to respond somehow (like with a confirmation or some other interaction). Our "passive" modals should just be role="alert"

[dakahn]

We may need to distinguish passive or active modals here. With passive modals not needing a users response simply being role="alert" and active modals requiring a response being role="alertdialog" since there is this distinction in our design guidance.

https://www.digitala11y.com/alertdialog-role/

[FrivalszkyP]

@dakahn Good call, do you suggest changing the role to alert in case passiveModal and alert are both true?

[FrivalszkyP]

Thanks! I updated the PR with the role="alert" functionality.

[dakahn]

Looks good! Thanks a lot for taking this on. 🏄

[tw15egan]

LGTM as well, thanks for adding! 👍 ✅