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.



git-svn-id: https://develop.svn.wordpress.org/trunk@45044 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Gary Pendergast
2019-03-27 22:30:26 +00:00
parent 43c28f913c
commit 1ab6f67ef5
7 changed files with 40 additions and 58 deletions

View File

@@ -209,36 +209,23 @@ body.site-health .spinner {
float: none;
}
body.site-health .system-information-copy-wrapper {
.site-health-copy-buttons {
display: block;
margin: 1rem 0;
}
body.site-health .system-information-copy-wrapper textarea {
border: 0;
padding: 0;
margin: 0;
position: absolute;
left: -9999px;
top: -9999px;
}
body.site-health .health-check-toggle-copy-section:hover {
background: none;
}
body.site-health .system-information-copy-wrapper .copy-button-wrapper {
.site-health-copy-buttons .copy-button-wrapper {
margin: 0.5rem 0 1rem;
}
body.site-health .copy-field-success {
.site-health-copy-buttons .success {
display: none;
color: #40860a;
line-height: 1.8;
margin-left: 0.5rem;
}
body.site-health .copy-field-success.visible {
.site-health-copy-buttons .success.visible {
display: inline-block;
height: 28px;
line-height: 28px;