From 2df56667b32f2345b281cf8398d54be833957287 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Tue, 30 Jun 2020 13:24:12 +0000
Subject: [PATCH] Accessibility: Site Health: Improve the "Copy site info"
 button accessibility.

- avoids a focus loss when clicking the "Copy site info" button
- uses `setTimeout()` and `clearTimeout()` to properly handle the "Copied!" text
- minor JavaScript coding standards

Props audrasjb, Clorith, afercia.
See #48463, #50335.
Fixes #50322.


git-svn-id: https://develop.svn.wordpress.org/trunk@48233 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/site-health.js | 37 ++++++++++++++++++++-------
 src/wp-admin/css/site-health.css      | 14 +++++-----
 src/wp-admin/site-health-info.php     |  2 +-
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js
index b0f24c7121..4e70556d39 100644
--- a/src/js/_enqueues/admin/site-health.js
+++ b/src/js/_enqueues/admin/site-health.js
@@ -10,19 +10,38 @@ jQuery( document ).ready( function( $ ) {
 
 	var __ = wp.i18n.__,
 		_n = wp.i18n._n,
-		sprintf = wp.i18n.sprintf;
-
-	var data;
-	var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
-	var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length;
-	var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' );
+		sprintf = wp.i18n.sprintf,
+		data,
+		clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ),
+		isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length,
+		pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ),
+		successTimeout;
 
 	// Debug information copy section.
 	clipboard.on( 'success', function( e ) {
-		var $wrapper = $( e.trigger ).closest( 'div' );
-		$( '.success', $wrapper ).addClass( 'visible' );
+		var triggerElement = $( e.trigger ),
+			successElement = $( '.success', triggerElement.closest( 'div' ) );
 
-		wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
+		// Clear the selection and move focus back to the trigger.
+		e.clearSelection();
+		// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
+		triggerElement.focus();
+
+		// Show success visual feedback.
+		clearTimeout( successTimeout );
+		successElement.removeClass( 'hidden' );
+
+		// Hide success visual feedback after 3 seconds since last success.
+		successTimeout = setTimeout( function() {
+			successElement.addClass( 'hidden' );
+			// Remove the visually hidden textarea so that it isn't perceived by assistive technologies.
+			if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) {
+				clipboard.clipboardAction.removeFake();
+			}
+		}, 3000 );
+
+		// Handle success audible feedback.
+		wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
 	} );
 
 	// Accordion handling in various areas.
diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index accd0cacdf..19269f8a43 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -203,22 +203,16 @@
 }
 
 .site-health-copy-buttons .copy-button-wrapper {
+	display: inline-flex;
+	align-items: center;
 	margin: 0.5rem 0 1rem;
 }
 
 .site-health-copy-buttons .success {
-	display: none;
 	color: #40860a;
-	line-height: 1.8;
 	margin-left: 0.5rem;
 }
 
-.site-health-copy-buttons .success.visible {
-	display: inline-block;
-	height: 30px;
-	line-height: 2.30769231;
-}
-
 .site-status-has-issues.hide {
 	display: none;
 }
@@ -456,6 +450,10 @@
 		padding-bottom: 0;
 		font-weight: 600;
 	}
+
+	.wp-core-ui .site-health-copy-buttons .copy-button {
+		margin-bottom: 0;
+	}
 }
 
 /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */
diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php
index 53b336074d..466618be20 100644
--- a/src/wp-admin/site-health-info.php
+++ b/src/wp-admin/site-health-info.php
@@ -99,7 +99,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			<button type="button" class="button copy-button" data-clipboard-text="<?php echo esc_attr( WP_Debug_Data::format( $info, 'debug' ) ); ?>">
 				<?php _e( 'Copy site info to clipboard' ); ?>
 			</button>
-			<span class="success" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
+			<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
 		</div>
 	</div>