Docs: focus handling after Copy to clipboard button pressed

[patrickhlauke]

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.

[rohit2sharma95]

Focus is not removed manually from the button, the button loses focus because of the clearSelection method of clipboardjs.

bootstrap/site/assets/js/application.js

Line 147 in 6ecf218

e.clearSelection()

But this is needed to unselect the code 🙂

There are few issues in the official repo but they are closed without any solution 🤔

1. Trigger loses focus after copy event zenorocha/clipboard.js#695
2. Calling e.clearSelection() on success doesn't move focus back to the trigger zenorocha/clipboard.js#680

/CC @zenorocha

PS: This behavior is present on their official website also: https://clipboardjs.com/

[patrickhlauke]

Thanks for investigating, @rohit2sharma95 ... and yes, turns out that I had actually fixed this originally in clipboard.js zenorocha/clipboard.js#419

[mdo]

Is this still applicable @patrickhlauke?

[patrickhlauke]

It is still a problem, but a problem at Clipboard.js' end. Since the original issue over there was summarily closed for no reason, I just reopened a fresh one zenorocha/clipboard.js#805

Wonder if it's worth keeping the issue here open until we see whether there'll be an upstream fix or not.

[patrickhlauke]

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

[patrickhlauke]

do we need to actively grab the latest version of clipboard.js, or is this done automagically?

[patrickhlauke]

i see this is now fixed in main. closing.