CodeSeven / toastr

Simple javascript toast notifications

Home Page:http://www.toastrjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

commented

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 = '';
}