Accessibility issues
Gabrielaparada opened this issue · comments
Has anyone successfully used this package with a screen reader?. The toastrs have the correct aria attributes but the screen reader still does not pick up the messages when they happen.
If I had to guess it's due to the fact that the toastr div is not injected into the HTML until there is a message, to my understanding the div (with the attributes) has to be present on load so when the error/success/warning message is added dynamically the screen reader can then pick up that there was a change and announce it.
I found myself having to write inline hidden fallback messages for all my toastrs, by implementing what I mentioned above however it's quite time-consuming. I'd like to know if there is a way to get the screen reader to pick up these messages successfully? am I doing something wrong?
Thanks
I have found that this patch solves the problem in my case.
Maybe it will help someone until and if at all there will be a built-in solution
toastr.options.onShown = function(){
let toastMsg = this;
let toastContainer = this.parentNode;
toastMsg.style.opacity = '0';
toastContainer.setAttribute('role','alert');
toastContainer.setAttribute('aria-atomic','false');
toastMsg.querySelectorAll('.toast-title,.toast-message').forEach(div=>div.setAttribute('aria-label',div.innerText));
toastMsg.style.opacity = '';
}