Accessibility Enhancement

[michaelrobertson-fico-com]

We would like to create a pull request to add a little more nuance to the good work you've already done. Currently the component is using role="alertdialog" and our reading of the guidance indicates that role="alert" would be more appropriate for most implementations.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role

Unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears. Generally alert dialogs have at least a Confirmation, Close or Cancel button that can be used to move focus to. Additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes. Which particular control focus should be moved to depends on the purpose of the dialog.

Because of its urgent nature, alert dialogs must always be modal.

Perhaps there should be an option for this modal 'alertdialog' to include a dimmer, and a center/center position.

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/alertdialog.html

We don't know whether the 'alertdialog' special case should be driven by the enableHtml property, or an additional modal boolean.

Would appreciate your thoughts. We've just added ngx-toastr to our design system dependencies and appreciate all the great functionality on top of the CDK. We'd be happy to take a crack at this enhancement and add it to our roadmap.

::Michael

[HadiAyoub]

These are my findings as well. I mentioned having problems with JAWS in #444 - I believe this difference in roles is the reason. For example, on the demo page, the pink alert example will be read out by JAWS, but other toasts aren't being read. The pink alerts are using role="alert".

[HadiAyoub]

As a workaround for our project, I have just gone with the custom component implementation, extended the toast class and made the necessary changes in the template as necessary. I also feel like we shouldn't be using [attr.aria-label]="message" - in both apple voiceover and jaws it leads to the content of the alert being read twice.

[scttcper]

🎉 This issue has been resolved in version 14.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[maksym-yaremenko-simpligov]

Hello everyone!

The issue is still reproducible on the demo page.
Env: macOS Monterey 12.6 (21G115) / voiceover / "ngx-toastr": "16.0.2".
Also voice-over sometimes misses to read new toasts. Is anyone know how to fix it?

thank you