Ticket #50322: 50322.diff

src/js/_enqueues/admin/site-health.js

@@ -10 +10 @@
 
         var __ = wp.i18n.__,
                 _n = wp.i18n._n,
-                sprintf = wp.i18n.sprintf;
+                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;
 
-        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' );
-
         // 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' );
+                }, 3000 );
+
+                // Handle success audible feedback.
+                wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
         } );
 
         // Accordion handling in various areas.

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

@@ -203 +203 @@
 }
 
 .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;
 }
@@ -452 +446 @@
                 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. */

src/wp-admin/site-health-info.php

@@ -99 +99 @@
                         <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>