Describe the bug
Splitting this out from #23994 / #24022

After a successful copy action, there's one more tab stop between the "Copy" button and the "Duplicate" button.

This is because Clipboard.js add its visually hidden textarea within the button. The textarea is focusable, so it is a tab stop. It is also announced by screen readers.

Worth noting adding a textarea within a button isn't ideal in the first place. Similar issues have surfaced during recent work in core for other Clipboard.js Copy buttons and have been resolved by removing the visually hidden textarea on the copy action success. See:
https://core.trac.wordpress.org/changeset/48233
https://core.trac.wordpress.org/changeset/48232

I also reported this issue upstream:
zenorocha/clipboard.js#684

Ideally, the visually hidden textarea should be removed on the copy action success. This is how I fixed it in core. Worth noting Clipboard.js re-adds the textarea at any click so removing it on success looks safe.

However, I couldn't find a nice way to use the fix used in core also in useCopyOnClick.

As far as I see, clipboard.current.destroy(); is used in the useEffect cleanup but that's not enough. It should be called also on success. I couldn't find a way to make it work other than adding one more timeout which I guess isn't ideal. Any help would be greatly appreciated.

To reproduce

• click on a paragraph block
• click on the block toolbar "more" menu
• using the keyboard, navigate to the Copy button
• after the copy action has completed, press the Tab key again
• observe that seems focus isn't set anywhere
• actually, the hidden textarea is now focused
• press again the Tab key
• see that focus goes to the Duplicate button

Screenshot: textarea within the Copy button:

Screenshot: visually hidden textarea after the "Copy" button announced by screen readers:

Question:
Is there the need to add the visually hidden textarea within the button in the first place? See:
container: ref.current,

Now that the implementation is based on useEffect, seems to me it would be safe to remove container: ref.current, and let Clipboard.js append the visually hidden textarea to the body. I tested it a bit and seems to me this way the textarea is removed after copying. Also, the useEffect cleanup makes sure the textarea is removed when the component unmounts, correct? So it should be safe.

Pinging @ellatrix and @gziolo as I saw you worked on this bit of code.