Changeset 48233

Timestamp:

06/30/2020 01:24:12 PM (6 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/admin/site-health.js (modified) (1 diff)
• wp-admin/css/site-health.css (modified) (2 diffs)
• wp-admin/site-health-info.php (modified) (1 diff)

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

@@ -11 +11 @@
         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' );
-
-                wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
+                var triggerElement = $( e.trigger ),
+                        successElement = $( '.success', triggerElement.closest( 'div' ) );
+
+                // 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.' ) );
         } );
 

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

@@ -204 +204 @@
 
 .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;
 }
 
@@ -457 +451 @@
                 font-weight: 600;
         }
+
+        .wp-core-ui .site-health-copy-buttons .copy-button {
+                margin-bottom: 0;
+        }
 }
 

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

@@ -100 +100 @@
                                 <?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>