Site Health: Improve the "Copy to Clipboard" button

[pento]

Splitting this off from #46573.

The current method for copying the debug report to the clipboard involves having a hidden <textarea>, but this shows up in screen readers (ref) and can't be reliably hidden (ref).

Per design review from @hedgefield:

To the point of being able to review your copied text - is that really necessary? All the info is technically present on the page, and after copying you can paste it somewhere and then review if you want to remove something from it. I don't think many people scroll through the whole thing to see what all is in there before they copy it, but then again that's only my assumption. I just feel like we are making it harder than it needs to be. The main usecase in my mind is a support engineer asks you to copy that infodump, you want to give someone the quickest way to do so. Feel free to correct me if I'm wrong in that though.

I agree with this assessment. The person using this tool has the ability to review the content being copied in the report itself. The formatting of what's copied is not really relevant, as the copy event can include multiple data types. We're currently only including plain text, but this could also include HTML, Markdown, or even blocks.

[pento]

In 46647.diff​:

• Introduce ​clipboard.js, which the block editor also uses for managing cross-browser clipboard handling.
• Remove the hidden <textarea> elements.
• Change the copy button label to "Copy report to clipboard".
• Rename WP_Debug_Data::textarea_format() to WP_Debug_Data::format(), and make it return the formatted data, instead of printing it.
• Cleaned up the class names in the copy button section.

@hedgefield: Just looking at the clipboard button section, what are your thoughts on how it's implemented? In particular, one of the concerns is that it isn't clear what's being copied: does the button label help with that, or can we point it out in a clearer way?

[afercia]

In the screenshot above, I see when "Hello Dolly" is active, the main heading is misplaced. Will create a ticket...

[hedgefield]

@pento This implementation looks great, thanks for spearheading.

I think we can improve the button UX by tweaking the label and also the copy above it. The copy now refers to the export function, but not what the page is for. Here's my suggestion:

This page can show you every detail about the configuration of your WordPress website. If we see anything here that could be improved, we will let you know on the Site Status page.

If you want to export a handy list of all the information on this page, you can use the button below to copy it to the clipboard. You can then paste it in a text file and save it to your harddrive, or paste it in an email exchange with a support engineer or theme/plugin developer for example.

[Copy site info to clipboard]

[pento]

Copy looks good, thank you for the review, @hedgefield!

[pento]

In 45044:

Site Health: Improve the "Copy to clipboard" button.

The previous method for copying the debug report to the clipboard involved having a hidden <textarea>, but this shows up in screen readers and can't be reliably hidden.

To work around this, the button now uses the clipboard.js library, which automatically handles browser differences in the Clipboard API, and can load the text to copy from a data- attribute on the button.

Props pento, hedgefield, afercia.
Fixes #46647.

[afercia]

Just noticed grunt jshint:core fails (at least for me) because ClipboardJS is undefined:

Running "jshint:core" (jshint) task

   src/js/_enqueues/admin/site-health.js
     13 |    var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
                                 ^ 'ClipboardJS' is not defined.

[SergeyBiryukov]

In 45055:

Site Health: Declare ClipboardJS global to fix JSHint issue.

See #46647.

[afercia]

For history: worth noting that also ClipboardJS uses a hidden textarea. The textarea is injected in the DOM on the first Copy action and then it stays there in the DOM, producing this issue again. The textarea can be removed on the Copy success callback but it requires some work. See #50322.