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.


Built from https://develop.svn.wordpress.org/trunk@45044


git-svn-id: http://core.svn.wordpress.org/trunk@44853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Gary Pendergast
2019-03-27 22:31:52 +00:00
parent 179c2ea230
commit 65f7cdbce0
12 changed files with 1025 additions and 79 deletions
+4 -17
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;
right: -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-right: 0.5rem;
}
body.site-health .copy-field-success.visible {
.site-health-copy-buttons .success.visible {
display: inline-block;
height: 28px;
line-height: 28px;
File diff suppressed because one or more lines are too long
+4 -17
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;
+1 -1
View File
File diff suppressed because one or more lines are too long