Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility issues #681

Open
Gabrielaparada opened this issue Jan 26, 2022 · 1 comment
Open

Accessibility issues #681

Gabrielaparada opened this issue Jan 26, 2022 · 1 comment

Comments

@Gabrielaparada
Copy link

Gabrielaparada commented Jan 26, 2022

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

@dugi-x
Copy link

dugi-x commented May 13, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants