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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48002 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/site-health-rtl.css

@@ -204,22 +204,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-right: 0.5rem;
 }
 
-.site-health-copy-buttons .success.visible {
-	display: inline-block;
-	height: 30px;
-	line-height: 2.30769231;
-}
-
 .site-status-has-issues.hide {
 	display: none;
 }
@@ -457,6 +451,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. */

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. */

wp-admin/js/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.

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>
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.5-alpha-48232';
+$wp_version = '5.5-alpha-48233';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.