question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Docs: focus handling after Copy to clipboard button pressed

See original GitHub issue

I thought we addressed this ages ago, but: setting keyboard focus on one of the “Copy” buttons and activating it, focus is then lost/reset to the start of the page. While browsers try to error-correct for this (meaning that a subsequent Tab moves to the next focusable element), the issue becomes evident when using AT (e.g. Chrome/JAWS, activate the button, then use reading keys to carry on reading…focus was moved back right to the start of the page).

Ideally, focus should remain on the “Copy” button, but I’m assuming this was not done in order to “clear” the visual style of the button. Perhaps this needs to dynamically set a class immediately after a copy operation was carried out, which suppresses/changes the styling (maybe suppressing the tooltip, OR adding some indicator like a tick that shows it was indeed copied), and clearing that class again as soon as the button loses focus.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
patrickhlaukecommented, May 4, 2022

My PR on clipboard.js has been merged, so once we grab the most recent release, this issue here will also be addressed https://github.com/zenorocha/clipboard.js/pull/807

1reaction
patrickhlaukecommented, May 8, 2021

Thanks for investigating, @rohit2sharma95 … and yes, turns out that I had actually fixed this originally in clipboard.js https://github.com/zenorocha/clipboard.js/pull/419

Read more comments on GitHub >

github_iconTop Results From Across the Web

focus issue when I click copy button using document ...
I have a copy button created by javascript, and its has onclick event like this: let copyButton = document.createElement("button"); ...
Read more >
Interact with the clipboard - Mozilla - MDN Web Docs
So, to add a "copy to clipboard" button to a span , div , or p tag, you need to use a workaround,...
Read more >
Use Gmail with a screen reader - Google Support
When any conversation or message has focus, press x on the keyboard to select it. Press x again to deselect it. Your screen...
Read more >
Unblocking clipboard access - web.dev
Async Clipboard API simplifies permissions-friendly copy and paste. ... The Async Clipboard API is limited to handling text and images on ...
Read more >
clipboard.js — Copy to clipboard without Flash
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found