From 1ab6f67ef51ee918d0292a0ee0c8d334cf0ea4c0 Mon Sep 17 00:00:00 2001
From: Gary Pendergast <pento@git.wordpress.org>
Date: Wed, 27 Mar 2019 22:30:26 +0000
Subject: [PATCH] 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
---
 Gruntfile.js                                  |  1 +
 package.json                                  |  1 +
 src/js/_enqueues/admin/site-health.js         | 19 ++++-------
 src/wp-admin/css/site-health.css              | 21 +++---------
 src/wp-admin/includes/class-wp-debug-data.php | 18 +++++-----
 src/wp-admin/site-health-info.php             | 34 ++++++++-----------
 src/wp-includes/script-loader.php             |  4 ++-
 7 files changed, 40 insertions(+), 58 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index f40fa336cf..c71fe02612 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -166,6 +166,7 @@ module.exports = function(grunt) {
 				files: [
 					{
 						[ WORKING_DIR + 'wp-includes/js/backbone.js' ]: [ './node_modules/backbone/backbone.js' ],
+						[ WORKING_DIR + 'wp-includes/js/clipboard.js' ]: [ './node_modules/clipboard/dist/clipboard.js' ],
 						[ WORKING_DIR + 'wp-includes/js/hoverIntent.js' ]: [ './node_modules/jquery-hoverintent/jquery.hoverIntent.js' ],
 						[ WORKING_DIR + 'wp-includes/js/imagesloaded.min.js' ]: [ './node_modules/imagesloaded/imagesloaded.pkgd.min.js' ],
 						[ WORKING_DIR + 'wp-includes/js/jquery/jquery-migrate.js' ]: [ './node_modules/jquery-migrate/dist/jquery-migrate.js' ],
diff --git a/package.json b/package.json
index 2e4c7ead45..3f777bce1e 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
 		"@wordpress/viewport": "2.3.0",
 		"@wordpress/wordcount": "2.2.0",
 		"backbone": "1.3.3",
+		"clipboard": "2.0.4",
 		"element-closest": "^2.0.2",
 		"formdata-polyfill": "3.0.13",
 		"imagesloaded": "3.2.0",
diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js
index 826f46f4a2..140c5c1e37 100644
--- a/src/js/_enqueues/admin/site-health.js
+++ b/src/js/_enqueues/admin/site-health.js
@@ -10,21 +10,14 @@ jQuery( document ).ready( function( $ ) {
 
 	var data;
 
+	var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
+
 	// Debug information copy section.
-	$( '.health-check-copy-field' ).click( function( e ) {
-		var $textarea = $( '#system-information-' + $( this ).data( 'copy-field' ) + '-copy-field' ),
-			$wrapper = $( this ).closest( 'div' );
+	clipboard.on( 'success', function( e ) {
+		var $wrapper = $( e.trigger ).closest( 'div' );
+		$( '.success', $wrapper ).addClass( 'visible' );
 
-		e.preventDefault();
-
-		$textarea.select();
-
-		if ( document.execCommand( 'copy' ) ) {
-			$( '.copy-field-success', $wrapper ).addClass( 'visible' );
-			$( this ).focus();
-
-			wp.a11y.speak( SiteHealth.string.site_info_copied );
-		}
+		wp.a11y.speak( SiteHealth.string.site_info_copied );
 	} );
 
 	// Accordion handling in various areas.
diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index cd39fe3a21..d8cbaa52f0 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -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;
diff --git a/src/wp-admin/includes/class-wp-debug-data.php b/src/wp-admin/includes/class-wp-debug-data.php
index 6e82e0b672..a49ffc2922 100644
--- a/src/wp-admin/includes/class-wp-debug-data.php
+++ b/src/wp-admin/includes/class-wp-debug-data.php
@@ -881,15 +881,16 @@ class WP_Debug_Data {
 	}
 
 	/**
-	 * Print the formatted variation of the information gathered for debugging, in a manner
-	 * suitable for a text area that can be instantly copied to a forum or support ticket.
+	 * Format the information gathered for debugging, in a manner suitable for copying to a forum or support ticket.
 	 *
 	 * @since 5.2.0
 	 *
 	 * @param array $info_array Information gathered from the `WP_Debug_Data::debug_data` function.
+	 * @param string $type      Optional. The data type to format the information as. Default 'text'.
+	 * @return string The formatted data.
 	 */
-	public static function textarea_format( $info_array ) {
-		echo "`\n";
+	public static function format( $info_array, $type = 'text' ) {
+		$return = '';
 
 		foreach ( $info_array as $section => $details ) {
 			// Skip this section if there are no fields, or the section has been declared as private.
@@ -897,7 +898,7 @@ class WP_Debug_Data {
 				continue;
 			}
 
-			printf(
+			$return .= sprintf(
 				"### %s%s ###\n\n",
 				$details['label'],
 				( isset( $details['show_count'] ) && $details['show_count'] ? sprintf( ' (%d)', count( $details['fields'] ) ) : '' )
@@ -921,15 +922,16 @@ class WP_Debug_Data {
 					}
 				}
 
-				printf(
+				$return .= sprintf(
 					"%s: %s\n",
 					$field['label'],
 					$values
 				);
 			}
-			echo "\n";
+			$return .= "\n";
 		}
-		echo '`';
+
+		return $return;
 	}
 
 	/**
diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
index cf245c4e1e..571c221dd6 100644
--- a/src/wp-admin/site-health-info.php
+++ b/src/wp-admin/site-health-info.php
@@ -61,7 +61,11 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 		<?php
 		WP_Debug_Data::check_for_updates();
 
-		$info = WP_Debug_Data::debug_data();
+		$info         = WP_Debug_Data::debug_data();
+		$english_info = '';
+		if ( 0 !== strpos( get_locale(), 'en' ) ) {
+			$english_info = WP_Debug_Data::debug_data( 'en_US' );
+		}
 		?>
 
 		<h2>
@@ -69,29 +73,21 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 		</h2>
 
 		<p>
-			<?php _e( 'You can export the information on this page so it can be easily copied and pasted in support requests such as on the WordPress.org forums, or shared with your website / theme / plugin developers.' ); ?>
+			<?php _e( '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.' ); ?>
+		</p>
+		<p>
+			<?php _e( '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.' ); ?>
 		</p>
 
-		<div class="system-information-copy-wrapper">
-			<textarea id="system-information-default-copy-field" readonly><?php WP_Debug_Data::textarea_format( $info ); ?></textarea>
-
-			<?php
-			if ( 0 !== strpos( get_locale(), 'en' ) ) :
-
-				$english_info = WP_Debug_Data::debug_data( 'en_US' );
-				?>
-				<textarea id="system-information-english-copy-field" readonly><?php WP_Debug_Data::textarea_format( $english_info ); ?></textarea>
-
-			<?php endif; ?>
-
+		<div class="site-health-copy-buttons">
 			<div class="copy-button-wrapper">
-				<button type="button" class="button button-primary health-check-copy-field" data-copy-field="default"><?php _e( 'Copy to clipboard' ); ?></button>
-				<span class="copy-field-success" aria-hidden="true">Copied!</span>
+				<button type="button" class="button button-primary copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $info, 'text' ) ); ?>"><?php _e( 'Copy site info to clipboard' ); ?></button>
+				<span class="success" aria-hidden="true">Copied!</span>
 			</div>
-			<?php if ( 0 !== strpos( get_locale(), 'en' ) ) : ?>
+			<?php if ( $english_info ) : ?>
 				<div class="copy-button-wrapper">
-					<button type="button" class="button health-check-copy-field" data-copy-field="english"><?php _e( 'Copy to clipboard (English)' ); ?></button>
-					<span class="copy-field-success" aria-hidden="true">Copied!</span>
+					<button type="button" class="button copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $english_info, 'text' ) ); ?>"><?php _e( 'Copy site info to clipboard (English)' ); ?></button>
+					<span class="success" aria-hidden="true">Copied!</span>
 				</div>
 			<?php endif; ?>
 		</div>
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 5bba581d8f..3a3f57eded 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -924,6 +924,8 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'editor', "/wp-admin/js/editor$suffix.js", array( 'utils', 'jquery' ), false, 1 );
 
+	$scripts->add( 'clipboard', "/wp-includes/js/clipboard$suffix.js", array(), false, 1 );
+
 	// Back-compat for old DFW. To-do: remove at the end of 2016.
 	$scripts->add( 'wp-fullscreen-stub', "/wp-admin/js/wp-fullscreen-stub$suffix.js", array(), false, 1 );
 
@@ -1688,7 +1690,7 @@ function wp_default_scripts( &$scripts ) {
 			)
 		);
 
-		$scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
+		$scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
 
 		$scripts->add( 'updates', "/wp-admin/js/updates$suffix.js", array( 'jquery', 'wp-util', 'wp-a11y' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize(