documentation icon indicating copy to clipboard operation
documentation copied to clipboard
verified publisher icon npm

Announce copy to clipboard action

Open anurbol opened this issue 3 years ago • 2 comments

Fix screen reader not announcing any information upon activating 'Copy to Clipboard' button

References

Related to https://github.com/github/accessibility-audits/issues/2795

anurbol avatar Oct 19 '22 09:10 anurbol

Considered options:

  • Focus a hidden element with the announcement text. Doesn't work nice for Safari tried workarounds, not working and it is becoming hackish and ugly.
  • Create a notification/toast element and style it GitHub way (https://primer.style/css/components/toasts) - didn't figure out how to use the .Toast class, didn't find any usage across wubwub and documentation projects.
  • Primer React doesn't seem to have a notification/toast component. The closest thing to that is the Dialog. Customizing it would require a lot of effort, IMO.
  • Gatsby seems to have a notification feature, but it is probably only for system/its own usage - couldn't find a way to use it from a theme. Gatsby plugins seem to be about build time notifications and not web notifications.

anurbol avatar Oct 19 '22 10:10 anurbol

I now want to make a notification component like in wubwub. Since it seems it is the only proper way to solve issue.

anurbol avatar Oct 20 '22 07:10 anurbol