search

shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

Add ARIA attribute to improve accessibility #115

Closed upsilon closed 5 years ago

upsilon commented 5 years ago

Fixes #102

This is basic implementation of accessible toasts. I've tested on the Safari with VoiceOver.

To use aria-live="polite", this PR changes behavior of the container element of toasts to be inserted into the body immediately, rather than while calling $toasted.show().

emma11y commented 5 years ago

Can you, also, hide icons to improve accessibility with aria-hidden="true" ?

In the method "createIcon" :

var iel = document.createElement('i');
iel.setAttribute("aria-hidden", "true")
upsilon commented 5 years ago

Should I add an option to set alternate text as aria-label="..." to icons?

emma11y commented 5 years ago

No need. The aria-hidden is enough. :-)

upsilon commented 5 years ago

Should I add an option to set alternate text as aria-label="..." to icons?

It's not possible to set both aria-hidden="true" and aria-label="...", I'll add only aria-hidden="true".

emma11y commented 5 years ago

Thanks @upsilon ! :-)

emma11y commented 5 years ago

@shakee93 Can you approve this PR, please ? I need it. :-) Thanks !