search

maxisam / ngx-clipboard

A pure angular clipboard directive
http://maxisam.github.io/ngx-clipboard/
MIT License
505 stars 93 forks source link

fix: #328 a11y - add aria-hidden to hidden textarea #329

Closed endlacer closed 1 month ago

endlacer commented 1 month ago

closes #328

endlacer commented 1 month ago

Can you say when you're doning to release the new version to npm?

maxisam commented 1 month ago

https://www.npmjs.com/package/ngx-clipboard/v/16.1.1-beta.0

please let me know if it works, thx!

endlacer commented 1 month ago

good that you made a beta first! now there is a console error even consering a11y: Blocked aria-hidden on a <textarea> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. <textarea readonly aria-hidden=​"true" style=​"font-size:​ 12pt;​ height:​ 1px;​ width:​ 1px;​ overflow:​ hidden;​ border:​ 0px;​ padding:​ 0px;​ margin:​ 0px;​ position:​ absolute;​ left:​ -9999px;​ top:​ 0px;​">​</textarea>​

So it complains that we focus a aria-hidden element. This is a bummer. I can look into this when I have the time. Question: Why do we even do this textarea hack, what is the reason not just doing navigator.clipboard.writeText?

And if it is necessary (iOS/Safari eg), does it need to be a formelement to copy from? Can't we copy from a div (no focus shenanigans, therefor no a11y concerns)

maxisam commented 1 month ago

I think it was for backward compatibility but i am not sure now. This project has been a long time. I don't even know if I should just deprecated it, because material has clipboard now as well https://material.angular.io/cdk/clipboard/overview